“CLOCKS – The Game” HTML5 prototype step 2: how to select starting clock

Talking about CLOCKS - The Game game, Game development, HTML5, Javascript and Phaser.

Welcome to the first post of 2016. We’ll continue from the last 2015 tutorial about the creation of a HTML5 “CLOCKS – The Game” prototype using Phaser framework and ARCADE physics. In first step I showed you how to generate the first 10 levels, both with objects and with arrays generated by Tiled Map Eeditor. Now it’s time to add another feature to the game: randomly selecting the starting clock. Moreover, the starting clock has a different look, with another color and a visible clock face. From now on, I will also use levels generated by Tiled, but you are free to generate yours as you want. I had to turn some flat images into sprite sheet to store normal and highlighted clock status in a single file, and same thing goes for the hand. Highlighted clocks were made using a dark gray as I will tint them according to level tint color. When a level is generated, each clock I create is stored into an array, so selecting the starting clock is just picking a random element in the array. Then it’s just a matter of tinting some sprites and showing some other sprites. Have a look:
Each three seconds a new level is generated, and a random clock is chosen as the starting clock. Here is the source code, still uncommented as it’s just in an embrional stage, but with next step you’ll be able to play the levels. 
var game;
var gridSize = 40;
var levelWidth = 8;
var levelHeight = 8;
var level = 0;


window.onload = function() {	
	game = new Phaser.Game(640, 960, Phaser.AUTO, "");
     game.state.add("Boot", boot);
     game.state.add("Preload", preload); 
     game.state.add("PlayGame", playGame);
     game.state.start("Boot");
}

var boot = function(game){};
boot.prototype = {
  	preload: function(){
          this.game.load.image("loading","assets/sprites/loading.png"); 
	},
  	create: function(){
		game.scale.pageAlignHorizontally = true;
		game.scale.pageAlignVertically = true;
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
		game.state.start("Preload");
	}      
}

var preload = function(game){};
preload.prototype = {
     preload: function(){
          game.load.spritesheet("smallclock", "assets/sprites/smallclock.png", 70, 70);
          game.load.spritesheet("smallhand", "assets/sprites/smallhand.png", 70, 70);
          game.load.spritesheet("bigclock", "assets/sprites/bigclock.png", 140, 140);
          game.load.spritesheet("bighand", "assets/sprites/bighand.png", 140, 140);
          game.load.image("smallclockface", "assets/sprites/smallclockface.png");
          game.load.image("bigclockface", "assets/sprites/bigclockface.png");
     },   
     create: function(){
          game.state.start("PlayGame");
     } 
}

var playGame = function(game){};
playGame.prototype = {
     create: function(){
          this.clockGroup = game.add.group();
          this.clockGroup.y = (game.height - gridSize * 16) / 2;
          this.clocksArray = [];
          game.stage.backgroundColor = 0x2babca;         
          for(var i = 0; i < levels[level].tiledOutput.length; i++){
               switch(levels[level].tiledOutput[i]){
                    case 1:
                         this.clocksArray[i] = this.placeClock(new Phaser.Point(i % levelWidth * 2 + 1, Math.floor(i / levelHeight) * 2 + 1), "small");
                         break;
                    case 2:
                         this.clocksArray[i] = this.placeClock(new Phaser.Point(i % levelWidth * 2 + 2, Math.floor(i / levelHeight) * 2), "big");
                         break;
               }
          }
          do{
               var startClock = game.rnd.between(0, levels[level].tiledOutput.length - 1);
          } while(levels[level].tiledOutput[startClock]==0);
          this.clocksArray[startClock].children[0].frame = 1;
          this.clocksArray[startClock].children[0].tint = 0x2babca;
          this.clocksArray[startClock].children[1].frame = 1;
          this.clocksArray[startClock].children[1].tint = 0xffffff;
          this.clocksArray[startClock].children[2].visible = true;
          game.time.events.add(Phaser.Timer.SECOND * 3, function(){
               level = (level + 1) % 10;
               game.state.start("PlayGame");
          });
     },
     placeClock: function(clockObj, prefix){
          var localClockGroup = game.add.group();
          var clockSprite = game.add.sprite(clockObj.x * gridSize, clockObj.y * gridSize, prefix + "clock");
          clockSprite.anchor.set(0.5);
          localClockGroup.add(clockSprite);
          var handSprite = game.add.sprite(clockObj.x * gridSize, clockObj.y * gridSize, prefix + "hand");
          handSprite.anchor.set(0.5);
          handSprite.tint = 0x2babca;
          handSprite.angle = game.rnd.between(0, 359);
          game.physics.enable(handSprite, Phaser.Physics.ARCADE);
          handSprite.body.angularVelocity = game.rnd.between(levels[level].clockSpeed[0], levels[level].clockSpeed[1]) * (1 - 2 * game.rnd.between(0, 1));
          localClockGroup.add(handSprite);
          var faceSprite = game.add.sprite(clockObj.x * gridSize, clockObj.y * gridSize, prefix + "clockface");
          faceSprite.anchor.set(0.5);
          faceSprite.visible = false;
          localClockGroup.add(faceSprite);
          this.clockGroup.add(localClockGroup);
          return localClockGroup;
     }
}

var levels = [
// level 1
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
// level 2
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 
},
// level 3
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 
},
// level 4
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
// level 5
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
// level 6
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
// level 7
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
// level 8
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
// level 9
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0] 
},
// level 10
{
     clockSpeed: [200, 450],
     tiledOutput: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 2, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0] 
}
]
You are closer to see how easy is to create the final game – I will also add more levels – thanks to Phaser and Arcade Physics. Meanwhile, download the source code.