飞机大作战游戏 2----（运用H5和Js制作）

游戏加载中状态

游戏加载中的图片

用一个数组将图片装起来

var loading=[];
             loading[0]=new Image;
             loading[0].src="img/game_loading1.png"
             loading[1]=new Image;
             loading[1].src="img/game_loading2.png"
             loading[2]=new Image;
             loading[2].src="img/game_loading3.png"
             loading[3]=new Image;
             loading[3].src="img/game_loading4.png"

定义一个对象储存图片的数据

var Loading={
                img:loading,
                length:loading.length,
                width:186,
                height:38
            }

使用构造函数绘制加载中的图片

函数中需要定义一个索引，再用paint的方法绘制图片，

在step的方法中让索引每次都加1，让图片产生变化，当索引值对于数组的长度时将游戏状态定为RUNNING

function jz(ld){
                 this.img=ld.img;
                 this.length=ld.length;
                 this.width=ld.width;
                 this.height=ld.height;
//               定义一个索引,方面查找图片
                this.starindex=0
//               绘制图片的方法paint
                this.paint=function(){
                  context.drawImage(this.img[this.starindex],0,HEIGHT-this.height);
              }
//              运动的方法step
                this.time=0
                this.step=function(){
                    this.time++
                    if(this.time%3==0){
                    this.starindex++}
                    if (this.starindex == this.length) {
                        start=RUNNING
                    }
                }
             }

 创建运动图片的对象

 var sky1=new jz(Loading)

给canvas绑定点击事件
   当点击画布界面是进入START状态    

  canvas.onclick=function(){
              if(start==START){
               start=STARTING;
              }
             }

定时器调用paint和step方法

扫描二维码关注公众号，回复： 4493268 查看本文章