// the game itself
var game;
// a selection of colors to be randomly picked and set as background color
var bgColors = [0x62bd18, 0xff5300, 0xd21034, 0xff475c, 0x8f16b2, 0x588c7e, 0x8c4646];
// lock rotatiokn speed
var rotationSpeed = 3;
// maximum angle difference allowed between the ball and the ball
var maxAngleDifference = 10;
window.onload = function() {
// creation of the game
game = new Phaser.Game(640, 960, Phaser.AUTO, "");
// creation of the main (and only) game state
game.state.add("PlayGame", playGame);
// starting "PlayGame" game state
game.state.start("PlayGame");
}
var playGame = function(game){};
playGame.prototype = {
preload: function(){
// preloading the images we are going to use
// the ball
game.load.image("ball", "ball.png");
// the rotating bar
game.load.image("bar", "bar.png");
// the ring
game.load.image("ring", "ring.png");
},
create: function(){
// center the game horizontally
game.scale.pageAlignHorizontally = true;
// center the game vertically
game.scale.pageAlignVertically = true;
// setting the scale mode to cover the largest part of the screen possible while showing the entire game
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
// picking a random item in bgColors array
var tintColor = game.rnd.pick(bgColors);
// setting the document background color to tint color
document.body.style.background = "#"+tintColor.toString(16);
// setting the game background color to tint color
game.stage.backgroundColor = tintColor;
// placing the ring in the center of the canvas
var ring = game.add.sprite(game.width / 2, game.height / 2, "ring");
// setting ring anchor point to its middle
ring.anchor.set(0.5);
// setting it to half/transparent
ring.alpha = 0.5;
// placing the ball, no matter where as we will change its position later
this.ball = game.add.sprite(0, 0, "ball");
// setting ball anchor point to its middle
this.ball.anchor.set(0.5);
// let's put a fake start angle just to let next method placeBall work properly
this.ball.ballAngle = -90;
// this function will place the ball in a random spot around the ring
this.placeBall();
// placing the bar in the middle of the canvas
this.bar = game.add.sprite(game.width / 2, game.height / 2, "bar");
// setting bar anchor point
this.bar.anchor.set(0, 0.5);
// rotating bar to make it vertical
this.bar.angle = -90;
// crossingBall property is used to check if the bar is crossing the ball.
// the game does not allow the bar to cross the ball, so it will be game over
this.bar.crossingBall = false;
// setting bar rotation direction
this.bar.rotationDirection = 0;
// waiting for a game input then call startMoving function
game.input.onDown.add(this.startMoving, this);
},
placeBall: function(){
// we want to move the ball by at least 40 degrees
do{
var newAngle = game.rnd.angle();
} while (angleDifference(newAngle, this.ball.ballAngle) < 40)
// setting ballAngle property accordingly
this.ball.ballAngle = newAngle;
// placing the ball accordingly thanks to trigonometry
this.ball.x = game.width / 2 + 175 * Math.cos(Phaser.Math.degToRad(this.ball.ballAngle));
this.ball.y = game.height / 2 + 175 * Math.sin(Phaser.Math.degToRad(this.ball.ballAngle));
},
startMoving: function(){
// removing the old input listener
game.input.onDown.remove(this.startMoving, this);
// adding a new input listener calling changeDirection function
game.input.onDown.add(this.changeDirection, this);
// setting rotation direction
this.bar.rotationDirection = 1;
},
changeDirection: function(){
// determining the difference between bar and circle angles
var angleDifference = Math.abs(this.ball.ballAngle - this.bar.angle);
// if angle difference is greater than the maximum allowed...
if(angleDifference > maxAngleDifference){
// it's game over
this.fail();
}
else{
// resetting crossingBall property
this.bar.crossingBall = false;
// inverting rotation direction
this.bar.rotationDirection *= -1;
// placing the ball elsewhere
this.placeBall();
}
},
update: function(){
// moving the bar according to its rotation speed
this.bar.angle += rotationSpeed * this.bar.rotationDirection;
// determining the difference between bar and circle angles
var angleDifference = Math.abs(this.ball.ballAngle - this.bar.angle);
// if the angle difference is less than the max angle difference allowed,
// the bar is crossing the ball
if(angleDifference < maxAngleDifference && !this.bar.crossingBall){
// so we set crossingBall property to true
this.bar.crossingBall = true;
}
// if the angle difference is greater than the max difference allowrd
// and we are crossing the ball, it means we missed the bar
if(angleDifference > maxAngleDifference && this.bar.crossingBall){
// and it's game over
this.fail();
}
},
fail: function(){
// stop bar rotation
this.bar.rotationDirection = 0;
// tint bar
this.bar.tint = 0xff0000;
}
}
// this function returns the difference between two angles, in degrees
function angleDifference(a1, a2){
return Math.abs((a1 + 180 - a2) % 360 - 180);
}
We are only one step away from the complete game, with level progression and local storage to keep players continue the game. Meanwhile, download the source code.HTML5 prototype of “Pop the Lock” iOS blockbuster using Phaser – step 2
Read all posts about "Pop the Lock" game
Here we go with the second step of “Pop the Lock” game . In first step we saw the basics of ball placement and bar movement, now it’s time to improve the prototype adding game mechanics.
It’s game over if you stop the bar outside the ball or if the bar completely crosses the ball. To make the game simpler, when we place the ball on a new place, this place must be at least 40 degrees far away from the previous spot.
Try to play:
Click or tap when the bar is over the ball. Otherwise, it’s game over and you must reload the page.
And here we go with the fully commented source code:
