Fun JavaScript программирование - имитация микро-канал самолета война игра --2 позволяет самолету двигаться

Предыдущая статья научит вас использовать холст , чтобы нарисовать картину, то , как должно позволить этой картине переместить его?
1. Принципы анимации
, мы обычно видим мультфильмы, почему активный вместе? На самом деле, потому что они сделаны из композиции фотографий, воспроизведения нескольких изображений в короткое время , чтобы почувствовать экран движется вверх. Что , если мы хотим , чтобы переместить изображение самолета, мы должны держать живописи самолетов, а также изменить координаты в целях достижения движения.
2. Как сохранить картину самолетов
хочет программу , чтобы сохранить картины самолета, мы не можем сказать , что строка коды отмечается несколько сот раз сейчас Да, нам просто нужно научиться таймер может сохранить рисунок плоскости. Код таймера выглядит следующим образом

//定时器,每隔10毫秒执行方法里面的事情
setInterval(function(){
    //画图片
    ctx.drawImage(plane,100,100);
},10);//10毫秒

Мы попытались найти код выше не позволяет самолету двигаться, почему? Потому что мы постоянно выполняются в таймере, который: положение (100100) покраска самолетов, так что здесь вы хотите использовать переменные: у, пусть каждый незаконченный самолет самолет, который движется вниз по координату у увеличивается.

var y=0;
setInterval(function(){
    ctx.drawImage(plane,100,y);
    y=y+1;
},10);

Эй , как они изменяются после того, как это, ах ~ незаконченный:

потому что мы просто повторить картину , когда картина самолета, если вы хотите достичь , и игры-подобный интерфейс, в то же время , мы также должны рисовать самолеты окрашен фон.

var y=0;
setInterval(function(){
    ctx.drawImage(background,0,0);
    ctx.drawImage(plane,100,y);
    y=y+1;
},10);

Мы сможем добиться движения самолета по коду выше, следующая статья научит вас сделать самолет производится в случайном месте.