Блог

Я создаю веб-страницу, на которой две машины соревнуются друг с другом. При нажатии на изображение стоп-сигнала начинается гонка. Создаются два случайных числа, и то, какое из них больше, заставит одну из машин переместиться на 5 пикселей. Но когда я начинаю гонку, обе машины перемещаются в конец экрана в одно и то же время, когда они должны просто перемещаться на 50 пикселей каждые полсекунды, пока не пересекут финиш.

Редактировать: я немного изменил ситуацию. Создал только одну переменную со случайным числом и сделал так, чтобы, если одно из изображений достигло 1000 пикселей, оно остановилось. Но они продолжают работать. Почему это так? На данный момент я только что сделал это, когда оно достигает 1000 пикселей, отображается предупреждение, но отображается изображение победителя, для которого в данный момент установлено значение display: none.

Я бы сослался на ваши примеры, но это домашнее задание, и я могу использовать только то, что я узнал (я знаю, что вы, ребята, не можете знать, что я узнал.)

 <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>
 

Происходит то, что каждый цикл while выполняется так быстро, что глаз не может видеть, поэтому вы видите его только так, как если бы оно проходило весь путь до конца.

Что вы можете попытаться сделать, так это сделать if с помощью 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> 

Надеюсь, это поможет вам выиграть эту гонку.

Лео.

Вы можете попробовать этот скелет и использовать его повторно.

 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=40556amp;tem=24pxamp;con=download-icon" id='car_1' class='car' />
  <img src="http://plainicon.com/dl.php?pid=40556amp;tem=24pxamp;con=download-icon" id='car_2' class='car' />
</div>