Talking about Perfect Square! game, Game development, HTML5, Javascript and Phaser.
Did you play Perfect Square! by Boombit? Fit the square onto the platform so that it’s aligned perfectly. Touch it to grow and release to let it fall! It may sound simple, but this one touch game will take super precision and timing to master it! Although it may seem a physics game, I can show you it can be made only with tweens, thanks to Phaser. Let’s have a look at the prototype I made: Press and hold to make the square grow, release to drop it. As you can see all the cute animations you can see in original game have been featured. I am showing you the source code, still uncommented but a step by step explaination will follow later this week
var game;
var bgColors = [0x62bd18, 0xff5300, 0xd21034, 0xff475c, 0x8f16b2, 0x588c7e, 0x8c4646];
var holeWidthRange = [40, 280];
var wallRange = [10, 70];
window.onload = function() {
game = new Phaser.Game(480, 640, Phaser.AUTO, "");
game.state.add("PlayGame", playGame);
game.state.start("PlayGame");
}
var playGame = function(game){};
playGame.prototype = {
preload: function(){
game.load.image("base", "base.png");
game.load.image("square", "square.png");
game.load.image("top", "top.png");
},
create: function(){
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
var tintColor = bgColors[game.rnd.between(0, bgColors.length - 1)];
game.stage.backgroundColor = tintColor;
this.leftSquare = game.add.sprite(0, game.height, "base");
this.leftSquare.anchor.set(1, 1);
this.rightSquare = game.add.sprite(game.width, game.height, "base");
this.rightSquare.anchor.set(0, 1);
this.leftWall = game.add.sprite(0, game.height - this.leftSquare.height, "top");
this.leftWall.anchor.set(1, 1);
this.rightWall = game.add.sprite(game.width, game.height - this.rightSquare.height, "top");
this.rightWall.anchor.set(0, 1);
this.square = game.add.sprite(game.width / 2, - 400, "square");
this.square.anchor.set(0.5);
this.square.scale.setTo(0.2, 0.2);
this.updateLevel();
},
updateLevel: function(){
var holeWidth = game.rnd.between(holeWidthRange[0], holeWidthRange[1]);
var wallWidth = game.rnd.between(wallRange[0], wallRange[1]);
var leftSquareTween = game.add.tween(this.leftSquare).to({
x: (game.width - holeWidth) / 2
}, 500, Phaser.Easing.Cubic.Out, true);
var rightSquareTween = game.add.tween(this.rightSquare).to({
x: (game.width + holeWidth) / 2
}, 500, Phaser.Easing.Cubic.Out, true);
var leftWalltween = game.add.tween(this.leftWall).to({
x: (game.width - holeWidth) / 2 - wallWidth
}, 500, Phaser.Easing.Cubic.Out, true);
var rightWallTween = game.add.tween(this.rightWall).to({
x: (game.width + holeWidth) / 2 + wallWidth
}, 500, Phaser.Easing.Cubic.Out, true);
var squareTween = game.add.tween(this.square).to({
y: 150,
angle: 50
}, 1000, Phaser.Easing.Cubic.Out, true);
squareTween.onComplete.add(function(){
game.input.onDown.add(this.grow, this);
this.rotateTween = game.add.tween(this.square).to({
angle: 40
}, 300, Phaser.Easing.Linear.None, true, 0, -1, true)
}, this)
},
grow: function(){
game.input.onDown.remove(this.grow, this);
game.input.onUp.add(this.stop, this);
this.growTween = game.add.tween(this.square.scale).to({
x: 1,
y: 1
}, 1500, Phaser.Easing.Linear.None, true);
},
stop: function(){
game.time.events.add(Phaser.Timer.SECOND * 2, function(){
game.state.start("PlayGame");
}, this);
game.input.onUp.remove(this.stop, this);
this.growTween.stop();
this.rotateTween.stop();
this.rotateTween = game.add.tween(this.square).to({
angle: 0
}, 300, Phaser.Easing.Cubic.Out, true);
if(this.square.width <= this.rightSquare.x - this.leftSquare.x){
this.rotateTween.onComplete.add(function(){
this.fallTween = game.add.tween(this.square).to({
y: game.height + this.square.height
}, 600, Phaser.Easing.Cubic.Out, true);
}, this);
}
else{
this.square.anchor.set(0.5, 1);
if(this.square.width <= this.rightWall.x - this.leftWall.x){
var destY = game.height - this.leftSquare.height;
}
else{
var destY = game.height - this.leftSquare.height - this.leftWall.height;
}
game.add.tween(this.square).to({
y: game.height - this.leftSquare.height
}, 600, Phaser.Easing.Bounce.Out, true);
}
}
}
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.