按下Javascript键+ setTimeout()
提问于 2015-07-18 13:37:13
我正在用html和javascript制作一个游戏。只是为了澄清，这不是重复或任何事情。什么都没有我需要的答案。另外，在我解释之前，我想说我对关键听者没有问题，我的游戏知道什么时候按下一个键，什么时候释放它。好吧，我有5个角色行走的画面。我有一个like循环，基本上是说，当按下D键或按右箭头时，然后增加帧，使之看起来像字符在行走。然后它有一个setTimeout函数，暂停1/10秒钟。这应该会让这个角色看起来像在走路。我知道这与setTimeout()函数有关。下面是while循环：
while (keys[68] || keys[39]) {
charFrame++;
setTimeout(function() {
}, 100);
} 下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sparring Spartans</title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var groundX = 0, groundY = 400;
var playerx = width/2, playery = groundY-120;
var charFrame = 1;
var speed = 4;
var keys = [];
window.addEventListener("keydown", function(e) {
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e) {
delete keys[e.keyCode];
}, false);
var spartan1 = new Image();
spartan1.src = "spartan1.png";
var spartan2 = new Image();
spartan2.src = "spartan2.png";
var spartan3 = new Image();
spartan3.src = "spartan3.png";
var spartan4 = new Image();
spartan4.src = "spartan4.png";
var spartan5 = new Image();
spartan5.src = "spartan5.png";
var stone = new Image();
stone.src = "stone.png";
function game() {
update();
render();
}
function player() {
if (charFrame === 1) {
context.drawImage(spartan1, playerx, playery);
} else if (charFrame === 2) {
context.drawImage(spartan2, playerx, playery);
} else if (charFrame === 3) {
context.drawImage(spartan3, playerx, playery);
} else if (charFrame === 4) {
context.drawImage(spartan4, playerx, playery);
} else if (charFrame === 5) {
context.drawImage(spartan5, playerx, playery);
}
}
function ground() {
for (var i = 0; i <= 1000; i += 55) {
context.drawImage(stone, i, groundY);
}
for (var i = 0; i <= 1000; i += 55) {
context.drawImage(stone, i, groundY+55);
}
for (var i = 0; i <= 1000; i += 55) {
context.drawImage(stone, i, groundY+110);
}
for (var i = 0; i <= 1000; i += 55) {
context.drawImage(stone, i, groundY+165);
}
}
function manager() {
ground();
while (keys[68] || keys[39]) {
charFrame++;
setTimeout(function() {
}, 100);
}
player();
}
function update() {
manager();
player();
}
function render() {
context.fillStyle = "#AFE4FF";
context.fillRect(0, 0, width, height);
manager();
}
setInterval(function() {
game();
}, 1000/30);
</script>
</body>
</html>我做错了什么？我知道让成为setTimeout，但是我已经多次尝试解决这个问题了。图像甚至不会改变。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-18 13:47:07
因为您的manager函数每秒调用30次，所以应该使用if语句而不是循环来检查每帧按键一次：
function manager() {
ground();
if (keys[68] || keys[39]) {
charFrame++;
}
}此外，manager函数每帧调用两次，一次在update函数中，一次在render函数中。另外，您的player函数在update和manager中都被调用，每帧再次调用两次。您的代码需要一些重构才能正常工作，以确保每个帧没有任何调用两次。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31495826
复制相关文章
腾讯云开发者
