遊戲載入中狀態

遊戲載入中的圖片

用一個數組將圖片裝起來

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方法