Первая проблема - это путаница имен переменных. У вас есть то же имя для индекса интервала, что и для функции - так что это путается. Видите, я немного дифференцировался ниже, и теперь он движется вперед каждый раз, когда вы нажимаете кнопку:
<button onmousedown="move()" onmouseup="stop()">Move Forward</button>
<br>
<br>
<img width="150px" id="sonic" src="https://www.sccpre.cat/mypng/full/338-3383227_sonic-running-png-sonic-1-sonic-sprite.png" />
<script>
var sonic = document.getElementById('sonic');
var left = 0
var forwardInt;
var addInt;
sonic.style.position = "absolute";
function move(){
forwardInt = setInterval(forwardFn, 10);
addInt = setInterval(addFn, 10);
}
function addFn(){
left = left + 10;
}
function forwardFn(){
sonic.style.left = left;
}
function stop(){
clearInterval(forwardInt);
clearInterval(addInt);
}
</script>
Однако я все еще не думаю, что это вполне соответствует тому, что вы хотели (непрерывное движение, удерживая нажатой клавишукнопка). Я правильно понимаю?
Я внес некоторые коррективы для достижения этой цели, как показано ниже. Я объединил две функции и учел край окна. Я также добавил механизм блокировки / разблокировки для запуска и остановки. Забавно заставить маленького парня уходить! Возвращает меня.
<button onmousedown="move()" onmouseup="stop()">Move Forward</button>
<br>
<br>
<img width="150px" id="sonic" src="https://www.sccpre.cat/mypng/full/338-3383227_sonic-running-png-sonic-1-sonic-sprite.png" />
<script>
var sonic = document.getElementById('sonic');
var left = 0;
var forwardInt;
var addInt;
var lock = false;
sonic.style.position = "absolute";
sonic.style.left=0;
var rect = sonic.getBoundingClientRect();
function move(){
lock = false;
forwardInt = setInterval(forwardFn, 10);
}
function forwardFn(){
if(!lock&&rect.right<window.innerWidth){
sonic.style.left = rect.left+10;
rect = sonic.getBoundingClientRect();
}else{
clearInterval(forwardInt);
}
}
function stop(){
lock = true;
}
</script>