Javascript / HTML5 - 使用WASD制作画布动画来移动矩形。无法实现A和W键 [英] Javascript/HTML5 - Making a canvas animation using WASD to move around a rectangle. Trouble implementing A and W keys
本文介绍了Javascript / HTML5 - 使用WASD制作画布动画来移动矩形。无法实现A和W键的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在制作一个简单的画布，用户使用WASD分别向上，向左，向下，向右移动一个矩形。动画适用于S和D键，但是当我尝试按键时它不起作用，我不知道为什么。下面是我的代码。
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.
//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的问题吗？任何帮助表示赞赏！
Is this a problem with decrementing tickX? Any help is appreciated!
推荐答案
您缺少一些您需要的案例陈述。我相信你的一些案例编号也是不正确的。试试这个runnable片段：
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:
(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键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
