Creation of a Sokoban game with jQuery

June 14, 2010 • Game design, Javascript by Emanuele Feronato • 9 Comments

When I said there are games you must be able to make in less than a day, obviously I meant in any language.

This is the jQuery version of the Sokoban game I made in less than 2Kb.

Or, more precisely, it’s the javascript version, powered by jQuery.

You should know the rules… click in the iframe and play using WASD keys.

Let’s take look at the script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title>jQuery Sokoban by Emanuele Feronato</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript">
     $(document).ready(function() {
     	var map = new Array();
     	map[0] = new Array(1,1,1,1);
     	map[1] = new Array(1,0,0,1,1,1,1,1);
     	map[2] = new Array(1,0,2,0,0,3,0,1);
     	map[3] = new Array(1,0,3,0,0,2,4,1);
     	map[4] = new Array(1,1,1,0,0,1,1,1);
     	map[5] = new Array(0,0,1,1,1,1);
     	for(i=0;i<map.length;i++){
     		for(j=0;j<map[i].length;j++){
     			switch(map[i][j]){
     				case 1:
     					$("#sokoban").append('<div class = "wall" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 2:
     					$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 3:
     					$("#sokoban").append('<div id = "c'+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 4:
     					map[i][j]=0;
     					var player_pos = new Array(i,j);
     					$("#sokoban").append('<div id ="player" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 5:
     					$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					$("#sokoban").append('<div id = "c'+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     				case 6:
     					map[i][j]=2;
     					var player_pos = new Array(i,j);
     					$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');
     					$("#sokoban").append('<div id ="player" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');
     					break;
     			}
     		}
     	}
     	function possible_move(x,y){
     		var tile = map[player_pos[0]+y][player_pos[1]+x]
     		var far_tile = map[player_pos[0]+2*y][player_pos[1]+2*x]
     		var can_move = false;
     		var solved = true;
     		if(tile==0 || tile==2){
                    can_move = true;
                    solved = false;
               }
               else{
                    if((tile==3 || tile==5) && (far_tile==0 || far_tile==2)){
                         map[player_pos[0]+y][player_pos[1]+x]-=3;
                         map[player_pos[0]+2*y][player_pos[1]+2*x]+=3;
                         $("#c"+(player_pos[0]+y)+"_"+(player_pos[1]+x)).animate({
                              left: "+="+(x*32),
                              top: "+="+(y*32)
                         },100,function(){
                              for(i=0;i<map.length;i++){
                                   for(j=0;j<map[i].length;j++){
                                        if(map[i][j]==2){
                                             solved = false;
                                             break;
                                        }
                                   }
                              }
                              if(solved){
                                   alert("SOLVED")
                              }
                         }).attr("id","c"+(player_pos[0]+2*y)+"_"+(player_pos[1]+2*x))
                         can_move = true;
                    }
               }	
               if(can_move){
                    player_pos[0]+=y;
                    player_pos[1]+=x;
     			$("#player").animate({
     				left: "+="+(x*32),
                         top: "+="+(y*32)
     			},100);  
               }
     	}
     	$(document).keydown(function(event) {
     		switch(event.keyCode){
     			case 65:
     				possible_move(-1,0)
     				break;
     			case 87:
     				possible_move(0,-1)
     				break;
     			case 68:
     				possible_move(1,0)
     				break;
     			case 83:
     				possible_move(0,1)
     				break;
     		}
        	});
     });
     </script>
     <style type="text/css">
     .wall{
     	background-color:#000000;
     	width:32px;
     	height:32px;
     	position:absolute;
     }
     
     .goal{
     	background-color:#ff0000;
     	width:32px;
     	height:32px;
     	position:absolute;	
     }
     
     .crate{
     	border:10px solid #00ff00;
     	width:12px;
     	height:12px;
     	position:absolute;	
     }
     
     #player{
     	border:10px solid #0000ff;
     	width:12px;
     	height:12px;
     	position:absolute;	
     }
     </style>
</head>
<body>
     <div id = "sokoban"></div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>jQuery Sokoban by Emanuele Feronato</title>

$(document).ready(function() {

var map = new Array();

map[0] = new Array(1,1,1,1);

map[1] = new Array(1,0,0,1,1,1,1,1);

map[2] = new Array(1,0,2,0,0,3,0,1);

map[3] = new Array(1,0,3,0,0,2,4,1);

map[4] = new Array(1,1,1,0,0,1,1,1);

map[5] = new Array(0,0,1,1,1,1);

for(i=0;i<map.length;i++){

for(j=0;j<map[i].length;j++){

switch(map[i][j]){

case 1:

$("#sokoban").append('<div class = "wall" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');

break;

case 2:

$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');

break;

case 3:

$("#sokoban").append('<div id = "c'+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');

break;

case 4:

map[i][j]=0;

var player_pos = new Array(i,j);

$("#sokoban").append('<div id ="player" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');

break;

case 5:

$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');

$("#sokoban").append('<div id = "c'+i+'_'+j+'" class = "crate" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');

break;

case 6:

map[i][j]=2;

var player_pos = new Array(i,j);

$("#sokoban").append('<div class = "goal" style = "top:'+i*32+'px;left:'+j*32+'px"></div>');

$("#sokoban").append('<div id ="player" style = "z-index:1000;top:'+i*32+'px;left:'+j*32+'px"></div>');

break;

}

function possible_move(x,y){

var tile = map[player_pos[0]+y][player_pos[1]+x]

var far_tile = map[player_pos[0]+2*y][player_pos[1]+2*x]

var can_move = false;

var solved = true;

if(tile==0 || tile==2){

can_move = true;

solved = false;

}

else{

if((tile==3 || tile==5) && (far_tile==0 || far_tile==2)){

map[player_pos[0]+y][player_pos[1]+x]-=3;

map[player_pos[0]+2*y][player_pos[1]+2*x]+=3;

$("#c"+(player_pos[0]+y)+"_"+(player_pos[1]+x)).animate({

left: "+="+(x*32),

top: "+="+(y*32)

},100,function(){

for(i=0;i<map.length;i++){

for(j=0;j<map[i].length;j++){

if(map[i][j]==2){

solved = false;

break;

}

if(solved){

alert("SOLVED")

}

}).attr("id","c"+(player_pos[0]+2*y)+"_"+(player_pos[1]+2*x))

can_move = true;

}

if(can_move){

player_pos[0]+=y;

player_pos[1]+=x;

$("#player").animate({

left: "+="+(x*32),

top: "+="+(y*32)

},100);

}

$(document).keydown(function(event) {

switch(event.keyCode){

case 65:

possible_move(-1,0)

break;

case 87:

possible_move(0,-1)

break;

case 68:

possible_move(1,0)

break;

case 83:

possible_move(0,1)

break;

}

});

</script>

.wall{

background-color:#000000;

width:32px;

height:32px;

position:absolute;

}

.goal{

background-color:#ff0000;

width:32px;

height:32px;

position:absolute;

}

.crate{

border:10px solid #00ff00;

width:12px;

height:12px;

position:absolute;

}

#player{

border:10px solid #0000ff;

width:12px;

height:12px;

position:absolute;

}

</style>

</head>

<body>

</body>

</html>

Line 7: loading jQuery

Line 9: function to be executed when the document is ready

Lines 10-16: map initialization. Unfortunately javascript does not support multi-dimensional array creation on the fly…

Lines 17-46: drawing the map. As you can see, all map elements are divs of different classes placed according to their position in the map. Movig objects, such as the player and the crates, are stylized with an high z-index to always stay on top of the map. Various objects are mapped this way:

0: empty tile
1: wall
2: place where to drop a crate
3: crate – crate divs are created with an unique id to indentify them when it’s time to be pushed by the player
4: player
5: crate on a place where to drop a crate (3+2)
6: player on a place where to drop a crate (4+2)

Lines 47-87: Core function… checks for a possible move, eventually moves player and crates and sees if the game is solved.

A game is solved where there are not places where to drop a crate without a crate on them. That is, there isn’t any 2 in the map.

Every time I move a crate, I change its id according to its new position.

Lines 88-103: Checking for key presses.

Hope you enjoy it.

Rate this post: 1 Star

(8 votes, average: 4.38 out of 5)

Loading ...

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 9 comments

Jason L.

on June 14, 2010 at 8:47 pm

Pretty cool! And just a heads up, Google Chrome threw a “malicious site” warning. I wasn’t able to get the source that threw it, but watch out.
Emanuele Feronato

on June 14, 2010 at 10:43 pm

Thank you! Removed!!!
majenn

on March 5, 2011 at 8:25 am

r u really the creator of sokoban game?
im playing STAND ALONE VERSION just now i discover this game and it is really cool.
Creation Of A Skoban Game With jQuery | jQuery Wisdom

on March 31, 2011 at 6:34 pm

[...] Web Site Demo Download Share and Enjoy: [...]
art gabriel

on May 21, 2011 at 2:34 am

:) very nice…
10 Cool jQuery Developed Games | Code to Preload

on October 11, 2011 at 5:59 am

[...] A Skoban gam completely made using jQuery. This is based on my previous Skoban game which was made using Flash. Source [...]
Alex

on May 4, 2012 at 2:45 pm

R button should be for restart:)
Vincent

on April 10, 2013 at 5:20 am

I’m wondering if I can use your jquery code for myself. I have already used it and tweaked it up a bit containing a total of 10 levels of my own. I would like to have your permission to use your code before I go any farther.
Emanuele Feronato

on April 10, 2013 at 3:11 pm

sure, use it as you want

Emanuele Feronato

italian geek and PROgrammer

Creation of a Sokoban game with jQuery

This post has 9 comments

Jason L.

Emanuele Feronato

majenn

Creation Of A Skoban Game With jQuery | jQuery Wisdom

art gabriel

10 Cool jQuery Developed Games | Code to Preload

Alex

Vincent

Emanuele Feronato