javascript - 如何让图像每半秒移动一定的距离？

Question

我正在制作一个网页，其中有两辆车相互竞争。当点击 parking 灯图像时，比赛开始。创建两个随机数，较大的一个将使其中一辆车移动 5 像素。但是当我开始比赛时，两辆车在同一时间移动到屏幕的末端，而它们应该每半秒移动 50 像素，直到它们冲过终点。

编辑:我稍微改变了一些事情。只制作了一个随机数变量，并且如果其中一张图像达到 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

发生的情况是，while 的每个循环都快得肉眼看不见，所以你只能看到它，就好像它会一直走到最后。

您可能会尝试做的是使用 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>

希望这可以帮助您赢得比赛。

狮子座。