0

Я пока новичок в js.

Хочу сделать примитивную игру заяц и черепаха.

Вверху картинка с зайцем, а ниже с черепахой. Нужно сделать так, чтобы при движении мыши на картинке черепахи,она начинала двигаться вправо (увеличивать отступ слева и т.п.), а когда она начнёт двигаться, заяц тоже должен начать своё движение. И когда кто-нибудь дойдёт до финиша, должно появится диалоговое окно с победителем. Вроде всё понятно, но не получается с помощью onmousemove и i++ сдвигать влево marginLeft. Сдвигается только один раз.

var rabbit = document.getElementById('rabbit');
var turtle = document.getElementById('turtle');

turtle.onmousemove = function() {
  var i = 0;
  i++;
  turtle.style.marginLeft = 0 + i + 'px';
}
#rabbit {
  width: 128px;
  height: 128px;
  background-image: url(images/009_017_rabbit_animal_nature_speed_fast_quick-128.png)
}

#turtle {
  width: 128px;
  height: 128px;
  background: url(images/Turtle-2-128.png) no-repeat;
  margin-left: 0px;
}
<div id="rabbit"></div>

<div id="turtle"></div>

2 ответа 2

1

var rabbit = document.getElementById('rabbit');
var turtle = document.getElementById('turtle');
var speedRabbit = 0;
var speedTurtle = 0;

turtle.onmousemove = function() {
  speedTurtle++;
  turtle.style.marginLeft = speedTurtle + 'px';
 
 if (!speedRabbit) {
 	 motionRabbit();
 }
}

function motionRabbit() {
	speedRabbit++;
  rabbit.style.marginLeft = speedRabbit + 'px';
  
  setTimeout(motionRabbit, 50); // Скорость движения блока зайца(В данном случае 1px/50миллисекунд)
}
#rabbit {
  width: 128px;
  height: 128px;
  background-color: gray;
}

#turtle {
  width: 128px;
  height: 128px;
  background-color: green;
  margin-left: 0px;
}
<div id="rabbit">Заяц</div>
<div id="turtle">Черепаха</div>

1
  • Спасибо большое!
    – Влад
    30 ноя 2018 в 14:46
0

var rabbit = document.getElementById('rabbit');
var turtle = document.getElementById('turtle');
var i = 0;

turtle.onmousemove = function (){   
    i++;
    turtle.style.marginLeft =0+i+'px';
}
#rabbit{
    width: 128px;
    height: 128px;
    background: grey;
    }
#turtle{
    width: 128px;
    height: 128px;
    background: green;
    margin-left: 0px;
}
<div id="rabbit"></div>

<div id="turtle"></div>

Анонимная функция вызывается каждый раз когда указатель мыши двигается над элементом turtle, и по вашему коду оно каждый раз сначала устанавливает значение i в 0. Достаточно просто обявить i вне функции и все заработает

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.