坦克大戰游戲軟件中的數據結構和設計

◆摘? 要：本文從坦克大戰游戲的設計細節入手，深入探討了其數據結構和算法的設計，對于一般程序設計具有指導意義，使用的編程語言是html5 + JavaScript，軟件開發環境使用Visual Studio Code，運行環境為網頁。

◆關鍵詞：游戲軟件;數據結構;算法設計

計算機程序設計教學中，有一個重點，那就是二維數組的構建和使用。本文介紹了坦克大戰小游戲的軟件開發細節，這些討論可以幫助學生增加對這種數據結構的理解。很多小游戲的界面主要是一種平面關系的體現，其內部數據結構和外面界面設計基本上都應該是二維數組的應用。在進行游戲程序設計中，其數據結構的設計占據了主要的地位，其次其游戲策略決定了其算法的設計。本文結合坦克大戰游戲開發細節討論對涉及到的部分數據結構和游戲策略進行討論。具體實現中html文件用來實現網頁上的文字、圖片或音頻文件的加載，具體顯示的實現以及其他功能的實現是啟用js文件，css文件是用來美化網頁，結構與樣式的分離。

一、總體設計

本游戲的總體設計目標為網頁上運行的坦克打坦克。為了達成這款游戲的設計，我們必須考慮和設計以下一些因素：游戲開始界面的設計，不同關數的背景圖片顯示，己方坦克的射擊，己方坦克在發射子彈的時候的子彈飛行軌跡和是否擊中敵方坦克，自己的坦克被擊中的時候所產生的判定，游戲之中所獲得的分數的計算和顯示，還需要判斷坦克之間是否相撞等游戲結束的判定。

功能和界面設計方面主要是簡潔和自然，主界面上只有一個start（開始）按鈕可點。然后是選擇模式界面，當鼠標移到兩個坦克里，會出現“簡單模式”和“困難模式”字樣。點擊后可以進入相應的界面。徹底搞清楚機制后可以相應增加更多的關數。在簡單模式中，點擊左上角的橙色音量圖標開啟音樂（默認進入游戲是關閉的），上下左右方向鍵用來控制己方坦克的移動，空格鍵用來給坦克發射子彈，當分數達到一定條件時，子彈移動速度會變快和子彈一次出現兩顆等。在簡單模式中，只要己方坦克碰到敵方坦克或敵方子彈后游戲都會結束;在困難模式中啟用了一個默認的護甲值，兩方坦克都是中兩次子彈后才會消失，但是兩方坦克相撞的話就馬上結束游戲。另外在第二關中我方子彈是斜著飛的。如果我方坦克被子彈擊中一次后，子彈移動速度就不會提升了。

二、數據結構和游戲策略探討

在坦克大戰游戲中，我們需要一個平面的數據結構來展示空中的俯視效果，這主要是通過二維數組來實現。我們需要不斷的刷新己方飛機的位置和隨機出現的敵機的位置，然后就是雙方的子彈飛行軌道設計等。

下面先討論己方坦克的數據結構和敵方坦克的數據結構，首先統一成下面的設計，然后在分別調用處理雙方不同的坦克。

用圖片直接表示坦克是比較簡潔的編程方式，參數image表示照片，x，y表示出現在屏幕上的位置，width和height表示圖片的寬度和高度，frm表示當前第幾幀，dis表示時間間隔，hp表示坦克的護甲。圖片不同和出現位置的不同就代表了雙方不同的坦克。

然后是關于子彈類的設計，和坦克實際上是差不多的參數設計，不過相比于坦克類，多了一個speed表示子彈的速度。剛開始是初始速度，當達到一定條件后可以通過修改設置使得子彈速度變快。另外在復雜模式的情況下，考慮把子彈變成斜著飛，這樣增添了設計的變化性。

在屏幕上畫出坦克時，主要考慮敵方坦克要會自己移動，所以在畫己方坦克的時候this.x和this.y這兩行不要，使之受人工鍵盤控制移動即可。

Tank.prototype.draw = function（ctx）{

ctx.save（）;

ctx.translate（this.x， this.y）;

ctx.drawImage（this.image， this.frm*this.width， 0， this.width， this.height，

0， 0， this.width， this.height）;

ctx.restore（）;

this.y++;

this.x = this.originX + 20*Math.sin（Math.PI / 100*this.y）;

this.dis++;

if （this.dis >= 3）{

this.dis = 0;

this.frm++;

if （this.frm >= this.n） this.frm = 0;

}

};

