HTML5推箱子机理实现

来源：互联网发布：达观数据公司简介编辑：程序博客网时间：2024/06/06 14:03

<!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>
    
    <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>

0 0