Après : Si on pouvait : Avant :
Après :
, enfermé
dans un entrepot (divisé en cases carrées),
vous vous déplacez de case en case (vers le haut 
, le bas , la gauche
ou la droite 
;
avec les flèches du clavier ou la souris).
, une caisse , ou une zone de rangement pour caisses
(boule jaune) 
.
Après : 
On ne tire pas : Avant :
Si on pouvait : Avant :
: une case vide
: un mur : une caisse
: une caisse rangée : une zone de rangement : le personnage Sokoban (profession : magasinier)
<html> <head> <TITLE>Sokoban Online Boxworld Jeu Gratuit Freeware Game DHTML ( HTML + Javascript ) (C) Michel Buze</TITLE> <META HTTP-EQUIV="Keywords" CONTENT="boxworld,javascript,sokoban,jeu,jeux,game,buze,web"> <META NAME="Keywords" CONTENT="boxworld,javascript,sokoban,jeu,jeux,game,buze,web"> </head> <frameset noresize border="0" rows="0,*,70"> <frame src="level1.htm"> <frame> <frame> <noframes> <body> Désolé, votre navigateur doit supporter les cadres (frames) </body> </noframes> </frameset> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
if (parent.frames[0] == null) { document.location = "sokojs.htm" }
//-->
</script>
<script type="text/javascript">
<!--
var ie4= (navigator.appName == "Microsoft Internet Explorer")?1:0;
var ns4= (navigator.appName=="Netscape")?1:0;
function Nmajevent(evenement)
{
if (evenement.which == 52 || evenement.which == 37) {
Move(eval(manpos) - 1)
} else if (evenement.which == 56 || evenement.which == 38) {
Move(eval(manpos) - 10)
} else if (evenement.which == 54 || evenement.which == 39) {
Move(eval(manpos) + 1)
} else if (evenement.which == 50 || evenement.which == 40) {
Move(eval(manpos) + 10)
}
}
function eventSetup() {
if (ie4){
document.onkeydown = Imajevent;
}
if(ns4){
document.captureEvents( Event.KEYDOWN );
document.onkeydown = Nmajevent;
}
}
eventSetup();
function Imajevent(){
if (window.event.keyCode == 37) {
Move(eval(manpos) - 1)
} else if (window.event.keyCode == 38) {
Move(eval(manpos) - 10)
} else if (window.event.keyCode == 39) {
Move(eval(manpos) + 1)
} else if (window.event.keyCode == 40) {
Move(eval(manpos) + 10)
} else if (window.event.keyCode == 27) {
UndoMove()
}
}
//-->
</script>
</head>
<body bgcolor="black" style="margin:0">
<script type="text/javascript">
<!--
if (document.all) {
top.window.resizeTo(400, 600);
} else if (document.layers || document.getElementById) {
top.window.outerWidth = 350;
top.window.outerHeight = 600;
}
Row = 10
Col = 10
land = 0
floor = 1
wall = 2
boxin = 3
boxout = 4
dest = 5
img0 = new Image(30, 30); img0.src = "0.gif";
img1 = new Image(30, 30); img1.src = "1.gif";
img2 = new Image(30, 30); img2.src = "2.gif";
img3 = new Image(30, 30); img3.src = "3.gif";
img4 = new Image(30, 30); img4.src = "4.gif";
img5 = new Image(30, 30); img5.src = "5.gif";
man9 = new Image(30, 30); man9.src = "6.gif"; // left
man11 = new Image(30, 30); man11.src = "7.gif"; // right
man0 = new Image(30, 30); man0.src = "8.gif"; // up
man20 = new Image(30, 30); man20.src = "9.gif"; // down
level = new Array()
maxLevel = 30
moves = 0
function ReloadLevel() {
manpos = parent.frames[0].document.forms[0].elements[100].value
ua = -1
moves = 0
nbBoxin = 0
for (i = 0 ; i < Row * Col; i++) {
level[i] = parent.frames[0].document.forms[0].elements[i].value
if (level[i] == dest) nbBoxin++;
document.images[i].src = eval("img" + level[i] + ".src")
}
document.images[manpos].src = eval("man20.src")
window.status = "Your moves : 0"
usrc = man20.src
}
function GoLevel(n) {
if (n == nbLevel) ReloadLevel()
parent.frames[0].document.location = "level" + n + ".htm"
}
function UndoMove() {
if (ua != -1) {
document.images[manpos].src = eval("img" + level[manpos] + ".src")
document.images[ua].src = eval("img" + lua + ".src")
document.images[ub].src = eval("img" + lub + ".src")
level[ua] = lua
level[ub] = lub
level[um] = lum
document.images[manpos = um].src = usrc
nbBoxin = unb
window.status = "Your moves : " + --moves
ua = -1
}
}
function Move(a) {
d = a - manpos
if (d == 1 || d == -1 || d == Col || d == -Col) {
if (level[a] == boxin || level[a] == boxout) {
b = a + d
um = manpos
ua = a
ub = b
lum = level[manpos]
lua = level[a]
lub = level[b]
usrc = document.images[manpos].src
unb = nbBoxin
window.status = "Your moves : " + ++moves
if (level[b] == floor || level[b] == dest) {
level[a] == boxin ? (level[a] = dest, nbBoxin++) : level[a] = floor
level[b] == dest ? (level[b] = boxin, nbBoxin--) : level[b] = boxout
document.images[b].src = eval("img" + level[b] + ".src")
}
}
if (level[a] == floor || level[a] == dest) {
document.images[manpos].src = eval("img" + level[manpos] + ".src")
document.images[manpos = a].src = eval("man" + (d + 10) + ".src")
}
if (nbBoxin == 0) {
if (nbLevel < maxLevel) {
alert("You have done a good job !")
parent.frames[0].location = "level" + (++nbLevel) + ".htm"
GoLevel(nbLevel)
} else {
alert("Congratulations !")
GoLevel(1)
}
}
}
}
window.focus()
window.status = ""
document.write("<TABLE cellspacing=\"0\" cellpadding=\"0\" border=0><TR><TD VALIGN=TOP>")
document.write("<TABLE cellspacing=\"0\" cellpadding=\"0\" border=0><TR>")
nbBoxin = 0
for (y = 0 ; y < Row; y++) {
document.write ("<TR>")
for (x = 0; x < Col; x++) {
level[x + Row * y] = parent.frames[0].document.forms[0].elements[x + Row * y].value
if (level[x + Row * y] == dest) nbBoxin++
if (level[x + Row * y] == land || level[x + Row * y] == wall)
document.write("<TD VALIGN=TOP>",
"<IMG align=middle width=\"30\" heigth=\"30\" border=0 src=\"", level[x + Row * y], ".gif\"<\/TD>")
else
document.write("<TD VALIGN=TOP><A HREF=\"JavaScript:Move(", x + Row * y, ")\">",
"<IMG align=middle width=\"30\" heigth=\"30\" border=0 src=\"", level[x + Row * y], ".gif\"</A><\/TD>")
}
document.write("<\/TR>")
}
document.write("<\/TABLE>")
manpos = parent.frames[0].document.forms[0].elements[100].value
nbLevel = parent.frames[0].document.forms[0].elements[101].value
ua = -1
document.write("<TABLE><TD><CENTER>")
document.write("<FORM>",
"<INPUT TYPE=button onClick=\"Javascript:ReloadLevel();\" value=\"Restart\">",
"<INPUT TYPE=button onClick=\"Javascript:UndoMove();\" value=\"Undo\">")
for (i = 1; i <= maxLevel; i++) {
if (i % 16 == 0) document.write("<br>")
document.write("<INPUT TYPE=\"button\" onClick=\"Javascript:GoLevel(", i, ");\" value=\"", i, "\">")
}
document.write("<\/FORM><\/TD><\/TR><\/TABLE><\/TD><\/TR><\/TABLE>")
document.images[manpos].src = eval("man20.src")
//-->
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
if (parent.frames[0] == null) { document.location = "sokojs.htm" }
document.write("<body margin=0 bgcolor=\"black\"><b><FONT FACE=\"Comic Sans MS\"
SIZE=5 COLOR=\"red\">LEVEL ",
parent.frames[0].document.forms[0].elements[101].value, "<\/font><\/b>");
document.write(" <a style=\"color:#eeeeee;font-face:arial;\"
href=\"http://michel.buze.perso.neuf.fr/sokojs.zip\">[zip]<\/a>",
" <a target=\"src\" style=\"color:#eeeeee;font-face:arial;\"
href=\"src.htm\">[info]<\/a>")
//-->
</script>
</head>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title>
</head>
<body>
<form action="">
<script type="text/javascript">
<!--
if (parent.frames[0] == null) { document.location = "sokojs.htm" }
l = new Array(
//123456789
" ", // 0 # = wall
" ### ", // 1 . = dest
" #.# ", // 2 _ = floor
" #_#### ", // 3 * = boxin
" ###$_$.# ", // 4 $ = boxout
" #._$_### ", // 5
" ####$# ", // 6
" #.# ", // 7
" ### ", // 8
" ") // 9
//123456789
for (x = 0; x < 10; x++)
for (y = 0; y < 10; y++)
document.write("<INPUT TYPE=\"button\" value=\"",
' _#*$.'.indexOf(l[x].substring(y, y + 1)), "\">")
document.write("<INPUT TYPE=\"button\" value=\"55\">",
"<INPUT TYPE=\"button\" value=\"1\"><\/FORM>")
parent.frames[1].location = "main.htm"
parent.frames[2].location = "level.htm"
//-->
</script></form>
</body>
</html>