gpt4 book ai didi

Javascript 按键 + setTimeout()

转载 作者:行者123 更新时间:2023-11-28 07:08:36 27 4
gpt4 key购买 nike

我正在用 html 和 javascript 制作游戏。只是为了澄清,这不是重复或任何东西。没有什么可以给我我需要的答案。另外,在解释之前,我想说我对按键监听器没有任何问题,我的游戏知道何时按下按键以及何时释放按键。好的,我有 5 个 Angular 色行走的帧。我有一个 while 循环,基本上表示当按下 D 键或按下右箭头时,然后增加帧以使 Angular 色看起来像是在行走。然后它有一个 setTimeout 函数,暂停 1/10 秒。这应该会让 Angular 色看起来像是在行走。我知道这与 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>

我做错了什么?我知道它HAS是setTimeout,但我已经尝试多次解决这个问题。图像甚至没有改变。

最佳答案

由于您的 manager 函数每秒被调用 30 次,因此您应该使用 if 语句而不是循环每帧检查一次按键:

function manager() {
ground();
if (keys[68] || keys[39]) {
charFrame++;
}
}

此外,您的 manager 函数每帧被调用两次,一次在 update 函数中,一次在 render 函数中。此外,您的 player 函数在 updatemanager 中都会被调用,同样每帧调用两次。您的代码需要进行一些重构才能正常工作,以确保每帧没有调用两次。

关于Javascript 按键 + setTimeout(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31495826/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com