[[78619]]

試玩地址:  http://alloyteam.github.com/StreetFighter/

下載地址: https://github.com/AlloyTeam/StreetFighter

主機控制鍵:

移動: W: 上, D: 前, A: 后, S：下

攻擊: J: 輕拳, K: 重拳, U: 輕腿, I: 重腿

特殊技能: 下→前→拳: 波動拳, 下→后→腿：旋風腿, 前→下→前→拳：升龍拳

副機（小鍵盤）:

移動: ↑: 上, ←: 前, →: 后, ↓：下

攻擊: 1: 輕拳, 2: 重拳, 4: 輕腿, 5: 重腿

特殊技能: 下→前→拳: 波動拳, 下→后→腿：旋風腿, 前→下→前→拳：升龍拳

其他：

按F2暫停游戲, 1鍵大戰電腦ai, 2鍵雙人對打.

如果控制不了, 注意切換下輸入法哈.

圖片素材來自互聯網, 原作者Random. 游戲版權歸CAPCOM公司所有.歐洲杯之前加上websocket和3D音效.

開發過程介紹

大概是1個月前開始學習HTML5, 就寫了這樣一個東東練手. 不過說來慚愧, 至今也只學會了canvas的drawImage. 每天的業余時間不太固定, 有時候一天能寫三小時, 有時候一天能寫三分鐘. 代碼也寫的相當潦草. 總的來說有點虎頭蛇尾. 本來準備找個時間再重構一下, 突然發現失去了興致, 歐洲杯又馬上開始了. 對我來說, 已經差不多達到練手的目的, 所以還是罷了.

非常簡單的記錄一些實現思路. 暫且不討論api. 一是因為api到處可以查閱, 二是因為我確實只認識drawImag. 本人技術也十分有限, 請輕砸.

代碼里只有幾個js文件, 每個文件的功能如下:

Class.js   創建類和對象.

Game.js   游戲入口文件.

Map.js    繪制地圖.

Config.js  各種游戲人物動作打架挨打等等配置.

Interface.js 各種接口

Main.js    負責游戲邏輯

Ai.js      Ai

Timer.js   全局定時器

Class.js.

為什么要搞這樣一個東西呢. 保護原型, 繼承的時候修正constructor什么的, 反正現在不搞個Class.create都有點不太好意思. 

這里也借鑒了prototype框架里的一些思路. 相對于prototype里的換湯不換藥. 這兒的class.create選擇返回一個普通的object對象, 有點像jquery里$的搞法. 

這樣可以自由的擴展Class的各種方法,而不用再搭理Function的原型. 舉個例子, Class.empty()可以秒殺這個類生成的所有對象. 比如現在正在設計一個飛機游戲. 有個大招可以清除屏幕上的所有子彈和敵機. 那么, 哼哼.. 

因為Class.create返回的是一個普通的object. 所以不能用new Function的方式生成對象. 具體使用方法如下例.

#p#

