Javascript简单无尽的游戏，setTimeout问题
[英]Javascript simple endless game, setTimeout problems
问题描述
I am new to javascript and to programming in general so don't assume I know a lot. 
我是JavaScript和一般编程人员的新手，所以不要以为我知道很多。
I am creating a simple html5 javascript game where vehicles on a highway are coming down towards you (represented by canvas rectangles). 我正在创建一个简单的html5 javascript游戏，高速公路上的车辆朝您驶下（以画布矩形表示）。 I am creating the vehicle spawning and movement at the moment. 我现在正在创建车辆的生成和移动。 My goal is to have the vehicles spawn and come down with a constant space in between them regardless of what speed they are going. 我的目标是使车辆产生并在它们之间以恒定的间距降落，而不管它们的行驶速度如何。
What I have works except when any lag occurs and when the speed variable gets set to around the numbers four and under. 我的工作原理是，除了发生任何滞后并且将速度变量设置为4以下时。 I did some research and I believe this is because setTimeout doesn't take lag into account. 我做了一些研究，我相信这是因为setTimeout没有考虑到滞后。 Since I am new I don't know many of the functions, I have no clue on how to fix this and I can't find a solution online. 由于我是新手，所以我不了解许多功能，因此我不知道如何解决此问题，也无法在线找到解决方案。
You can see a working demo of my code here - mess with opening tabs and other lag causing processes and you can try setting the speed variable to a number below 5 and you'll see where i'm coming from. 您可以在此处看到我的代码的有效演示-与打开选项卡和其他导致进程延迟的混乱，您可以尝试将speed变量设置为小于5的数字，然后您会看到我的来历。 Any help is appreciated. 任何帮助表示赞赏。
<!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>
1 个解决方案
解决方案1
1 2014-01-06 06:45:58
You should only have 1 main setInterval that updates everything. 您应该只有1个主要的setInterval来更新所有内容。
Lag shouldn't be an issue, especially with a project of this size. 延迟不应该成为问题，尤其是对于如此规模的项目。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.