JavaScript趣味编程--仿微信飞机大战游戏--2.让飞机移动

前一篇文章教大家使用canvas来画了一张图片，那么应该如何让这张图片动起来呢？
1.动画原理
我们平时看的动画片，为什么能动起来呢？其实是因为它们都是由一张张图片组成的，在短暂的时间播放多张图片就感觉画面是动的了。那我们如果想让飞机图片动起来，就需要不停地画飞机，并改变坐标，从而实现移动。
2.如何不停地画飞机
想让程序不停地画飞机，我们不可能说把一行代码打上个几百次吧！对，我们只需要学习定时器就可以不停地画飞机了。定时器代码如下

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

大家试了会发现，上面的代码并不能让飞机动起来，为什么呢？因为我们在定时器里面重复执行的事情是：在（100,100）的位置画飞机，所以这里要使用到变量：y,每一次画完飞机就让飞机往下移动即y的坐标增加。

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);

通过以上代码我们就能实现飞机的移动了，那么下一次的文章将教大家让飞机在一个随机的位置产生。