偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

HTML 5街頭霸王游戲(開放源碼)

開發(fā) 前端
每天的業(yè)余時間不太固定, 有時候一天能寫三小時, 有時候一天能寫三分鐘. 代碼也寫的相當潦草. 總的來說有點虎頭蛇尾。

[[78619]]

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

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

主機控制鍵:

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

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

特殊技能: 下→前→拳: 波動拳, 下→后→腿:旋風(fēng)腿, 前→下→前→拳:升龍拳

副機(小鍵盤):

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

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

特殊技能: 下→前→拳: 波動拳, 下→后→腿:旋風(fēng)腿, 前→下→前→拳:升龍拳

其他:

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

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

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

開發(fā)過程介紹

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

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

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

Class.js   創(chuàng)建類和對象.

Game.js   游戲入口文件.

Map.js    繪制地圖.

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

Interface.js 各種接口

Main.js    負責游戲邏輯

Ai.js      Ai

Timer.js   全局定時器

Class.js.

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

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

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

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

#p#

  1. var Hero = Class.create( function( name ){      
  2. this.name =  name;       
  3. } , {       
  4. addSkill: function(  skill ){       
  5. .......      
  6. }       
  7. })       
  8. var hero1 = Hero.getInstance(  "半人馬酋長"  );     
  9. hero1.addSkill(  "六級跳大"  );      
  10. var hero2 = Hero.getInstance(  "山嶺巨人"  )       
  11. hero2.addSkill(  "六級跳大"  )       
  12. var hero3 = Hero.getInstance(  "黑暗游俠"  );       
  13. hero3.addSkill(  "六級跳大">"  );   

Timer.js

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

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

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

二是為了統(tǒng)一管理, 比如方便的實現(xiàn)暫停功能.

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

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

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

Interface.js

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

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

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

上帝創(chuàng)造生命的時候, 沒有讓腔腸動物和環(huán)節(jié)動物實現(xiàn)眼睛的接口.

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

接口在未被聲明之前, 只是一個普通的函數(shù), 沒有構(gòu)造器, 沒有prototype. 基本不占內(nèi)存開銷. 

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

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

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

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

Event: 一個簡單的自定義事件機制, 以便在Animate,Frame和碰撞檢測的時候?qū)崿F(xiàn)有限狀態(tài)機.

Lock: 動作鎖.

Queue: 一個簡單隊列機制. 

StatusManage: 管理精靈的各種狀態(tài).

Shadow: 精靈的陰影.

Animate: 移動.

SpiritFrames: 精靈的動畫幀.

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

Collision: 檢測碰撞.

AttackEffect: 攻擊效果.

Audio: 音效.

Main.js

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

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

Ai.js

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

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

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

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

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

  1. If ( isJump ){       
  2. If ( move ) return false;       
  3. }else if( isAttack ){       
  4. If ( move || jump ) return false;       
  5. }else if ( fall_down ){       
  6. If ( move || jump || attack ) return false;       
  7. }...   

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

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

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

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

責任編輯:張偉 來源: 騰訊Web前端
相關(guān)推薦

2011-04-11 13:49:57

JavaScript

2013-09-17 15:46:47

惠普開放源碼云計算

2009-03-31 08:27:18

谷歌美女感情紐帶

2021-01-22 15:49:55

低代碼開源UBML

2011-08-01 09:15:25

惠普OpenStack云端建構(gòu)

2011-08-01 13:32:22

惠普OpenStack云端架構(gòu)

2009-04-20 08:38:04

Symbian諾基亞開源

2013-11-26 17:47:11

開放源碼開源微軟

2012-10-09 10:43:19

開發(fā)者開放源碼

2009-02-04 17:33:20

ibmdw開放源代碼

2011-12-08 20:23:11

BlackBerry

2009-12-11 09:06:37

Windows 7下載工具

2009-07-10 09:13:00

SymbianNokia開源

2020-01-13 08:15:01

Sweet Home 室內(nèi)設(shè)計系統(tǒng)應(yīng)用

2009-02-07 13:12:29

VMware View桌面虛擬化VMware

2022-06-22 07:54:35

OSS源碼軟件

2018-09-11 11:07:00

2011-08-08 15:21:04

筆記本評測

2012-03-16 09:35:52

HTML 5

2010-01-21 13:34:31

HTML 5Youtube
點贊
收藏

51CTO技術(shù)棧公眾號