Установка предельного условия для цикла

Question

, имеющий проблему с моим циклом for, я уверен, что это что-то простое, что мне не хватает, но я пытаюсь получить три загруженных изображения, чтобы сдвинуть 10 шагов вниз, а затем остановить (с тремя изображениями, остановленными с 10 приращениями вниз. , когда я запускаю код, он работает, но он убегает от страницы (не останавливается на 10). Может ли кто-нибудь увидеть проблему? любая помощь будет замечательной!

window.addEventListener('load', eventWindowLoaded, false); 

function eventWindowLoaded() 
{ 
    canvasApp(); 
} 


function canvasSupport() 
{ 
    return Modernizr.canvas; 
} 

function canvasApp() 
{ 
    if (!canvasSupport()) 
    { 
     return; 
} 

    else 
{ 
    theCanvas = document.getElementById("canvas"); 
    var context = theCanvas.getContext("2d"); 
} 

var toes = new Image(); 
toes.addEventListener('load', eventShipLoaded , false); 
toes.src = "images/toes.png"; 
var larry = new Image(); 
larry.addEventListener('load', eventShipLoaded , false); 
larry.src = "images/larry.png"; 
var barry = new Image(); 
barry.addEventListener('load', eventShipLoaded , false); 
barry.src = "images/barry.png"; 

function eventShipLoaded() 
{ 
    startUp(); 
} 

y=0; 

function drawScreen() 
{ 

    for (x = 0; x < 1; x++) 
    { 
      context.fillStyle = "#aaaaaa"; 
      context.fillRect(0,0,500,500); 
      context.drawImage(toes,0,y,114,339); 
      context.drawImage(larry,110,(y+81),86,258); 
      context.drawImage(barry,203,(y+72),98,265); 
      y+=1; 
    } 
} 


function startUp() 
{ 
    setInterval(drawScreen,5); 
} 
} 

Answer 1

вы должны ограничить значение у. у вас есть только

y+=1; 

Answer 2

Вы используете «setInterval», не отключая таймер. Вот почему изображения продолжают двигаться. Поэтому просто подсчитайте, сколько раз вызывается «drawScreen» и останавливается таймер после 10-го звонка:

var movements = 0; 
var timer = null; 

function drawScreen() { 
    // ... original code ... 

    if (timer && ++movements == 10) { 
     clearInterval(timer); 
    } 
} 

function startup() { 
    timer = setInterval(drawScreen, 5); 
}