Question

我是javascript和编程的新手，所以不要以为我知道很多。

我正在创建一个简单的html5 javascript游戏，高速公路上的车辆朝向你（由画布矩形表示）。我正在创造车辆产卵和运动。我的目标是让车辆产生并在它们之间留下恒定的空间，无论它们的速度如何。

我有什么工作，除非发生任何延迟，并且速度变量设置为四位及四位左右。我做了一些研究，我相信这是因为setTimeout没有考虑滞后。由于我是新手，我不知道很多功能，我不知道如何解决这个问题，我无法在网上找到解决方案。

你可以看到我的代码here的工作演示 - 搞乱打开标签和其他导致滞后的过程，你可以尝试将速度变量设置为低于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>

Answer 1

您应该只有1个主要的setInterval来更新所有内容滞后不应成为一个问题，特别是对于这种规模的项目。

Javascript简单无穷无尽的游戏，setTimeout问题

1 个答案: