Vue-games NPM | npm.io

vue-games

Different word games mades as separated components to be reused. This npm package allows you to include this components in your vue application.\

You can check a demo online here :)

Installation

npm install --save vue-games

Every component will have a default array with some words to play. Will show a play again button every time a game is ended, you can choose not showing it by sending showPlayAgain value in false. By default, language is english for some messages. Its posible to change default language (only to spanish for now).

Hangman Game

HangmanScreenshot

<template>
  <hangman-game />
</template>

<script>
import 'vue-games'
</script>

Properties

Property	Type	Default Value	Valid Values
words	Array	`['Pear', 'Apple', 'Tomatoe', 'Blackberry', 'Strawberry']`
showPlayAgain	Boolean	`true`
lang	String	`EN`	`['EN', 'ES']`

Every time a game ends this component will emit gameFinished with the current word, and a boolean value telling if the playes has won or has lost.

Usage example:

Lets say we are spanish speakers, so we want to change default values:

<template>
  <hangman-game
    :words="words"
    :show-play-again="false"
    :lang="ES"
    @gameFinished="gameFinished"
  />
</template>
<script>
import 'vue-games'
export  default {
  data () {
    return {
      words: ['Pera', 'Manzana', 'Tomate', 'Cereza', 'Frutilla'],
    }
  },

  methods: {
    gameFinished: function (word, lose) {
      console.log('game finished!!!')
      console.log('user was guessing word:', word)
      console.log('she/he/it lost?', lose)
    }
  }
}
</script>

Crossword Game

CrosswordScreenshot

<template>
  <crossword-game />
</template>

<script>
import 'vue-games'
</script>

Properties

Property	Type	Default Value	Valid Values
words	Array	`[{'word': 'Coffee','description': 'Many people drink it in the morning with milk or cream.'},{'word': 'Tea','description': "British people drink it at 5 o' clock."}]`
showPlayAgain	Boolean	`true`
lang	String	`EN`	`['EN', 'ES']`