Javascript/HTML5 - 使用 WASD 制作画布动画以围绕矩形移动。无法实现 A 和 W 键答案

【问题标题】：Javascript/HTML5 - Making a canvas animation using WASD to move around a rectangle. Trouble implementing A and W keysJavascript/HTML5 - 使用 WASD 制作画布动画以围绕矩形移动。无法实现 A 和 W 键
【发布时间】：2013-01-01 15:05:14
【问题描述】：

我正在制作一个简单的画布，用户使用 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的问题吗？任何帮助表示赞赏！

【问题讨论】：

你只是在实现 dsa 而不是 w
A 是 65 而不是 63。asquare.net/javascript/tests/KeyCode.html

标签： javascript html5-canvas dom-events

【解决方案1】：

您缺少一些您需要的案例陈述。我相信您的某些案例编号也不正确。试试这个可运行的 sn-p：

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

【讨论】：