未知错误按右/下箭头按钮时

所有好家伙首先： - ]
我有我的项目的问题 - 在HTML5 Canvas.I游戏不会告诉你，你必须做的事，但是我的运动还有一个未知的问题。未知错误按右/下箭头按钮时

的index.html {

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>StickySquares</title> 
     <script src="scripts/main.js"></script> 
     <style> 
      #gameArea{ 
       background-image: url('images/bkg.jpg'); 
      } 
     </style> 
    </head> 
    <body onload="init();"> 
     <div id="fastimages" hidden="hidden"> 
      <img id="bodyIMG" src="images/body.png" /> 
      <img id="wallIMG" src="images/wall.png" /> 
     </div> 
     <canvas id="gameArea" width="640" height="480"> 
      ERROR... Update your browser! 
     </canvas> 
     <div id="debug"></div> 
    </body> 
</html>

}

main.js {

var myCanvas, keyPressed = true; 
var sprBody, sprWall; 
var map = []; 
var figures = []; 
var debugtxt; 
function unpressKey(){ 
    keyPressed = false; 
} 
function debugText(){ 
    debugtxt = document.getElementById("debug"); 
    var text = ""; 
    for(var y=0;y<15;y+=1){ 
     for(var x=0;x<20;x+=1){ 
      text += map[y][x].toString(); 
     } 
     text += "<br />"; 
    } 
    debugtxt.innerHTML = text; 
} 
function playerUpdate(button){ 
    // 37 - left, 38 - up, 39 - right, 40 - down 
    if(!keyPressed){ 
     for(var y=0;y<15;y+=1){ 
      for(var x=0;x<20;x+=1){ 
       if(map[y][x]==2){ 
        switch(button.keyCode){ 
         case 37: // Left 
          if(map[y][x-1]==0){ 
           map[y][x]=0; 
           map[y][x-1]=2; 
          } 
         break; 
         case 38: // Up 
          if(map[y-1][x]==0){ 
           map[y][x]=0; 
           map[y-1][x]=2; 
          } 
         break; 
         case 39: // Right 
          if(map[y][x+1]==0){ 
           map[y][x]=0; 
           map[y][x+1]=2; 
          } 
         break; 
         case 40: // Down 
          if(map[y+1][x]==0){ 
           map[y][x]=0; 
           map[y+1][x]=2; 
          } 
         break; 
        } 
       } 
      } 
     } 
    } 
    debugText(); 
} 
function draw(){ 
    myCanvas.clearRect(0, 0, 640, 480); 

    for(var y=0;y<15;y+=1){ 
     for(var x=0;x<20;x+=1){ 
      if(map[y][x]==1){ 
       myCanvas.drawImage(sprWall, x*32, y*32); 
      }else{ 
       if(map[y][x]==2 || map[y][x]==3){ 
        myCanvas.drawImage(sprBody, x*32, y*32); 
       } 
      } 
     } 
    } 
} 
function init(){ 
    myCanvas = document.getElementById("gameArea").getContext("2d"); 
    sprBody = document.getElementById("bodyIMG"); 
    sprWall = document.getElementById("wallIMG"); 
    for(var firstIndex=0;firstIndex<15;firstIndex+=1){ 
     map[firstIndex] = []; 
     figures[firstIndex] = []; 
     for(var secondIndex=0;secondIndex<20;secondIndex+=1){ 
      map[firstIndex][secondIndex] = 0; 
      figures[firstIndex][secondIndex] = []; 
     } 
    } 
    for(var x=0;x<20;x+=1){ 
     map[0][x] = 1; 
     map[14][x] = 1; 
    } 
    for(var y=0;y<15;y+=1){ 
     map[y][0] = 1; 
     map[y][19] = 1; 
    } 
    map[2][2] = 3; 
    map[7][9] = 2; 

    window.addEventListener("keyup", playerUpdate, false); 
    window.addEventListener("keydown", unpressKey, false); 

    setInterval(draw, 1000/60); 
}

}

当我测试我的比赛，当我按下权，向下箭头键方块不会随着+1移动，它会移动到右侧墙壁或下降墙...
我在看我的代码，但我不明白为什么广场使这个错误...
有人可以告诉我我做错了什么？ :)

编辑：我使用2D阵列的图：
1 =壁，2 =块可以移动，0 =自由空间（在这里可以移动），3 - 块，你可以移动，但你可以在你靠近时激活它。

来源

2013-03-22 metalwings

这是由于您如何处理按键。现在它只能接受一个，它会覆盖前一个关键字，这就是为什么你现在只能朝一个方向走。我更喜欢这样做。

var keys=[]; 

document.body.addEventListener("keydown", function (e) { 
    keys[e.keyCode] = true; 
}); 
document.body.addEventListener("keyup", function (e) { 
    keys[e.keyCode] = false; 
}); 

function updatePlayer(){ 
    if (keys[38]) { 
     //up 
    } 

    if (keys[40]) { 
     //down 
    } 

    if (keys[39]) { 
     //right 
    } 

    if (keys[37]) { 
     //left 
    } 
}

Live Example Demonstrating This

这样做什么是每次键被按下你同样的指数，因为他们的关键代码为true数组中设置元素的时间。当你停止按下它的设置为false。然后你可以检查你通常处理玩家动作的地方。这使您可以按下无限量的按键。

来源

2013-03-22 21:12:01 Loktar

谢谢！很好的例子btw。 :) – metalwings 2013-03-23 13:38:24

未知错误按右/下箭头按钮时

回答

相关问题