未知錯誤按右/下箭頭按鈕時

所有好傢伙首先： - ]
我有我的項目的問題 - 在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

未知錯誤按右/下箭頭按鈕時

回答

相關問題