Я пока новичок в 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>