<!DOCTYPE><html>
<head>
<title></title>
</head>
<body>
<canvas id="maps" width="550" height="550">Sorry Your explorer cannot use HTML5</canvas>
<button id="restart" onClick="reset()">Restart</button>
<div id="score" align="center"></div>
<!-- canvas initiate OK! -->
<script>
function reset(){
window.location.reload();
}
</script>
<script>
var x;
var y;
var myx=6;
var myy=6;
var des=[[1,5],[6,1],[9,6],[5,9]];
var scores=0;
var myscore=document.getElementById("score");
var matrix=[[1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,0,1,1,1,1,1],
[1,1,1,1,1,0,1,1,1,1,1],
[1,1,1,1,1,0,1,1,1,1,1],
[1,1,1,1,1,0,1,1,1,1,1],
[1,1,1,1,1,3,0,3,0,0,1],
[1,0,0,0,0,3,0,1,1,1,1],
[1,1,1,1,1,1,3,1,1,1,1],
[1,1,1,1,1,1,0,1,1,1,1],
[1,1,1,1,1,1,0,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1]
];
canvas=document.getElementById("maps").getContext('2d');
function Draw()
{
/*
0:空地
1:墙
2:人
3:箱子
-1:目的地
*/
for(x=0;x<11;x++)
for(y=0;y<11;y++)
{
switch(matrix[x][y])
{
case 0:
{
canvas.fillStyle='#00FF00';
canvas.fillRect(x*50,y*50,50,50);
break;
}
case 1:
{
canvas.fillStyle='#0000FF';
canvas.fillRect(x*50,y*50,50,50);
break;
}
case 2:
{
canvas.fillStyle='#00006D';
canvas.fillRect(x*50,y*50,50,50);
break;
}
case 3:
{
canvas.fillStyle='#FF0000';
canvas.fillRect(x*50,y*50,50,50);
break;
}
case -1:
{
canvas.fillStyle='#030303';
canvas.fillRect(x*50,y*50,50,50);
break;
}
}
}
}
function keyDown() {
scores+=1;
var value= event.keyCode
var key = String.fromCharCode(event.keyCode)
switch(value){
case 37:if(matrix[myx-1][myy]!=1)
if(matrix[myx-1][myy]!=3)
{matrix[myx][myy]=0;myx-=1;matrix[myx][myy]=2;}
else
if(matrix[myx-2][myy]!=1)
{matrix[myx][myy]=0;myx-=1;matrix[myx][myy]=2;matrix[myx-1][myy]=3;}
break;
case 38:if(matrix[myx][myy-1]!=1)
if(matrix[myx][myy-1]!=3)
{matrix[myx][myy]=0;myy-=1;matrix[myx][myy]=2;}
else
if(matrix[myx][myy-2]!=1)
{matrix[myx][myy]=0;myy-=1;matrix[myx][myy]=2;matrix[myx][myy-1]=3;}
break;
case 39:if(matrix[myx+1][myy]!=1)
if(matrix[myx+1][myy]!=3)
{matrix[myx][myy]=0;myx+=1;matrix[myx][myy]=2;}
else
if(matrix[myx+2][myy]!=1)
{matrix[myx][myy]=0;myx+=1;matrix[myx][myy]=2;matrix[myx+1][myy]=3;}
break;
case 40:if(matrix[myx][myy+1]!=1)
if(matrix[myx][myy+1]!=3)
{matrix[myx][myy]=0;myy+=1;matrix[myx][myy]=2;}
else
if(matrix[myx][myy+2]!=1)
{matrix[myx][myy]=0;myy+=1;matrix[myx][myy]=2;matrix[myx][myy+1]=3;}
break;
}
for(x=0;x<4;x++)if(matrix[des[x][0]][des[x][1]]!=3&&matrix[des[x][0]][des[x][1]]!=2)matrix[des[x][0]][des[x][1]]=-1;
Draw();
myscore.innerHTML="<h1><b>Havs Press: "+scores+" Times</b></h1>";
for(x=0;x<4;x++)
if(matrix[des[x][0]][des[x][1]]!=3)
return;
alert("You Win!");
}
for(x=0;x<4;x++)if(matrix[des[x][0]][des[x][1]]!=3&&matrix[des[x][0]][des[x][1]]!=2)matrix[des[x][0]][des[x][1]]=-1;
matrix[myx][myy]=2;
myscore.innerHTML="<h1><b>Havs Press: "+scores+" Times</b></h1>";
Draw();
document.onkeydown = keyDown
</script>
</body>
</html>