Talking about Sokoban game, Game development, HTML5, Javascript and Phaser.
In this new step of the Sokoban series I am showing you how to check if the player solved a level, and how to advance through levels. The concept is very simple: a level is solved when there aren’t crates outside target spots, which means when the level array does not have an item withCRATE value in it.
Have a look at the game:
Swipe to move the player, double click/tap to undo last move. If you have a mobile device, you can play the game at this link.
The first level is ridiculously easy to solve, just to show you how to check for a level to be solved and advance through levels.
This is the source code, with new or modified lines highlighted. I did not highlight each level changed to level[this.currentLevel] not to create a visual mess, but you should keep in mind level was transformed from a two-dimensional array into a three-dimensional array.
var game;
var gameOptions = {
tileSize: 40,
gameWidth: 320,
gameHeight: 320,
gameSpeed: 100
}
var level = [
// level 0
[[1,1,1,1,1,1,1,1],
[1,0,0,1,1,1,1,1],
[1,0,0,1,1,1,1,1],
[1,0,0,0,0,0,0,1],
[1,1,4,2,1,0,0,1],
[1,0,0,3,1,0,0,1],
[1,0,0,0,1,1,1,1],
[1,1,1,1,1,1,1,1]],
// level 1
[[1,1,1,1,1,1,1,1],
[1,0,0,1,1,1,1,1],
[1,0,0,1,1,1,1,1],
[1,0,0,0,0,0,0,1],
[1,1,4,2,1,3,0,1],
[1,0,0,0,1,0,0,1],
[1,0,0,0,1,1,1,1],
[1,1,1,1,1,1,1,1]]
];
var EMPTY = 0;
var WALL = 1;
var SPOT = 2;
var CRATE = 3;
var PLAYER = 4;
window.onload = function() {
game = new Phaser.Game(gameOptions.gameWidth, gameOptions.gameHeight);
game.state.add("PlayGame", playGame);
game.state.start("PlayGame", true, false, 0);
}
var playGame = function(game){}
playGame.prototype = {
init: function(currentLevel){
this.currentLevel = currentLevel;
},
preload: function(){
game.load.spritesheet("tiles", "tiles.png", 40, 40);
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.stage.disableVisibilityChange = true;
},
create: function(){
this.undoArray = [];
this.crates = [];
this.drawLevel();
game.input.onTap.add(this.handleTap, this);
game.input.onDown.add(this.beginSwipe, this);
},
drawLevel: function(){
this.staticAssetsGroup = game.add.group();
this.movingAssetsGroup = game.add.group();
this.crates.length = 0;
for(var i = 0; i < level[this.currentLevel].length; i++){
this.crates[i] = [];
for(var j = 0; j < level[this.currentLevel][i].length; j++){
this.crates[i][j] = null;
switch(level[this.currentLevel][i][j]){
case PLAYER:
case PLAYER + SPOT:
this.player = game.add.sprite(gameOptions.tileSize * j, gameOptions.tileSize * i, "tiles");
this.player.frame = level[this.currentLevel][i][j];
this.player.posX = j;
this.player.posY = i;
this.movingAssetsGroup.add(this.player);
var tile = game.add.sprite(gameOptions.tileSize * j, gameOptions.tileSize * i, "tiles");
tile.frame = level[this.currentLevel][i][j] - PLAYER;
this.staticAssetsGroup.add(tile);
break;
case CRATE:
case CRATE + SPOT:
this.crates[i][j] = game.add.sprite(gameOptions.tileSize * j, gameOptions.tileSize * i, "tiles");
this.crates[i][j].frame = level[this.currentLevel][i][j];
this.movingAssetsGroup.add(this.crates[i][j]);
var tile = game.add.sprite(gameOptions.tileSize * j, gameOptions.tileSize * i, "tiles");
tile.frame = level[this.currentLevel][i][j] - CRATE;
this.staticAssetsGroup.add(tile);
break;
default:
var tile = game.add.sprite(gameOptions.tileSize * j, gameOptions.tileSize * i, "tiles");
tile.frame = level[this.currentLevel][i][j];
this.staticAssetsGroup.add(tile);
}
}
}
},
handleTap: function(pointer, doubleTap){
if(doubleTap){
if(this.undoArray.length>0){
var undoLevel = this.undoArray.pop();
this.staticAssetsGroup.destroy();
this.movingAssetsGroup.destroy();
level[this.currentLevel] = [];
level[this.currentLevel] = this.copyArray(undoLevel);
this.drawLevel();
}
}
},
beginSwipe: function(e) {
game.input.onDown.remove(this.beginSwipe, this);
game.input.onUp.add(this.endSwipe, this);
},
endSwipe: function(e) {
game.input.onUp.remove(this.endSwipe, this);
var swipeTime = e.timeUp - e.timeDown;
var swipeDistance = Phaser.Point.subtract(e.position, e.positionDown);
var swipeMagnitude = swipeDistance.getMagnitude();
var swipeNormal = Phaser.Point.normalize(swipeDistance);
if(swipeMagnitude > 20 && swipeTime < 1000 && (Math.abs(swipeNormal.y) > 0.8 || Math.abs(swipeNormal.x) > 0.8)) {
if(swipeNormal.x > 0.8) {
this.checkMove(1, 0);
}
if(swipeNormal.x < -0.8) {
this.checkMove(-1, 0);
}
if(swipeNormal.y > 0.8) {
this.checkMove(0, 1);
}
if(swipeNormal.y < -0.8) {
this.checkMove(0, -1);
}
} else {
game.input.onDown.add(this.beginSwipe, this);
}
},
checkMove: function(deltaX, deltaY){
if(this.isWalkable(this.player.posX + deltaX, this.player.posY + deltaY)){
this.undoArray.push(this.copyArray(level[this.currentLevel]));
this.movePlayer(deltaX, deltaY);
return;
}
if(this.isCrate(this.player.posX + deltaX, this.player.posY + deltaY)){
if(this.isWalkable(this.player.posX + 2 * deltaX, this.player.posY + 2 * deltaY)){
this.undoArray.push(this.copyArray(level[this.currentLevel]));
this.moveCrate(deltaX, deltaY);
this.movePlayer(deltaX, deltaY);
return;
}
}
game.input.onDown.add(this.beginSwipe, this);
},
isWalkable: function(posX, posY){
return level[this.currentLevel][posY][posX] == EMPTY || level[this.currentLevel][posY][posX] == SPOT;
},
isCrate: function(posX, posY){
return level[this.currentLevel][posY][posX] == CRATE || level[this.currentLevel][posY][posX] == CRATE + SPOT;
},
movePlayer: function(deltaX, deltaY){
var playerTween =game.add.tween(this.player);
playerTween.to({
x: this.player.x + deltaX * gameOptions.tileSize,
y: this.player.y + deltaY * gameOptions.tileSize
}, gameOptions.gameSpeed, Phaser.Easing.Linear.None, true);
playerTween.onComplete.add(function(){
game.input.onDown.add(this.beginSwipe, this);
this.player.frame = level[this.currentLevel][this.player.posY][this.player.posX];
if(this.isLevelSolved()){
this.currentLevel++;
this.game.state.start("PlayGame", true, false, this.currentLevel);
}
}, this);
level[this.currentLevel][this.player.posY][this.player.posX] -= PLAYER;
this.player.posX += deltaX;
this.player.posY += deltaY;
level[this.currentLevel][this.player.posY][this.player.posX] += PLAYER;
},
moveCrate: function(deltaX, deltaY){
var crateTween = game.add.tween(this.crates[this.player.posY + deltaY][this.player.posX + deltaX]);
crateTween.to({
x: this.crates[this.player.posY + deltaY][this.player.posX + deltaX].x + deltaX * gameOptions.tileSize,
y: this.crates[this.player.posY + deltaY][this.player.posX + deltaX].y + deltaY * gameOptions.tileSize,
}, gameOptions.gameSpeed, Phaser.Easing.Linear.None, true);
crateTween.onComplete.add(function(){
this.crates[this.player.posY + deltaY][this.player.posX + deltaX].frame = level[this.currentLevel][this.player.posY + deltaY][this.player.posX + deltaX];
}, this);
this.crates[this.player.posY + 2 * deltaY][this.player.posX + 2 * deltaX] = this.crates[this.player.posY + deltaY][this.player.posX + deltaX];
this.crates[this.player.posY + deltaY][this.player.posX + deltaX] = null;
level[this.currentLevel][this.player.posY + deltaY][this.player.posX + deltaX] -= CRATE;
level[this.currentLevel][this.player.posY + 2 * deltaY][this.player.posX + 2 * deltaX] += CRATE;
},
isLevelSolved: function(){
for(var i = 0; i < level[this.currentLevel].length; i++){
for(var j = 0; j < level[this.currentLevel][i].length; j++){
if(level[this.currentLevel][i][j] == CRATE){
return false;
}
}
}
return true;
},
copyArray: function(a){
var newArray = a.slice(0);
for(var i = newArray.length; i > 0; i--){
if(newArray[i] instanceof Array){
newArray[i] = this.copyArray(newArray[i]);
}
}
return newArray;
}
}
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.