基于html的火柴人羽毛球游戲（附帶說(shuō)明文檔）

火柴人羽毛球

一、游戲簡(jiǎn)介

• 火柴人羽毛球靈感來(lái)自于flash小游戲

• 游戲中，玩家可操作畫面中的火柴人來(lái)進(jìn)行羽毛球比賽

• 通過(guò)鍵盤上的左右鍵控制火柴人的左右移動(dòng)，按上鍵跳躍，按下鍵揮拍擊球

• 當(dāng)某一方分?jǐn)?shù)達(dá)到7分即判定取勝

• 玩家可以選擇與其他玩家對(duì)戰(zhàn)、與不同難度AI對(duì)戰(zhàn)，以及觀看AI對(duì)戰(zhàn)

二、游戲?qū)崿F(xiàn)

2.1 繪圖部分

該游戲?yàn)閷?shí)時(shí)性游戲，為保證流暢，采用了游戲常用的60fps的幀率。每一幀繪制的內(nèi)容包括背景圖片、當(dāng)前比分、火柴人以及羽毛球。
下面分別介紹繪圖部分的各個(gè)細(xì)節(jié)：

• 半透明圖片
  常見(jiàn)的GDI庫(kù)只能繪制BMP圖片，其附帶的透明選項(xiàng)也只是選取圖片左上角像素作為透明顏色，并不能實(shí)現(xiàn)真正的半透明繪圖，畫出的圖片常會(huì)帶有丑陋的白邊。
  為了解決這一問(wèn)題，我們使用了*GDI+*庫(kù)，它支持各種各樣的圖片格式，當(dāng)然也就包括含有透明通道的PNG格式。有了GDI+，我們也就實(shí)現(xiàn)了更為精美的游戲畫面。

• 雙緩沖繪圖
  繪制出圖片并完成一些簡(jiǎn)單的動(dòng)畫后，我們發(fā)現(xiàn)在刷新一幀時(shí)，畫面會(huì)出現(xiàn)閃爍。想到以前使用MFC編程時(shí)曾接觸過(guò)雙緩沖繪圖方法。畫面出現(xiàn)閃爍的原因是繪圖時(shí)多次把像素轉(zhuǎn)移到屏幕上，而雙緩沖可以先在內(nèi)存中建立起一塊畫布，等到在內(nèi)存中全部繪完，再調(diào)用BitBlt函數(shù)將像素逐個(gè)復(fù)制到屏幕上。這樣便避免了畫面的閃爍。

• 局部刷新
  GDI+固然比GDI功能強(qiáng)大，但它繪圖效率低是不容忽視的問(wèn)題。與Direct2D使用顯卡繪圖不同，GDI+使用的是CPU，再加上我們的游戲需要繪制很多元素，對(duì)繪圖優(yōu)化就顯得很有必要。我們注意到，切換一幀時(shí)，并不是全部元素都需要重新繪制，因此也就可以使用局部刷新技術(shù)，只重繪更新了的區(qū)域。

• 人物動(dòng)畫
  在FLASH中，開(kāi)發(fā)者可添加一種名為影片剪輯的元素，它可以做與主時(shí)間軸異步的動(dòng)畫，影片剪輯可以極大地方便動(dòng)畫的制作。然而，匯編語(yǔ)言并沒(méi)有強(qiáng)大的動(dòng)畫制作工具，實(shí)現(xiàn)精細(xì)的動(dòng)畫也就需要很復(fù)雜的處理。
  例如，繪制人物時(shí)，手臂揮拍、腳步移動(dòng)、跳起時(shí)陰影保留在地面上，這些是各自獨(dú)立的。我們將小人的圖像拆解開(kāi)來(lái)，分別畫四個(gè)部分，這就實(shí)現(xiàn)了游戲中小人復(fù)雜的運(yùn)動(dòng)。

  
  

• 圖片旋轉(zhuǎn)
  游戲中的羽毛球并不是圓球，因此也就涉及到了旋轉(zhuǎn)。我們并沒(méi)有簡(jiǎn)單地制作許多張不同角度的羽毛球素材，而是只用了一張圖片。
  使用GDI+中的函數(shù)GdipImagePointsI，可以以圖片左上、右上、左下三點(diǎn)為基準(zhǔn)，規(guī)定三個(gè)新的基準(zhǔn)點(diǎn)，對(duì)原有矩形做線性變換，以此來(lái)完成圖像的旋轉(zhuǎn)。

  
  

2.2 邏輯部分

• 運(yùn)動(dòng)模型
  現(xiàn)實(shí)中，羽毛球由于受到的空氣阻力較大，其的運(yùn)動(dòng)軌跡不同于其他球類，不呈現(xiàn)拋物線。我們?cè)谟螒蛑袨榱诉€原真實(shí)性，使用了如下運(yùn)動(dòng)方程：

式子中，\(\gamma\)為空氣的粘滯系數(shù)。

• 碰撞判定
  羽毛球涉及的碰撞判定有很多：球網(wǎng)、地面、墻壁(球可以反彈回來(lái)!)都具有碰撞判定。在游戲中，球的運(yùn)動(dòng)是離散、不連續(xù)的，因此在每一幀計(jì)算時(shí)，球的判定點(diǎn)很難恰好處于墻壁等障礙物的平面上。對(duì)于球撞擊障礙物反彈的動(dòng)作，我們的處理方法是：

  有了這樣的處理，球的運(yùn)動(dòng)才會(huì)精確反彈。

• 使球的坐標(biāo)做關(guān)于平面的對(duì)稱變換

• 使球垂直于平面方向的速度分量反向

• 不同平面有不同的彈力系數(shù)，對(duì)應(yīng)于不同的反彈速度

• 擊球判定
  擊球是游戲中角色最主要的動(dòng)作。游戲中擊球的判定也很獨(dú)特：人的可擊球區(qū)域是球拍面揮動(dòng)起來(lái)可達(dá)到的扇形圓環(huán)區(qū)域，羽毛球飛出的角度與速度是在擊球瞬間由人與球的相對(duì)位置決定的。此外，根據(jù)球的高度不同，角色也可以自動(dòng)判斷應(yīng)該從上方還是從下方擊球。

• AI
  AI的設(shè)計(jì)可以說(shuō)是本游戲的一個(gè)亮點(diǎn)。游戲中，分別有兩個(gè)函數(shù)leftAIconsider與rightAIconsider，這些函數(shù)會(huì)根據(jù)包括羽毛球位置在內(nèi)的游戲狀態(tài)信息，指揮小人的行為（移動(dòng)、跳躍、擊球）。
  游戲內(nèi)置了兩個(gè)不同難度的AI，玩家亦可自行修改AI決策函數(shù)，利用AI-AI對(duì)戰(zhàn)模式與內(nèi)置的AI進(jìn)行PK。

三、其他亮點(diǎn)

• 實(shí)現(xiàn)了背景音樂(lè)播放，并且為擊球動(dòng)作添加了音效

• 可以屏蔽中文輸入法，避免點(diǎn)擊字母時(shí)跳出輸入法

• 創(chuàng)建窗口時(shí)，獲取到屏幕分辨率，使窗口處于屏幕正中央