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>

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

2 个答案: