????????? 飛機(jī)大作戰(zhàn)一

?????????首先建立一個(gè)div將canvas包住使其居中：

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

?????? 接下來(lái)是在script標(biāo)簽中進(jìn)行

?????? 首先我們需要獲取畫(huà)布的對(duì)象和工具

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

??? 第一步：初始化數(shù)據(jù)

????? 定義游戲的初始狀態(tài)

var START=0; /*加載*/ var STARTING = 1; /*加載中*/ var RUNNING = 2; /*游戲開(kāi)始*/ var PAUSE = 3; /*暫停*/ var GAMEOVER = 4; /*結(jié)束*/

開(kāi)始加載狀態(tài)：

var start=START; // 設(shè)置寬和高var WIDTH=480;var HEIGHT=650; // 設(shè)置游戲得分var score=0; // 設(shè)置飛機(jī)生命值var life = 5;

設(shè)置背景

先獲取到圖片的對(duì)象

將圖片的數(shù)據(jù)用一個(gè)定義對(duì)象列出來(lái)

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

再利用構(gòu)建函數(shù)來(lái)繪制背景

因?yàn)楸尘皥D片是滾動(dòng)的所以利用兩張圖片先后放入畫(huà)布

當(dāng)一張圖片快要走出畫(huà)布時(shí)，到達(dá)這個(gè)零界點(diǎn)，將此張圖片返回到列一張圖片的后面

使用paint方法繪制，step方法讓圖片運(yùn)動(dòng)起來(lái)

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; // 繪制的方法paintthis.paint=function(){context.drawImage(this.Image,this.x1,this.y1);context.drawImage(this.Image,this.x2,this.y2);} // 運(yùn)動(dòng)的方法stepthis.step=function(){this.y1++;this.y2++;if(this.y1==this.height){this.y1=-this.height}if(this.y2==this.height){this.y2=-this.height}}} // 創(chuàng)建背景對(duì)象var sky=new Bg(bg)

繪制最外層的log

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

使用定時(shí)器調(diào)用函數(shù)

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

?效果圖：

轉(zhuǎn)載于:https://www.cnblogs.com/xuhanghang/p/10115933.html

總結(jié)

以上是生活随笔為你收集整理的飞机大作战游戏 1----（运用H5和Js制作）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。