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

來源:互聯網
上載者:User

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

技術方面因為考慮到大部分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】


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。