Javascript/HTML5 - 使用 WASD 制作画布动画以在矩形周围移动。无法实现 A 和 W 键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14389864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript/HTML5 - Making a canvas animation using WASD to move around a rectangle. Trouble implementing A and W keys
提问by starscape
I'm making a simple canvas where the user uses WASD to move a rectangle up, left, down, right, respectively. The animation works fine for S and D keys, but when I tried to do the a key it doesn't work, and I'm not sure why. Below is my code.
我正在制作一个简单的画布，用户使用 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);
Is this a problem with decrementing tickX? Any help is appreciated!
这是递减tickX的问题吗？任何帮助表示赞赏！
回答by Charlie Wallace
You are missing some of the case statements that you need. I believe some of your case numbers are also incorrect. Try this runnable snippet:
您缺少一些您需要的 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>