Javascript簡單無盡的游戲，setTimeout問題
[英]Javascript simple endless game, setTimeout problems
問題描述
我是JavaScript和一般編程人員的新手，所以不要以為我知道很多。
我正在創建一個簡單的html5 javascript游戲，高速公路上的車輛朝您駛下（以畫布矩形表示）。 我現在正在創建車輛的生成和移動。 我的目標是使車輛產生並在它們之間以恆定的間距降落，而不管它們的行駛速度如何。
我的工作原理是，除了發生任何滯后並且將速度變量設置為4以下時。 我做了一些研究，我相信這是因為setTimeout沒有考慮到滯后。 由於我是新手，所以我不了解許多功能，因此我不知道如何解決此問題，也無法在線找到解決方案。
您可以在此處看到我的代碼的有效演示-與打開選項卡和其他導致進程延遲的混亂，您可以嘗試將speed變量設置為小於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>
1 個解決方案
解決方案1
1 2014-01-06 06:45:58
您應該只有1個主要的setInterval來更新所有內容。
延遲不應該成為問題，尤其是對於如此規模的項目。
如何讓Rhino運行自定義的javascript setTimeout函數，無休止的eval
[英]How to make Rhino to run custom javascript setTimeout function, endless eval
如何通過Java中的setTimeout終止無盡的while循環
[英]How to terminate endless while loop via setTimeout in Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.