var Hero = Class.create( function( name ){      
this.name =  name;       
} , {       
addSkill: function(  skill ){       
.......      
}       
})       
var hero1 = Hero.getInstance(  "半人馬酋長"  );     
hero1.addSkill(  "六級跳大"  );      
var hero2 = Hero.getInstance(  "山嶺巨人"  )       
hero2.addSkill(  "六級跳大"  )       
var hero3 = Hero.getInstance(  "黑暗游俠"  );       
hero3.addSkill(  "六級跳大">"  );   

Timer.js

用js做動畫, 無非就是用setInterval或者setTimeout讓圖片的top和left, 或者圖片本身的src在很短的時間內間隔變換. 達到視覺的動畫效果. 跟動畫片一樣.

雖然屏幕上有很多精靈在同時運動. 但在一個游戲中, 只有也應該只有一個全局的定時器. 

一是從性能出發.  setInterval的開銷相當不小.

二是為了統一管理, 比如方便的實現暫停功能.

北京時間X點X分X秒X毫秒, 東經X度北緯X度在發生什么. 整個世界就是這樣組成.

定時器從游戲開始一直在不停執行, 像地鐵環線. 每隔1小時回到起點. 也像我們自己, 每隔24小時回到原點, 周而復始. 

var timer = Timer.add( function(){       
alert (1)       
})       
timer.start();  //上車       
timer.stop();  //下車      
timer.slow( 1000 ) 地鐵減速   

Interface.js

我之前寫過幾個小游戲, 每個都搞了很多類在里面. 比如坦克大戰, 子彈是一個類, 移動是一個類. 碰撞是一個類. 坦克先繼承碰撞類, 再繼承移動類. 這樣一來坦克既能碰撞也能移動. 非常酷.

可是真的需要那么多類么. 有種方式或許更輕巧敏捷, 那就是接口. 

讓精靈可以移動只需要Spirit.interface( ’Animate’, Interfaces.Animate );

上帝創造生命的時候, 沒有讓腔腸動物和環節動物實現眼睛的接口.

人類當然實現了眼睛的接口, 但人類不是從眼睛繼承來的.

接口在未被聲明之前, 只是一個普通的函數, 沒有構造器, 沒有prototype. 基本不占內存開銷. 

對于每個宿主( 實現者 )來說, 比如精靈1的animate和精靈2的animate. 它們像兩個平行的宇宙. 每個都有各自的scope. 局部變量. 

接口之間不贊成互相通信. 但可以通過宿主來通信. 就像人類實現了耳朵接口和嘴巴接口. 

耳朵聽到聲音先把信息報告給大腦. 大腦再控制嘴巴說話. 但耳朵和嘴巴是不應該長到一起的. 這樣不至于耳朵壞了的時候要修理嘴巴. 其實就是三個字, 要解耦！

Intanfances里面的主要接口有這些:

Event: 一個簡單的自定義事件機制, 以便在Animate,Frame和碰撞檢測的時候實現有限狀態機.

Lock: 動作鎖.

Queue: 一個簡單隊列機制. 

StatusManage: 管理精靈的各種狀態.

Shadow: 精靈的陰影.

Animate: 移動.

SpiritFrames: 精靈的動畫幀.

KeyManage: 鍵盤管理器, 收集玩家輸入.

Collision: 檢測碰撞.

AttackEffect: 攻擊效果.

Audio: 音效.

Main.js

游戲的具體邏輯都在里面, 這個模塊里一共實現了三個類. 精靈類, 戰斗類, 還有一個類有點別扭, 它是波動拳類. - -!.  

整個游戲里也只有這3個類. 不過因為邏輯較多. 時間消耗基本都花在了這里. 畢竟它不像貪食蛇, 只要判斷食物, 墻壁和尾巴. 

Ai.js

這個模塊負責Ai所有邏輯, 也是寫的最輕松的一個模塊. 寫好之后基本沒改過.

對于電腦ai來講, 它明白對方的每一個動作. 所以對每一組動作, 都給ai設計了一組反應動作. 比如你出旋風腿, 電腦就出升龍拳. 

但這樣的話就沒人打的過電腦了, 所以電腦的每次反應都有一組對的和一組錯的, 可以調節ai的難度, 當ai越難的時候, 隨到正確那組動作的可能性越大.

寫游戲和寫普通的應用有點不一樣的地方是, 游戲需要更好的抽象出每個場景之間的共同點, 或者找出他們的不同點. 要盡量盡量少寫if else. 除非是逼不得已. 當你寫了一個if, 就意味著可能要寫N個else if. 當邏輯越來越多的時候, 維護這些if會異常痛苦.

街頭霸王里面的動作有很多種, 比如跳躍的時候不能移動, 攻擊的時候既不能跳躍也不能移動, 跌倒的時候既不能跳躍也不能攻擊也不能移動. 死亡之后啥也干不了. 那么怎么處理這些邏輯呢. 想想如果是寫這樣的代碼.

If ( isJump ){       
If ( move ) return false;       
}else if( isAttack ){       
If ( move || jump ) return false;       
}else if ( fall_down ){       
If ( move || jump || attack ) return false;       
}...   

游戲里的具體邏輯比這復雜的多, 我也想不到得寫多少個if else, if else. 閉上眼睛就是if else.

現在我是這樣實現的. 給每種動作在配置文件里加一個鎖. 精靈在動的時候, 總是被它鎖住的. 移動的鎖是0級, 跳躍是1級, 攻擊是2級. 摔倒是3級. 

當要執行一個新的動作的時候, 比如攻擊的時候突然被踢倒. 會先比較2個動作的鎖的級別. 如果后面動作的級別大于之前動作的級別. 就會打破之前的鎖, 執行新的動作. 反之會無視新的動作. 比如攻擊的時候移動和跳躍都是沒用的.

原文鏈接：http://www.alloyteam.com/2012/05/html5-streetfighter-demo/