我有一个简单的概念。当玩家按下 W、A、S 或 D 时,画布上的图像会相应移动。但是,这会导致动画非常不稳定,我不确定为什么(尽管我认为这与我的事件侦听器有关)。下面是我的代码。
var playerXPos = 10;
var playerYPos = 10;
var playerImg = new Image();
playerImg.src = "knight.png";
function mainGameLoop(){
window.requestAnimationFrame(mainGameLoop);
c = document.getElementById("gameCanvas").getContext("2d");
c.clearRect(0,0,1000,500);
c.drawImage(playerImg,playerXPos,playerYPos);
}
window.requestAnimationFrame(mainGameLoop);
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);
window.addEventListener("keypress", onKeyPress, false);
function onKeyDown(e){
var keyCode = e.keyCode;
switch(keyCode){
case 87: //w
onKeyW();
break;
case 65: //a
onKeyA();
break;
case 83: //s
onKeyS();
break;
case 68: //d
onKeyD();
break;
}
function onKeyW(){
playerYPos -= 5;
}
function onKeyA(){
playerXPos -= 5;
}
function onKeyS(){
playerYPos += 5;
}
function onKeyD(){
playerXPos += 5;
}
为什么要这样做?任何帮助表示赞赏!
编辑:作为旁注,我在使用布尔值之前已经这样做了(当按下 w 键时,keyW
变量变为真,并且在 mainGameLoop 中有if(keyW == true){playerYPos -= 5;}
)