An Angular 2 game module to facilitate the creation of a multiple choices game.
The module offers the posibilities of math questions (using latex) or plain text question (see the pictures below).
npm install --save torbi.ng2-choices-game
Then you need to configure it in your
systemjs.config.js if you use it.
The library was thinked to be really easy to use. You got two main components:
game-view component and
GameControl service. Additionally, you will need to use
models: a collection of models classes.
GameControl is your interface to control the whole game. You can call methods or attach to events. Next we show you the interface details:
setGameInstance(GameInstance) : Sets the instance of the gamegetGameInstance() : Retrieve the game instancestart() : Starts the gamepause() : Pauses the gameresume() : Resumes the game
onScoreChange() : called when the score changes, returns an observable of the Score to add. This method is really important to manage the user scoreonStart() : called when the game is started.onGameInstanceChange() : called when the game instance is changed.onLevelChange(): called when a level is changed. Returns the number of the new levelonGameOver() : called when the game is over. Returns a GameOverType.
For library test purposes, this service offers a
gameMock. You can use it to facilitate the library's first uses (keep in mind that the game model could be a big json file)
This is the main selector of the library. This was thinked to work without anything else. Like this:
But if you use it like above, the Level Load Screen and Game Over Screen will not show anything. To avoid this situation, you need to use a few more selectors. Below, we show you how:
here you can put the html to show at the charge of the first levelPrepare to Plaaay!here you can put the html to show at the charge of all non first levelhere you can put the html to show at the game over screen
Like we said above, the goal of this library it's to be easy to use. For that reason we added a selector called
<effectivity-content [isGameOver]='boolean'></effectivity-content>, to use in the
game-over-body. You can look the result of the use of this selector at the third and fourth images at the beginning of this readme.
Prepare to Plaaay!