Menu
So i’ve created a Sokoban game ([url]http://en.wikipedia.org/wiki/Sokoban
Btw, the image files are located in a folder on my desktop labeled A-3 (I think this might be where i am going wrong, with the pathways..)
The part of the code of interest should be the initialize function and the draw_background function…
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Sokoban</title>
<style type=”text/css”>
body
{
font-family: Arial;
font-size: 48px;
}
#warehouse
{
width: 680px;
height: 400px;
position: relative;
}
.box
{
background-image: url(“man.png”);
background-size: contain;
}
.box, #man
{
margin: 0;
padding: 0;
display: inline-block;
width: 40px;
height: 40px;
float: left;
}
</style>
<script type=”text/javascript”>
var map_width = 17;
var map_height = 10;
var grid;
var player_x;
var player_y;
var tile;
function initialize()
{
grid = new Array();
grid[0] = new Array(0,0,0,0,0,5,5,5,5,5);
grid[1] = new Array(0,0,0,0,0,5,2,5,2,5);
grid[2] = new Array(0,0,0,0,0,5,2,2,2,5);
grid[3] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[4] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[5] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[6] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[7] = new Array(0,0,0,0,0,5,5,1,5,5);
grid[8] = new Array(5,5,5,5,5,5,5,1,5,0);
grid[9] = new Array(5,1,1,1,5,1,1,1,5,0);
grid[10] = new Array(5,1,3,1,1,1,3,1,5,0);
grid[11] = new Array(5,1,5,1,1,1,3,1,5,0);
grid[12] = new Array(5,1,1,1,3,5,3,1,5,0);
grid[13] = new Array(5,1,1,1,1,1,1,1,5,0);
grid[14] = new Array(5,1,5,5,5,5,1,1,5,0);
grid[15] = new Array(5,5,5,0,0,5,1,1,5,0);
grid[16] = new Array(0,0,0,0,0,5,5,5,5,0);
player_x = 14;
player_y = 1;
tile = new Array(
‘grass.png’, /* grass */
‘floor.png’, /* interior floor */
‘target.png’, /* target */
‘crate.png’, /* crate */
‘crate.png’, /* crate sitting on target */
‘brick.png’ /* brick */
);
draw_background();
position_man();
}
function draw_background()
{
for (var y = 0; y < map_height; ++y)
{
for (var x = 0; x < map_width; ++x)
{
var box = document.getElementById(‘box_’ + x + ‘_’ + y);
box.style.backgroundImage = “url(/A-3/” +tile[grid[x][y]]+ “)”;
}
}
}
function position_man()
{
var man = document.getElementById(‘man’);
man.style.position = ‘absolute’;
man.style.left = 40 * player_x + ‘px’;
man.style.top = 40 * player_y + ‘px’;
}
function safe_check(x, y)
{
if (x >= 0 && x < map_width && y >= 0 && y < map_height)
return grid[x][y];
return -1;
}
function handle_key(e)
{
var move_x = 0;
var move_y = 0;
switch(String.fromCharCode(e.which).toLowerCase())
{
case ‘w’:
move_y = -1;
break;
case ‘a’:
move_x = -1;
break;
case ‘s’:
move_y = 1;
break;
case ‘d’:
move_x = 1;
break;
default:
return false;
}
var s = safe_check(player_x + move_x, player_y + move_y);
if (s > 2)
{
return true;
}
player_x += move_x;
player_y += move_y;
position_man();
return true;
}
</script>
</head>
<body onkeypress=”handle_key(event)”>
<div id=”warehouse”>
<img src=”man.png” id=”man” />
</div>
<table>
<tr>
<th>up</th>
<th>left</th>
<th>down</th>
<th>right</th>
</tr>
<tr>
<th>W</th>
<th>A</th>
<th>S</th>
<th>D</th>
</tr>
</table>
<script type=”text/javascript”>
var warehouse = document.getElementById(‘warehouse’);
for (var y = 0; y < map_height; ++y)
{
for (var x = 0; x < map_width; ++x)
{
var box = document.createElement(‘div’);
box.id = “box_” + x + “_” + y;
box.className = “box”;
warehouse.appendChild(box);
}
}
initialize();
</script>
</body>
</html>