在坦克移動的設計方面，通過dx和dy兩個偏移量的設計，可以達成移動，但是要注意不能移動到游戲邊界外面去了，所以要設計一下意外處理，當坦克要移動出游戲邊界時，使之原地不動。

Tank.prototype.move = function （dx， dy）{

this.x += dx;

this.y += dy;

//下面處理脫離游戲界面的坦克

if （this.x < 0 || this.x > 645）

this.x -= dx;

if （this.y < 0 || this.y > 500）

this.y -= dy;

};

在屏幕刷新時需要不斷地畫下移的坦克，源碼如下：

Tank.prototype.draw = function（ctx）{

ctx.save（）;

ctx.translate（this.x， this.y）;

ctx.drawImage（this.image， this.frm*this.width， 0， this.width， this.height，

0， 0， this.width， this.height）;

ctx.restore（）;

this.y++;

this.x = this.originX + 20*Math.sin（Math.PI / 100*this.y）;

this.dis++;

if （this.dis >= 3）{

this.dis = 0;

this.frm++;

if （this.frm >= this.n） this.frm = 0;

}

};

如果坦克沒有動，那么重畫的過程只需要把this.y++;和this.x變化的兩個語句刪除即可。

在檢測有沒有兩個坦克相互碰撞的設計上，主要考察兩個坦克圖片邊界位置是否有相互重疊的部分，分為四個方向的相互重疊先行做一個通用的函數設計，然后調用它來判斷兩個坦克之間的邊界是否重疊。

function isColliding（ax， ay， aw， ah， bx， by， bw， bh）

{

if（ay > by + bh || by > ay + ah || ax > bx + bw || bx > ax + aw）

return false;

else

return true;

}

Tank.prototype.hitTestObject = function（tankobj）{

if（isColliding（this.x， this.y， this.width， this.height，

tankobj.x， tankobj.y， tankobj.width， tankobj.height））

return true;

else

return false;

};

在第二模式中，需要考慮子彈的左偏，下面是相關源碼，而子彈右偏時只需要把this.x-=0.5;中的減法改為加法即可。

Bullet.prototype.draw3 = function （ctx）{

ctx.save（）;? //保存當前環境的狀態

ctx.translate（this.x， this.y）;? //重新映射畫布上的位置

ctx.drawImage（this.image， this.frm*this.width， 0， this.width， this.height，

0， 0， this.width， this.height）;

ctx.restore（）;? //返回之前保存過的路徑狀態和屬性

this.x-=0.5;

this.y-=this.speed;

this.dis++;

if （this.dis >= 10）{

this.dis = 0;

this.frm++;

if （this.frm >= 2） this.frm = 0;

}

};

在游戲過程中，用戶的按鍵決定了坦克的移動和射擊等功能，主要是通過每個鍵碼來進行判斷的。鍵碼為32時，說明是空格，于是需要處理子彈的射擊，而鍵碼為37、38、39和40時分別對應左右上下的處理。

function onkeydown（e） {

if （e.keyCode==32）{

if （score < 100）

bullets.push（new Bullet（image4， mytank.x+37， mytank.y-10））;

else{

bullets.push（new Bullet（image4， mytank.x+25， mytank.y-10））;

bullets.push（new Bullet（image4， mytank.x+49， mytank.y-10））;

}

}

else if （e.keyCode==37）

{

if （score < 100）

mytank.move（-10， 0）;

else

mytank.move（-20， 0）;

}

}

其他幾個方向的處理源碼非常類似，就不在這里列出了。限于篇幅，諸如主界面設計、背景音樂設計等其他設計細節也不深入探討了。

三、總結

要想設計好一款速度快、效果好、界面優的游戲，必須對數據結構有著充分的了解和實際應用的能力。二維數組是游戲開發中特別有用的一種數據結構。通過坦克大戰這個游戲軟件的討論可以增加對二維數組更深的理解。

作者簡介

馬春江（1963.01-），男，籍貫河南，研究生班，講師，湖北汽車工業學院計算機系，研究方向為數據結構、算法設計、圖形處理、動畫設計等。