HTML5 swipe controlled Sokoban game made with Phaser featuring unlimited undos – solving and advancing through levels
Talking about Sokoban game, Game development, HTML5, Javascript and Phaser.
Learn cross platform HTML5 game development
Check my Gumroad page for commented source code, games and books.
CRATE 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.