我是 javascript 和一般编程的新手，所以不要以为我知道很多。
我正在创建一个简单的 html5 javascript 游戏，其中高速公路上的车辆正朝您驶来（由画布矩形表示）。我现在正在创建车辆产卵和运动。我的目标是让车辆产生并在它们之间保持恒定的空间下降，无论它们以何种速度行驶。
除了发生任何滞后以及速度变量设置为数字四及以下时，我所拥有的工作。我做了一些研究，我相信这是因为setTimeout没有考虑滞后。由于我是新手，我不知道很多功能，我不知道如何解决这个问题，也无法在网上找到解决方案。
您可以在此处查看我的代码的工作演示- 打开选项卡和其他导致延迟的过程混乱，您可以尝试将速度变量设置为低于 5 的数字，您会看到我来自哪里。任何帮助表示赞赏。
<!DOCTYPE html>
<html>
<body>
<canvas id="ctx" width="480" height="320" style="border:1px solid #000000;"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
}
var speed = 50
function game() {
var yAxis
var selectType = Math.floor((Math.random()*6)+1)
switch (selectType){
case 1: //semi
case 2:
yAxis = -80
var lane = Math.floor((Math.random()*3)+1)
switch (lane)
{
case 1: //left lane
setIntervalX(function () {
ctx.fillStyle = "white";
ctx.fillRect(200,yAxis,15,80);
yAxis = yAxis + 2
ctx.fillStyle = "black";
ctx.fillRect(200,yAxis,15,80);
}, speed, 400);
break;
case 2: //middle lane
setIntervalX(function () {
ctx.fillStyle = "white";
ctx.fillRect(230,yAxis,15,80);
yAxis = yAxis + 2
ctx.fillStyle = "black";
ctx.fillRect(230,yAxis,15,80);
}, speed, 400);
break;
case 3: //right lane
setIntervalX(function () {
ctx.fillStyle = "white";
ctx.fillRect(260,yAxis,15,80);
yAxis = yAxis + 2
ctx.fillStyle = "black";
ctx.fillRect(260,yAxis,15,80);
}, speed, 400);
break;
}
setTimeout(function() {game()}, speed * 80)
break;
case 3: //bike
yAxis = -10
var lane = Math.floor((Math.random()*3)+1)
switch (lane)
{
case 1: //left lane
setIntervalX(function () {
ctx.fillStyle = "white";
ctx.fillRect(200,yAxis,10,10);
yAxis = yAxis + 2
ctx.fillStyle = "black";
ctx.fillRect(200,yAxis,10,10);
}, speed, 400);
break;
case 2: //middle lane
setIntervalX(function () {
ctx.fillStyle = "white";
ctx.fillRect(230,yAxis,10,10);
yAxis = yAxis + 2
ctx.fillStyle = "black";
ctx.fillRect(230,yAxis,10,10);
}, speed, 400);
break;
case 3: //right lane
setIntervalX(function () {
ctx.fillStyle = "white";
ctx.fillRect(260,yAxis,10,10);
yAxis = yAxis + 2
ctx.fillStyle = "black";
ctx.fillRect(260,yAxis,10,10);
}, speed, 400);
break;
}
setTimeout(function() {game()}, speed * 45)
break;
case 4: //car
case 5:
case 6:
yAxis = -20
var lane = Math.floor((Math.random()*3)+1)
switch (lane)
{
case 1: //left lane
setIntervalX(function () {
ctx.fillStyle = "white";
ctx.fillRect(200,yAxis,10,20);
yAxis = yAxis + 2
ctx.fillStyle = "black";
ctx.fillRect(200,yAxis,10,20);
}, speed, 400);
break;
case 2: //middle lane
setIntervalX(function () {
ctx.fillStyle = "white";
ctx.fillRect(230,yAxis,10,20);
yAxis = yAxis + 2
ctx.fillStyle = "black";
ctx.fillRect(230,yAxis,10,20);
}, speed, 400);
break;
case 3: //right lane
setIntervalX(function () {
ctx.fillStyle = "white";
ctx.fillRect(260,yAxis,10,20);
yAxis = yAxis + 2
ctx.fillStyle = "black";
ctx.fillRect(260,yAxis,10,20);
}, speed, 400);
break;
}
setTimeout(function() {game()}, speed * 50)
break;}
}
game()
</script>
</body>
</html>