飛機大作戰一

         首先建立一個div將canvas包住使其居中：

<div style="text-align: center;">
<canvasid="canvas"width="480px"height="650px"></canvas>
</div>

       接下來是在script標籤中進行

       首先我們需要獲取畫布的物件和工具

var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")

    第一步：初始化資料

      定義遊戲的初始狀態

var START=0;        /*載入*/
var STARTING = 1;   /*載入中*/
var RUNNING = 2;    /*遊戲開始*/
var PAUSE = 3
 
;      /*暫停*/
var GAMEOVER = 4;   /*結束*/

開始載入狀態：

           var start=START;
//         設定寬和高
           var WIDTH=480;
           var HEIGHT=650;
//         設定遊戲得分
           var score=0;
//         設定飛機生命值
           var life = 5;

設定背景

先獲取到圖片的物件

將圖片的資料用一個定義物件列出來

var bg={
                img:img,
                width:
 
480,
                height:852
            }

再利用構建函式來繪製背景

因為背景圖片是滾動的所以利用兩張圖片先後放入畫布

當一張圖片快要走出畫布時，到達這個零界點，將此張圖片返回到列一張圖片的後面

使用paint方法繪製，step方法讓圖片運動起來

function Bg(unm){
                this.width=unm.width;
                this.height=unm.height;
                this.Image=unm.img;
//              第一張圖片的位置
                this.x1=0;
                this.y1=0;
//              第二張圖片位置
                this.x2=0;
                this.y2=-this.height;
//              繪製的方法paint
                this.paint=function(){
                    context.drawImage(this.Image,this.x1,this.y1);
                    context.drawImage(this.Image,this.x2,this.y2);
                }
//              運動的方法step
                this.step=function(){
                    this.y1++;
                    this.y2++;
                    if(this.y1==this.height){
                        this.y1=-this.height
                    }
                    if(this.y2==this.height){
                        this.y2=-this.height
                    }
                }
                
            }

//          建立背景物件
            var sky=new Bg(bg)

繪製最外層的log

var log=new Image();
 log.src="img/start.png"

使用定時器呼叫函式

 setInterval(function(){
sky.paint();
sky.step();）1000}

 效果圖：