經典格鬥遊戲《街頭霸王》的JavaScript實現

其實這種練習的結果不是很重要，主要是體會其中的過程，雖然大部分的時間是在痛苦中渡過，但也是有很多收穫的，同時也暴露出很多技術方面的不足，也為以後的學習明確了一些目標。

技術方面因為考慮到大部分IE使用者(而且是非IE9)，所以沒有用HTML5的canvas，用的div的方式處理的，這樣挑戰也相對大了一些，

不過確實，效能上還是不理想，IE下的表現還是比較糟糕(特別是IE6。。。恩。。。- -!)。

目前相容IE6/7/8(理論上也相容IE9，只是沒有測試)，safari，FF3.5+(因為FF2.0/3.0不支援水平翻轉的樣式。。- -!)，Chrome，Opera。

自己寫了一個小型架構，包括了開發流程和js類庫，類庫用了OOP Like的方式包了個文法糖衣，看上去還算是像個OOP的樣子，不過因為為了追求“優雅”，直接擴充了function的prototype，所以不建議在其它地方使用。

架構開發的整體思路就是用PHP作後端代碼合并輸出，js代碼裡用$import去建立了各個代碼檔案之間的關係，然後頁面引用合并js的PHP檔案，該模式需要在本地建立一個web伺服器才能作測試，並且需要設定hosts為 127.0.0.1 aralork

遊戲說明

遊戲是一個Demo版本，實現了核心的整體流程。遊戲分為“單人遊戲”模式、“雙人對戰”模式和“練習模式”三種玩法，不過其實實現都是一樣，只是改改初始化的參數而已，挺坑爹的。。。

遊戲只需要鍵盤操作，不需要滑鼠，

菜單的操作是方向鍵移動，Enter鍵選擇，ESC鍵取消;

玩家1的操作:

上：W，下：S，左：A，右：D，拳：J / K / L，腿：U / I / O

玩家2的操作:

上：↑，下：↓，左：←，右：→，拳：小鍵盤 1 / 2 / 3，腿：小鍵盤 4 / 5 / 6

這裡的 ↑ ↓ ← → 代表方向鍵。

遊戲截圖

 

其它說明

目前遊戲還有很多BUG，所以玩的時候要有心理準備，不要被怪異的情況所震驚。。。

遊戲裡的素材取自於CAPCOM公司的《街霸II》，著作權歸CAPCOM公司所有。

大家有什麼問題都可以在這裡回複，歡迎大家拍磚，謝謝。

遊戲示範地址

完整原始碼下載
 

原文連結：http://www.cnblogs.com/Random/archive/2011/04/11/2011962.html

【編輯精選】

1. 九個令人驚歎的HTML 5和JavaScript實驗
2. UglifyJS有個超贊的JavaScript解析器
3. 對JavaScript中call和apply的理解
4. 8個令人驚歎的JavaScript效果的網站
5. 再談JavaScript圖片預先載入技術

【責任編輯：陳貽新 TEL：（010）68476606】