vue-games

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

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

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

Properties

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

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

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

Properties

• To create and publish this library I've followed this tutorial: https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3
• To create Hangman game I've started from this code: https://github.com/joebeachjoebeach/hangman
• I've followed this steps to create Crossword game's html & css structure: https://www.sitepoint.com/how-built-pure-css-crossword-puzzle/

License

This software is distributed under MIT license.