如何讓圖像每半秒移動一定距離？

Question

我正在制作一個有兩輛賽車相互競爭的網頁。 單擊停止燈圖像時，它將開始比賽。 創建兩個隨機數，無論哪一個更大，都會使其中一輛車移動5px。 但是當我開始比賽時，兩輛車都會在同一時間移動到屏幕的末端，當時他們應該每半秒移動50px，直到他們越過終點。

編輯：我改變了一些事情。 只制作了一個隨機數變量，如果其中一個圖像達到1000px，它就會停止。 但他們繼續前進。 這是為什么？ 現在我剛剛達到1000px它就顯示了一個警報，但它會顯示當前設置為顯示的獲勝者的圖像：無。

我會參考你的例子，但這是一個家庭作業，我只能使用我學過的東西（我知道你們不可能知道我學到了什么。）

<script>
    var player1 = 0;
    var player2 = 0;
    function setTimer() {
        document.getElementById("race").src = "greenlight.png";
        var i = setInterval(startRace, 200);

    }
    var length = 50;

    function startRace() {


        var num1 = Math.floor(Math.random()*2);

            if (num1 == 0) {

                var move1 = player1 + length;
                player1 = player1 + 50;
                document.getElementById("car1").style.left = move1 + "px";


            }
            else if (num1 == 1) {

                var move2 = player2 + length;
                player2+=50;
                document.getElementById("car2").style.left = move2 + "px";

            }
        }

            if (player1 == 1000)
            {
                alert("Player 1 wins");
                clearInterval(i);
            }
            else if (player2 == 1000)
            {
                alert("Player 2 wins");
                clearInterval(i);
            }

    }




</script>

Answer 1

會發生的是，眼睛無法看到的每個循環都是如此之快，所以你只能看到它就像它一直到最后一樣。

您可能嘗試做的是使用setTimer更好地控制每個循環，如下所示：

 var i = 5; function moveCar () { setTimeout(function () { //Your code var num1 = Math.floor(Math.random()*2); var num2 = Math.floor(Math.random()*2); if (num1 > num2) { var increment = i + 'px'; document.getElementById("car1").style.left = increment; } else if (num2 > num1) { var increment = i + 'px'; document.getElementById("car2").style.left = increment; } else { var increment = i + 'px'; document.getElementById("car1").style.left = increment; document.getElementById("car2").style.left = increment; } i = i + 5; //Your code if (i < $(window).width() - 120) { // width() returns the screen width // - 120 because of the size of the box when reaching the end, not necessarilly your case moveCar(); //Keep calling the function } }, 50); //Time for each moveCar() loop executed } $('#start').click(function(){ moveCar(); }); 

 .box{ background-color: #dddddd; height: 120px; width: 120px; position: absolute; font-family: Helvetica; } #car1{ top: 20px; left: 0px; } #car2{ top: 160px; left: 0px; } #start{ top: 360px; left: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span class="box" id="car1">car 1</span> <span class="box" id="car2">car 2</span> <div class="box" id="start">START</div> 

希望這有助於你贏得那場比賽。

獅子座。

Answer 2

您可以嘗試這個骨架並重復使用它。

 var cars = document.getElementsByClassName('car'); var thread_id; var run_way = document.getElementById('view_port'); document.getElementById('start_btn').onclick = function() { if (thread_id) { clearInterval(thread_id); } var car_edge; var quit_race = false; var max_speed = 5; var total_cars = cars.length; while (total_cars--) cars[total_cars].style.left = "0px"; thread_id = setInterval(function() { var finish_line = run_way.offsetWidth; var move_by; total_cars = cars.length; while (total_cars--) { if (quit_race) { return; } move_by = Math.floor(Math.random() * max_speed); car_edge = parseInt(cars[total_cars].offsetLeft) + cars[total_cars].width; if ((car_edge + move_by) < finish_line) { cars[total_cars].style.left = (car_edge + move_by) + 'px'; } else { quit_race = true; clearInterval(thread_id); } } if (quit_race) { alert('Race over !'); } }, 500); }; 

 .car { position: absolute; left: 0px; } #car_1 { top: 40px; } #car_2 { top: 65px; } #view_port { width: 100%; } 

 <input type="button" value="Start" id='start_btn' /> <br/> <div id="view_port"> <img src="http://plainicon.com/dl.php?pid=40556&tem=24px&con=download-icon" id='car_1' class='car' /> <img src="http://plainicon.com/dl.php?pid=40556&tem=24px&con=download-icon" id='car_2' class='car' /> </div>