【導(dǎo)讀】上推出的一款2D射擊游戲。游戲以玩家控制坦克保衛(wèi)基地為主題，屬于策略型聯(lián)機(jī)。逼真，更具操作性。而HTML5是超文本標(biāo)記語(yǔ)言的第五次重大修改。由于HTML5賦予網(wǎng)頁(yè)更好的。意義和結(jié)構(gòu)，更有效的鏈接工作效率。課題內(nèi)容是使用html5技術(shù)基于JavaScript語(yǔ)言。個(gè)人玩，也可以兩個(gè)人玩。關(guān)鍵詞：HTML5；單機(jī)游戲；坦克大戰(zhàn)；超文本標(biāo)記語(yǔ)言；JavaScript；

　　

【正文】 坦克的速度，具體值由函數(shù)的參數(shù) speed確定 = type。敵方坦克的種類，具體值由函數(shù)的參數(shù) type確定 = false。坦克的發(fā)射狀態(tài)缺省值是 false = 0。 = 70。敵方坦克射擊出炮彈的速度 = 1。敵方坦克的生命值只有一次 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 25 } = newSprite()。 敵方坦克的隨機(jī)移動(dòng)： = function() { ()。 //使用函數(shù) ()隨機(jī)生成大于等于 且小雨 的隨機(jī)數(shù)。 if(!())//amp。amp。 () * 4 1) { var i = parseInt(() * 4)。//將隨機(jī)生成的數(shù)用函數(shù) paresInt 轉(zhuǎn)換成整數(shù)并賦值給變量 i var dir = 。 //判斷 dir 的值然后改變 的值，即產(chǎn)生坦克的行駛的方向 if( dir == UP amp。amp。 i == DOWN amp。amp。 () * 4 = 2) { = UP。} else if( dir == DOWN amp。amp。 i == UP amp。amp。 () * 4 = 2 ) { = DOWN。} else if( dir == LEFT amp。amp。 i == RIGHT amp。amp。 () * 4 = 2 ) { = LEFT。} else if( dir == RIGHT amp。amp。 i == LEFT amp。amp。 () * 4 = 2 ) { = RIGHT。} else { = i。} } }。 我方坦克的移動(dòng)（通過(guò)鍵盤事件控制的），即在開始將方向 “數(shù)值化 ”， up=0， down=1，left=2， right=3,其后使用 switch 語(yǔ)句對(duì)方向做出具體 的判斷。如當(dāng)方向?yàn)?up 時(shí)，相應(yīng)的 y 值就會(huì)做出變化，而具體的變化需要根據(jù)當(dāng)前坦克的行駛速度決定的。 var UP = 0。 //給坦克的行駛方向賦予具體的值 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 26 var DOWN = 1。 var LEFT = 2。 var RIGHT = 3。 = function(dir){ switch(dir){ case UP :{ if(()) { = 。returntrue。//移動(dòng)變化值等于速度的值 } break。 } case DOWN:{ if(()) { += 。returntrue。 //移動(dòng)變化值等于速度的值 } break。 } case LEFT:{ if(()) { = 。returntrue。 //移動(dòng)變化值等于速度的值 } break。 } case RIGHT:{ if(()) { += 。returntrue。 } break。 } default:break。 } returnfalse。 }。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 27 坦克被擊毀的過(guò)程中，依然依賴于 graphics()函數(shù)，通過(guò)該函數(shù)去調(diào)用相應(yīng)的圖像去達(dá)到清除的效果。在初始化的過(guò)程中，則需要 canvas 畫布技術(shù)中的 document 對(duì)象的getElementById()函數(shù)來(lái)得到其變量的 ID。再創(chuàng)建 context 對(duì)象，其中 getContext(“2d”)對(duì)象是內(nèi)置的 HTML5 對(duì)象，擁有多種繪制對(duì)象的方法。 在規(guī)定的時(shí)間內(nèi)，我方坦克通過(guò)移動(dòng)到達(dá)獎(jiǎng)勵(lì)道具的位置，獲取道具，然后會(huì)獲取相應(yīng)的功能增加。其具體（部分）代碼如下： = newSprite()。 = function() { varmyCanvas = (upp)。 var graphics = (2d)。 ( + offerX, + offerY,30,28)。 = parseInt(() * 6)。隨機(jī)生成道具的種類 //if( == 0 || == 4) {()。} = parseInt(() * 384)。隨機(jī)生成橫坐標(biāo) = parseInt(() * 384)。隨機(jī)生成縱坐標(biāo) }。 道具的種類，實(shí)現(xiàn)主要依賴 switch（）函數(shù)，根據(jù) 值的不同，是其產(chǎn)生不同的效果： FunctionupdataFood(){ ()。 for(vari = 0 。 iplayerNum。 i ++){ if(tanks[i].hitTestObject(food)){ 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 28 switch(){ casefoodLife: tanks[i].live ++。玩家的生命值增加 (tanks[i].name,tanks[i].live)。 12增加玩家的積分 tanks[i].isGod = true。 break。 casefoodHome: changeHome(true)。改變基地外墻的屬性 break。 casefoodStar: tanks[i].shotSpeed = 10。增加炮彈的發(fā)射速度 if(tanks[i].shotSpeed10) tanks[i].shotSpeed = 10。 break。 casefoodTime: stopTime = 800。敵方坦克不能移動(dòng) break。 casefoodBomb: tanksBomb(true)。當(dāng)前在屏幕里的敵方坦克全部爆炸 break。 default: return。 } var temp = new Score( + 15, + 15,500)。 (temp)。 tanks[i].score ++。 (food)。 = foodNon。 } } 圖 道具效果圖 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 29 道具從左到右依次是： (1) 讓玩家的生命條數(shù)增加一； (2) 使敵方坦克在一定時(shí)間內(nèi)無(wú)法移動(dòng)； (3) 使基地外的城墻變成鐵墻； (4) 使目前屏幕上的敵方坦克爆炸； (5) 玩家獲得積分 (6) 玩家在一定時(shí)間內(nèi)獲得保護(hù)層； 每一關(guān)都是獨(dú)立的地圖，每關(guān)的地圖需要單獨(dú)繪制，通過(guò) HTML5 中的 canvas 畫布技術(shù)，以及加載本地文檔中的圖片去繪制地圖。具體代碼如下： 關(guān)卡的選擇： function selectMap(level){ var i,j。 level = level % 21。取關(guān)卡變量的余數(shù) if(level == 0) {level = 21。} var tempMap = this[map + level]。//聲明變量 tempMap，用來(lái)存放關(guān)卡 for (i = 0。 i 26。 i++ ){ for (j = 0。 j 26。 j++ ){ map[i][j] =tempMap[i][j]。//調(diào)用地圖，生成關(guān)卡 } } } 繪制地圖函數(shù)： function drawMap(){ var myCanvas = (wall)。 var graphics = (2d)。 var img = (tankAll)。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 30 = 7f7f7f。調(diào)用函 數(shù)設(shè)置其背景 (0,0,512,448)。繪制矩形 = 000。 (offerX,offerY,416,416)。 for(var i=0。i26。i++){ for(var j=0。j26。j++){ if(map[i][j]==WALL){繪制地圖中的磚墻 (img,mapx, mapy,16,16,j*16 + offerX, i*16 + offerY,16,16) 。 } else if(map[i][j]==GRID) {繪制圖中的網(wǎng)格 (img,16 + mapx, mapy,16,16,j*16 + offerX, i*16 + offerY,16,16) 。 } else if(map[i][j]==WATER){繪制地圖中的水 (img,48 + mapx, mapy,16,16,j*16 + offerX, i*16 + offerY,16,16) 。 } else if(map[i][j]==ICE) {繪制地圖中的鐵墻 (img,64 + mapx, mapy,16,16,j*16 + offerX, i*16 + offerY,16,16) 。 } else if(map[i][j]==HOME){繪制地圖中的基地 (img,0 + homex, homey, 32, 32, j*16 + offerX, i*16 + offerY, 32, 32) 。 } else if(map[i][j]==10){ 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 31 (img, 0 + mapx, mapy, 16, 8, j*16 + offerX, i*16 + offerY, 16, 8) 。 } else if(map[i][j]==11){ (img, 0 + mapx, 8 + mapy, 16, 8, j*16 + offerX,i*16+8 + offerY, 16, 8) 。 } else if(map[i][j]==12) { (img, 0 + mapx, mapy, 8,16, j*16 + offerX, i*16 + offerY, 8, 16) 。 } else if(map[i][j]==13){ (img, 8 + mapx, mapy, 8, 16, j*16+8 + offerX, i*16 + offerY, 8, 16) 。 } else if(map[i][j]==88){ (img, 32 + mapx, mapy, 32, 32, j*16 + offerX, i*16 + offerY, 32, 32) 。 } } } } 地圖的繪制同樣離不開 canvas 畫布技術(shù)中的 graphics 對(duì)象中的 drawImage()方法，其實(shí)在基于 HTML5 中的畫圖最主要就是依賴于這項(xiàng)技術(shù)，而這也是 HTML5 與它的前身 HTML 的區(qū)別之一。在后期的整個(gè)編程中不管是地圖的繪制或者其他的圖片調(diào)用等都離不開它。 但是大多數(shù)的 canvas 繪圖的 API 并沒有定義在該元素本身上，而是定義在通過(guò)畫布的 getContext()方法，用此方法獲得相應(yīng)的對(duì)象。 如下為已經(jīng)繪制好的關(guān)卡一的地圖截圖 : 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 32 圖 地圖截圖 在截圖中，其左側(cè)是程序的主要界面，在該界面中游戲的運(yùn)行顯示部分。而右側(cè)則是數(shù)據(jù)顯示欄，最上方是敵方坦克剩余數(shù)，接下來(lái)是當(dāng)前玩家的生命條數(shù)，再下來(lái)是當(dāng)前的關(guān)卡。 圖 游戲開始界面 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 33 圖 關(guān)卡一 圖 倆個(gè)玩家的開始界面 當(dāng)選擇倆人模式時(shí)，在屏幕中間下方的位置出現(xiàn)的黃色和綠色坦克為玩家控制的坦克。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 34 圖 關(guān)卡二 圖中出現(xiàn)的深黃色的方塊為磚墻，而白色的則為鐵墻。 圖 關(guān)卡五 圖中出現(xiàn)的藍(lán)色方塊為河流，不管是玩家或者是敵方坦克都不能穿過(guò)。 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 35 圖 關(guān)卡四 太原理工大學(xué)畢業(yè)設(shè)計(jì) (論文 )用紙 36 6 測(cè)試 測(cè)試的目的與意義 測(cè)試的目的是在真實(shí)的系統(tǒng)工作環(huán)境下與前期需求分析中所定義的做比較，校驗(yàn)完整的軟件配置項(xiàng)能否和系統(tǒng)正確連接，發(fā)現(xiàn)軟件和軟件設(shè)計(jì)文