思路：
1.設(shè)置環(huán)境
首先是把html弄出來(lái)，基本上就只需要一個(gè)canvas就可以了
然后設(shè)置一個(gè)固定的寬高滑凉，為canvas的尺寸番舆，然后創(chuàng)建ctx，也就是canvas.getContext('2d')
2.開(kāi)始設(shè)置配置信息
上面的弄好了捍歪，然后我們開(kāi)始想下這個(gè)里面有什么東西户辱，一般情況下一個(gè)項(xiàng)目的開(kāi)始基本上都是先看下這個(gè)項(xiàng)目基礎(chǔ)需要的一些東西，但是有些人想到這個(gè)項(xiàng)目糙臼，基本上不知道從哪里入手庐镐，其實(shí)呢，新手來(lái)說(shuō)变逃，可以直接從所看到的入手必逆，然后可以慢慢的完善起來(lái)，這樣是最笨的方法揽乱，但是想要精通名眉，那就要多寫(xiě)，這樣就可以從經(jīng)驗(yàn)入手了
然后呢凰棉，我們先看到的呢就是首頁(yè)圖损拢，也就是加載的圖，然后我們就可以向下撒犀，如果需要弄出這個(gè)來(lái)福压，需要干什么：
1》這個(gè)首頁(yè)圖其實(shí)是加載圖片的時(shí)候的一個(gè)圖，然后我們就會(huì)知道或舞，如果一個(gè)游戲開(kāi)始隧膏，那么就需要先把所有的游戲的素材先加載過(guò)來(lái)，也就是圖片這些嚷那，然后加載圖片的話胞枕，就需要一個(gè)過(guò)程，然后我們就分析下如何把所有的圖片加載過(guò)來(lái)
2》首先我們需要寫(xiě)一個(gè)函數(shù)魏宽，這個(gè)函數(shù)名字就叫做download腐泻，用于加載所有的圖片决乎，然后加載完之后，頁(yè)面上會(huì)出現(xiàn)百分比派桩，然后加載一個(gè)圖片构诚，百分比就會(huì)增加一點(diǎn)
3》因?yàn)槲覀兝锩嬗袀€(gè)百分比，所以我們download里面有個(gè)函數(shù)铆惑，就是單獨(dú)畫(huà)下百分比的范嘱，如果圖片加載完了，那就可以開(kāi)始游戲了员魏，代碼如下：
function drawProgress(){ //每次加載完一張圖片丑蛤，都會(huì)重新繪制當(dāng)前進(jìn)度
ctx.clearRect(0,0,canvasWidth,canvasHeight);//清除畫(huà)布上已有的內(nèi)容
var txt = progress+'%';
var w = ctx.measureText(txt).width;
ctx.fillText(txt, canvasWidth/2-w/2, canvasHeight/2+80/2);
ctx.strokeText(txt,canvasWidth/2-w/2, canvasHeight/2+80/2);
if(progress>=100){ //所有圖片加載完成，開(kāi)始游戲
startGame();
}
}
4》然后呢撕阎，是加載圖片受裹，因?yàn)檫@個(gè)項(xiàng)目里是飛機(jī)大戰(zhàn)，主要就幾個(gè)飛機(jī)和子彈的圖片虏束，所以棉饶，這些圖片我們要分類放起來(lái)，每次加載完之后镇匀，需要放到變量里面照藻，用于后面使用，所以開(kāi)始的時(shí)候會(huì)聲明一些變量或數(shù)組汗侵，專門用于存放這些圖片幸缕，下面是加載圖片的代碼，
下面是圖片加載的時(shí)候晃择，這些的話圖片太多了冀值，所以就截取這點(diǎn)也物，其他的同樣的方法宫屠，也可以用循環(huán)去下載，方法一樣
5》下載完之后滑蚯，我們就開(kāi)始弄首頁(yè)的圖片浪蹂，首先我們先畫(huà)下里面的天空，因?yàn)檫@個(gè)圖片是屬于循環(huán)一直走的告材，所以我們可以畫(huà)兩個(gè)圖片坤次，然后第一個(gè)圖片到底了的時(shí)候再畫(huà)一個(gè)相同的圖片放到底部繼續(xù)走，這樣對(duì)接就相當(dāng)于是一張無(wú)限長(zhǎng)的圖片了
代碼：
function Sky(img){
this.x1 = 0; //初始時(shí)第一張背景圖坐標(biāo)
this.y1 = 0;
this.x2 = 0; //初始時(shí)第二張背景圖坐標(biāo)
this.y2 = -img.height;
this.draw = function(){ //繪制天空對(duì)象
//每次繪制的背景圖都是鋪滿斥赋，會(huì)自動(dòng)覆蓋已有的全部?jī)?nèi)容缰猴，無(wú)需再調(diào)用clearRect()
ctx.drawImage(img,this.x1,this.y1);
ctx.drawImage(img,this.x2,this.y2);
}
this.move = function(){ //移動(dòng)天空對(duì)象
this.y1++; //圖片坐標(biāo)下移
this.y2++;
if(this.y1>=canvasHeight){ //第1張背景圖移出畫(huà)布了
this.y1 = this.y2-img.height;
}
if(this.y2>=canvasHeight){ //第2張背景圖移出畫(huà)布了
this.y2 = this.y1-img.height;
}
}
}
今天先寫(xiě)到這里，剩下的部分給大家時(shí)間自己想著寫(xiě)下疤剑，然后明天繼續(xù)寫(xiě)剩下的部分滑绒，游戲地址的話闷堡，我放到我的服務(wù)器上，雖然還不算完美疑故，但是算是能玩的
里面還有另外倆游戲杠览，
