Shuffle Match HTML5 Game

Shuffle Match is a full commercial game that is currently available on iOS and Android devices and was converted to HTML5 using Booty5 to assess performance.This tutorial is more of an example, so instead of the usual walk through you will be introduced to the various areas of the game instead. The main purpose of this tutorial is to introduce you to a full commercial quality game that has been developed using Booty5.

Use of Scenes and Actors

viewarea – This scene represents the left hand side of the shuffle screen where the user is presented with a grid of numbers to remember

guessarea – This scene represents the right hand side of the shuffle screen where the user is presented with an empty grid and have to fill it in by guessing the correct numbers

gameover – This scene represents the game over screen, which comprises of the end of game stats

mainmenu -This scene represents the main menu which is presented to the user when they first run the game / or pause the game

Each scene contains actors that are specific to that scene. For example, the main menu scene contains actors that represent the menu background and buttons.If you select the “new_game_button” actor in the mainmenu scene and scroll down to the actors event handlers you will notice that the OnTapped event handler contains the following script:

1

2

newGame();

window.app.findResource('tap','sound').play();

The above code calls newGame() which is defined the in the menu.js script file, this function starts a new game. The above code then finds the “tap” sound effect resource that is located the app global resources and sets it off playing.

Scenes are slid in and out using Timeline animations in response to user actions, for example when the user taps the menu icon during game play the main menu is slid into view.

The main game code is situated in the ShuffleMatch class within the shufflematch.js script file.