Javascript/HTML5 - 使用 WASD 制作畫布動畫以在矩形周圍移動。無法實現 A 和 W 鍵

Question

我正在制作一個簡單的畫布，用戶使用 WASD 分別向上、向左、向下、向右移動矩形。 動畫適用於 S 和 D 鍵，但是當我嘗試執行 a 鍵時它不起作用，我不知道為什么。 下面是我的代碼。

//event listener
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);

function onKeyDown(event){
  var keyCode = event.keyCode;
  switch(keyCode){
    case 68:  //d
        keyD = true;
    break;
    case 83:  //s
        keyS = true;
    break;
    case 63:  //a
        keyA = true;
    break;
  }
}
function onKeyUp(event){
  var keyCode = event.keyCode;
  switch(keyCode){
    case 68:  //d
        keyD = false;
    break;
    case 83:  //s
        keyS = false;
    break;
    case 63: //a
        keyA = false;
    break;
  }
}

//neccessary variables
var tickX = 10;
var tickY = 10;

var keyW = false;
var keyA = false;
var keyS = false;
var keyD = false;

//main animation function
function drawStuff(){
window.requestAnimationFrame(drawStuff);
var canvas = document.getElementById("myCanvas");
var c = canvas.getContext("2d");

c.clearRect(0,0,500,500);
c.fillStyle = "blue";
c.fillRect(tickX,tickY,100,100);

if(keyD == true){
    tickX+=5;
}
if(keyS == true){
    tickY+=5;
}
if(keyA == true){
    tickX--;
}
  }
  window.requestAnimationFrame(drawStuff);

這是遞減tickX的問題嗎？ 任何幫助表示贊賞！

Answer 1

您缺少一些您需要的 case 語句。 我相信您的一些案例編號也是不正確的。 試試這個可運行的片段：

 (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); //event listener window.addEventListener("keydown", onKeyDown, false); window.addEventListener("keyup", onKeyUp, false); function onKeyDown(event) { var keyCode = event.keyCode; switch (keyCode) { case 68: //d keyD = true; break; case 83: //s keyS = true; break; case 65: //a keyA = true; break; case 87: //w keyW = true; break; } } function onKeyUp(event) { var keyCode = event.keyCode; switch (keyCode) { case 68: //d keyD = false; break; case 83: //s keyS = false; break; case 65: //a keyA = false; break; case 87: //w keyW = false; break; } } //neccessary variables var tickX = 10; var tickY = 10; var keyW = false; var keyA = false; var keyS = false; var keyD = false; //main animation function function drawStuff() { window.requestAnimationFrame(drawStuff); var canvas = document.getElementById("myCanvas"); var c = canvas.getContext("2d"); c.clearRect(0, 0, 800, 800); c.fillStyle = "blue"; c.fillRect(tickX, tickY, 100, 100); if (keyD == true) { tickX += 1; } if (keyS == true) { tickY += 1; } if (keyA == true) { tickX--; } if (keyW == true) { tickY--; } } window.requestAnimationFrame(drawStuff);

 <!DOCTYPE html> <html> <head></head> <body> <canvas id="myCanvas" width='800' height='800'></canvas> </body> </html>

Javascript/HTML5 - 使用 WASD 制作畫布動畫以在矩形周圍移動。無法實現 A 和 W 鍵

問題描述

1 個解決方案

解決方案1
6 已采納 2013-01-17 23:33:55

Javascript/HTML5 - 使用 WASD 制作畫布動畫以在矩形周圍移動。 無法實現 A 和 W 鍵

問題描述

1 個解決方案

解決方案1 6 已采納 2013-01-17 23:33:55

Javascript/HTML5 - 使用 WASD 制作畫布動畫以在矩形周圍移動。無法實現 A 和 W 鍵

解決方案1
6 已采納 2013-01-17 23:33:55