前言

上文中我們實(shí)現(xiàn)了“玩家控制炸彈人”的功能，本文將實(shí)現(xiàn)碰撞檢測(cè)，讓炸彈人不能穿過墻。在實(shí)現(xiàn)的過程中會(huì)發(fā)現(xiàn)炸彈人移動(dòng)的問題，然后會(huì)通過設(shè)置移動(dòng)步長來解決。

說明

名詞解釋

• 具體狀態(tài)類
  指應(yīng)用于炸彈人移動(dòng)狀態(tài)的狀態(tài)模式的ConcreState角色的類。這里具體包括WalkLeftState、WalkRightState、WalkUpState、WalkDownState、StandLeftState等類。

本文目的

實(shí)現(xiàn)碰撞檢測(cè)

本文主要內(nèi)容

• 開發(fā)策略
• 初步實(shí)現(xiàn)碰撞檢測(cè)
• 設(shè)置移動(dòng)步長
• 繼續(xù)完成碰撞檢測(cè)
• 重構(gòu)
• 本文最終領(lǐng)域模型
• 高層劃分
• 演示
• 本文參考資料

回顧上文更新后的領(lǐng)域模型

查看大圖

對(duì)領(lǐng)域模型進(jìn)行思考

重構(gòu)PlayerSprite

重構(gòu)前代碼

(function () {var PlayerSprite = YYC.Class({//供子類構(gòu)造函數(shù)中調(diào)用 Init: function (data) {this.x = data.x;this.y = data.y;this.minX = data.minX;this.maxX = data.maxX;this.minY = data.minY;this.maxY = data.maxY;this.defaultAnimId = data.defaultAnimId;this.anims = data.anims;this.walkSpeed = data.walkSpeed;this._context = new Context(this);},Private: {_context: null,_setCoordinate: function (deltaTime) {this.x = this.x + this.speedX * deltaTime;this.y = this.y + this.speedY * deltaTime;this._limitMove();},_limitMove: function () {this.x = Math.max(this.minX, Math.min(this.x, this.maxX));this.y = Math.max(this.minY, Math.min(this.y, this.maxY));},_getCurrentState: function () {var currentState = null;switch (this.defaultAnimId) {case "stand_right":currentState = Context.standRightState;break;case "stand_left":currentState = Context.standLeftState;break;case "stand_down":currentState = Context.standDownState;break;case "stand_up":currentState = Context.standUpState;break;case "walk_down":currentState = Context.walkDownState;break;case "walk_up":currentState = Context.walkUpState;break;case "walk_right":currentState = Context.walkRightState;break;case "walk_left":currentState = Context.walkLeftState;break;default:throw new Error("未知的狀態(tài)");break;};return currentState;}},Public: {//精靈的坐標(biāo)x: 0,y: 0,//精靈的速度walkSpeed: 0,speedX: 0,speedY: 0,//精靈的坐標(biāo)區(qū)間minX: 0,maxX: 9999,minY: 0,maxY: 9999,anims: null,//默認(rèn)的Animation的Id , string類型defaultAnimId: null,//當(dāng)前的Animation.currentAnim: null,init: function () {this._context.setPlayerState(this._getCurrentState());//設(shè)置當(dāng)前Animationthis.setAnim(this.defaultAnimId);},//重置當(dāng)前幀 resetCurrentFrame: function (index) {this.currentAnim && this.currentAnim.setCurrentFrame(index);},//設(shè)置當(dāng)前Animation, 參數(shù)為Animation的id, String類型 setAnim: function (animId) {this.currentAnim = this.anims[animId];},// 更新精靈當(dāng)前狀態(tài). update: function (deltaTime) {//每次循環(huán),改變一下繪制的坐標(biāo)this._setCoordinate(deltaTime);if (this.currentAnim) {this.currentAnim.update(deltaTime);}},draw: function (context) {var frame = null;if (this.currentAnim) {frame = this.currentAnim.getCurrentFrame();context.drawImage(this.currentAnim.getImg(), frame.x, frame.y, frame.width, frame.height, this.x, this.y, frame.imgWidth, frame.imgHeight);}},clear: function (context) {var frame = null;if (this.currentAnim) {frame = this.currentAnim.getCurrentFrame();context.clearRect(0, 0, bomberConfig.canvas.WIDTH, bomberConfig.canvas.HEIGHT);}},handleNext: function () {this._context.walkLeft();this._context.walkRight();this._context.walkUp();this._context.walkDown();this._context.stand();}}});window.PlayerSprite = PlayerSprite; }()); View Code

　　handleNext改名為changeDir

反思handleNext方法。從方法名來看，它的職責(zé)應(yīng)該為處理本次循環(huán)的所有邏輯。然而，經(jīng)過數(shù)次重構(gòu)后，現(xiàn)在handleNext的職責(zé)只是調(diào)用狀態(tài)類的方法，更具體的來說，它的職責(zé)為判斷和設(shè)置炸彈人移動(dòng)方向。

因此，應(yīng)該將handleNext改名為changeDir，從而能夠反映出它的職責(zé)。

　　從update方法中分離出move方法

再來審視update方法，發(fā)現(xiàn)它有兩個(gè)職責(zé)：

• 更新坐標(biāo)
• 更新動(dòng)畫

進(jìn)一步思考，此處“更新坐標(biāo)”的職責(zé)更抽象地來說應(yīng)該為"炸彈人移動(dòng)“的職責(zé)。應(yīng)該將其提出，形成move方法。然后去掉”__setCoordinate“方法，將其代碼直接寫到move方法中

　　刪除deltaTime

_setCoordinate: function (deltaTime) {this.x = this.x + this.speedX * deltaTime;this.y = this.y + this.speedY * deltaTime;this._limitMove();},

這里deltaTime其實(shí)沒有什么作用，因此將其刪除。

　　重構(gòu)后相關(guān)代碼

PlayerSprite

update: function (deltaTime) {if (this.currentAnim) {this.currentAnim.update(deltaTime);}},draw: function (context) {var frame = null;if (this.currentAnim) {frame = this.currentAnim.getCurrentFrame();context.drawImage(this.currentAnim.getImg(), frame.x, frame.y, frame.width, frame.height, this.x, this.y, frame.imgWidth, frame.imgHeight);}},clear: function (context) {var frame = null;if (this.currentAnim) {frame = this.currentAnim.getCurrentFrame();context.clearRect(0, 0, bomberConfig.canvas.WIDTH, bomberConfig.canvas.HEIGHT);}},move: function () {this.x = this.x + this.speedX;this.y = this.y + this.speedY;this._limitMove();},changeDir: function () {this._context.walkLeft();this._context.walkRight();this._context.walkUp();this._context.walkDown();this._context.stand();}

要對(duì)應(yīng)修改PlayerLayer

　　　　 __changeDir: function () {this.___iterator("changeDir");},___move: function () {this.___iterator("move");}, ...render: function () {if (this.P__isChange()) {this.clear(this.P__context);this.__changeDir();this.___move();this.___update();this.draw(this.P__context);this.P__setStateNormal();}}

分離speedX/speedY屬性的語義，提出“方向向量”概念dirX/dirY

狀態(tài)類WalkLeftState

walkLeft: function () {var sprite = null;if (window.keyState[keyCodeMap.A] === true) {sprite = this.P_context.sprite;sprite.speedX = -sprite.walkSpeed;sprite.speedY = 0;sprite.setAnim("walk_left");}},

目前是通過在具體狀態(tài)類中改變speedX/speedY的正負(fù)（如+sprite.walkSpeed或-sprite.walkSpeed），來實(shí)現(xiàn)炸彈人移動(dòng)方向的改變。因此，我發(fā)現(xiàn)speedX/speedY屬性實(shí)際上有兩個(gè)語義：

• 炸彈人移動(dòng)速度
• 炸彈人移動(dòng)方向

這樣會(huì)造成speed語義混淆，不便于閱讀和維護(hù)。因此，將“炸彈人移動(dòng)方向”提出來，形成新的屬性dirX/dirY，而speedX/speedY則保留“炸彈人移動(dòng)速度”語義。

　　重構(gòu)后相關(guān)代碼

PlayerSprite

dirX: 0,dirY: 0, ...move: function () {this.x = this.x + this.speedX * this.dirX;this.y = this.y + this.speedY * this.dirY;this._limitMove();},

WalkLeftState（其它具體狀態(tài)類也要做類似的修改）

walkLeft: function () {var sprite = null;if (window.keyState[keyCodeMap.A] === true) {sprite = this.P_context.sprite;sprite.dirX = -1;sprite.dirY = 0;sprite.setAnim("walk_left");}},

開發(fā)策略

首先查閱相關(guān)資料，確定碰撞檢測(cè)的方法，然后再實(shí)現(xiàn)炸彈人與地圖磚墻的碰撞檢測(cè)。

初步實(shí)現(xiàn)碰撞檢測(cè)

提出“碰撞檢測(cè)”的概念

在第2篇博文中提出了“碰撞檢測(cè)”的概念：

用于檢測(cè)炸彈人與磚墻、炸彈人與怪物等之間的碰撞。碰撞檢測(cè)包括矩形碰撞、多邊形碰撞等，一般使用矩形碰撞即可。

此處我采用矩形碰撞檢測(cè)。

增加地形數(shù)據(jù)TerrainData

首先，我們需要一個(gè)存儲(chǔ)地圖中哪些區(qū)域能夠通過，哪些區(qū)域不能通過的數(shù)據(jù)結(jié)構(gòu)。

通過參考地圖數(shù)據(jù)mapData，我決定數(shù)據(jù)結(jié)構(gòu)選用二維數(shù)組，且地形數(shù)組與地圖數(shù)組一一對(duì)應(yīng)。

相關(guān)代碼

地圖數(shù)據(jù)MapData

(function () {var ground = bomberConfig.map.type.GROUND,wall = bomberConfig.map.type.WALL;var mapData = [[ground, wall, ground, ground],[ground, ground, ground, ground],[ground, wall, ground, ground],[ground, wall, ground, ground]];window.mapData = mapData; }());

地形數(shù)據(jù)TerrainData

//地形數(shù)據(jù) (function () {//0表示可以通過，1表示不能通過var terrainData = [[0, 1, 0, 0],[0, 0, 0, 0],[0, 1, 0, 0],[0, 1, 0, 0]];window.terrainData = terrainData; }());

重構(gòu)TerrainData

受到MapData的啟示，可以在Config中加入地形數(shù)據(jù)的枚舉值（pass、stop），然后直接在TerrainData中使用枚舉值。這樣做有以下的好處：

• 增強(qiáng)可讀性
• 枚舉值放到Config中，方便統(tǒng)一管理

相關(guān)代碼

Config

map: { ...terrain: {pass: 0,stop: 1}},

TerrainData

//地形數(shù)據(jù) (function () {var pass = bomberConfig.map.terrain.pass,stop = bomberConfig.map.terrain.stop;var terrainData = [[pass, stop, pass, pass],[pass, pass, pass, pass],[pass, stop, pass, pass],[pass, stop, pass, pass]];window.terrainData = terrainData; }());

在PlayerSprite中實(shí)現(xiàn)矩形碰撞檢測(cè)

實(shí)現(xiàn)checkCollideWithMap方法：

_checkCollideWithMap: function () {var i1 = Math.floor((this.y) / bomberConfig.HEIGHT),i2 = Math.floor((this.y + bomberConfig.player.IMGHEIGHT - 1) / bomberConfig.HEIGHT),j1 = Math.floor((this.x) / bomberConfig.WIDTH),j2 = Math.floor((this.x + bomberConfig.player.IMGWIDTH - 1) / bomberConfig.WIDTH),terrainData = window.terrainData,pass = bomberConfig.map.terrain.pass,stop = bomberConfig.map.terrain.stop;if (terrainData[i1][j1] === pass && terrainData[i1][j2] === pass&& terrainData[i2][j1] === pass && terrainData[i2][j2] === pass) {return false;}else {return true;}},

在move中判斷：

move: function () {var origin_x = this.x,origin_y = this.y;this.x = this.x + this.speedX * this.dirX;this.y = this.y + this.speedY * this.dirY;this._limitMove();if (this._checkCollideWithMap()) {this.x = origin_x;this.y = origin_y;} },

領(lǐng)域模型

?

設(shè)置移動(dòng)步長

發(fā)現(xiàn)問題

如果炸彈人每次移動(dòng)0.2個(gè)方格，炸彈人想通過兩個(gè)障礙物之間的空地，則炸彈人所在矩形區(qū)域必須與空地區(qū)域平行時(shí)才能通過。這通常導(dǎo)致玩家需要調(diào)整多次才能順利通過。

如圖所示：

?

不能通過

?

可以通過

引入”移動(dòng)步長“概念　　

結(jié)合參考資料”html5游戲開發(fā)-零基礎(chǔ)開發(fā)RPG游戲-開源講座(二)-跑起來吧英雄“，這里可以引出“移動(dòng)步長”的概念：

即炸彈人一次移動(dòng)一個(gè)地圖方格（炸彈人一次會(huì)移動(dòng)多步）。即如果一個(gè)方格長為10px，而游戲每次主循環(huán)輪詢時(shí)炸彈人移動(dòng)2px，則炸彈人一次需要移動(dòng)5步。在炸彈人的一個(gè)移動(dòng)步長完成之前，玩家不能操作炸彈人，直到炸彈人完成一個(gè)移動(dòng)步長（即移動(dòng)了一個(gè)方格），玩家才能操作炸彈人。

實(shí)現(xiàn)移動(dòng)步長

提出概念

這里先提出以下概念：

• step

移動(dòng)步數(shù)，炸彈人移動(dòng)一個(gè)方格需要的步數(shù)

• completeOneMove（該標(biāo)志會(huì)在后面重構(gòu)中被刪除）

炸彈人完成一個(gè)移動(dòng)步長的標(biāo)志

• moving

炸彈人正在移動(dòng)的標(biāo)志

• moveIndex

炸彈人在一次移動(dòng)步長中已經(jīng)移動(dòng)的次數(shù)

具體實(shí)現(xiàn)

首先在游戲開始時(shí)，計(jì)算一次炸彈人移動(dòng)一個(gè)方格需要的步數(shù)；然后在移動(dòng)前，先判斷是否完成一次移動(dòng)步長，如果正在移動(dòng)且沒有完成一次步長，則moveIndex加1；在移動(dòng)后，判斷該次移動(dòng)是否完成移動(dòng)步長，并相應(yīng)更新移動(dòng)標(biāo)志和moveIndex。

重構(gòu)

將“moveIndex加1”移到狀態(tài)類中

具體狀態(tài)類的職責(zé)為：負(fù)責(zé)本狀態(tài)的邏輯以及決定狀態(tài)過渡。“moveIndex加1”這個(gè)職責(zé)屬于“本狀態(tài)的邏輯”，因此應(yīng)該將其移到具體狀態(tài)類中，封裝為addIndex方法。

將按鍵判斷移到PlayerSprite中

?“按鍵判斷”是狀態(tài)轉(zhuǎn)換事件的判斷，這里因?yàn)檎◤椚瞬煌瑺顟B(tài)轉(zhuǎn)換為同一狀態(tài)的觸發(fā)事件相同，所以可以將其移到上一層的客戶端（調(diào)用具體狀態(tài)類的地方）中，即移到PlayerSprite的changeDir方法中。具體分析詳見Javascript設(shè)計(jì)模式之我見：狀態(tài)模式中的“將觸發(fā)狀態(tài)的事件判斷移到Warrior類中”。

相關(guān)代碼

PlayerSprite

... _computeCoordinate: function () {this.x = this.x + this.speedX * this.dirX;this.y = this.y + this.speedY * this.dirY;this._limitMove();//因?yàn)橐苿?dòng)次數(shù)是向上取整，可能會(huì)造成移動(dòng)次數(shù)偏多（如stepX為2.5，取整則stepX為3），//坐標(biāo)可能會(huì)偏大（大于bomberConfig.WIDTH / bomberConfig.HEIGHT的整數(shù)倍），//因此此處需要向下取整。if (this.completeOneMove) {this.x -= this.x % bomberConfig.WIDTH;this.y -= this.y % bomberConfig.HEIGHT;}},//計(jì)算移動(dòng)次數(shù)_computeStep: function () {this.stepX = Math.ceil(bomberConfig.WIDTH / this.speedX);this.stepY = Math.ceil(bomberConfig.HEIGHT / this.speedY);},_allKeyUp: function () {return window.keyState[keyCodeMap.A] === false && window.keyState[keyCodeMap.D] === false&& window.keyState[keyCodeMap.W] === false && window.keyState[keyCodeMap.S] === false;},_judgeCompleteOneMoveByIndex: function () {if (!this.moving) {return;}if (this.moveIndex_x >= this.stepX) {this.moveIndex_x = 0;this.completeOneMove = true;}else if (this.moveIndex_y >= this.stepY) {this.moveIndex_y = 0;this.completeOneMove = true;}else {this.completeOneMove = false;}},_judgeAndSetDir: function () {if (window.keyState[keyCodeMap.A] === true) {this._context.walkLeft();}else if (window.keyState[keyCodeMap.D] === true) {this._context.walkRight();}else if (window.keyState[keyCodeMap.W] === true) {this._context.walkUp();}else if (window.keyState[keyCodeMap.S] === true) {this._context.walkDown();}} ...//一次移動(dòng)步長中的需要移動(dòng)的次數(shù)stepX: 0,stepY: 0,//一次移動(dòng)步長中已經(jīng)移動(dòng)的次數(shù)moveIndex_x: 0,moveIndex_y: 0,//是否正在移動(dòng)標(biāo)志moving: false,//完成一次移動(dòng)標(biāo)志completeOneMove: false,init: function () {this._context.setPlayerState(this._getCurrentState());this._computeStep();this.setAnim(this.defaultAnimId);}, ...move: function () {this._judgeCompleteOneMoveByIndex();this._computeCoordinate();},changeDir: function () {if (!this.completeOneMove && this.moving) {this._context.addIndex();return;}if (this._allKeyUp()) {this._context.stand();}else {this._judgeAndSetDir();}}
...

Context

(function () {var Context = YYC.Class({Init: function (sprite) {this.sprite = sprite;},Private: {_state: null},Public: {sprite: null,setPlayerState: function (state) {this._state = state;this._state.setContext(this);},walkLeft: function () {this._state.walkLeft();},walkRight: function () {this._state.walkRight();},walkUp: function () {this._state.walkUp();},walkDown: function () {this._state.walkDown();},stand: function () {this._state.stand();},addIndex: function () {this._state.addIndex();}},Static: {walkLeftState: new WalkLeftState(),walkRightState: new WalkRightState(),walkUpState: new WalkUpState(),walkDownState: new WalkDownState(),standLeftState: new StandLeftState(),standRightState: new StandRightState(),standUpState: new StandUpState(),standDownState: new StandDownState()}});window.Context = Context; }());

WalkLeftState（此處只舉一個(gè)狀態(tài)類說明，其它狀態(tài)類與該類類似）:

...
　　　　　　　　walkLeft: function () {var sprite = this.P_context.sprite;sprite.dirX = -1;sprite.dirY = 0;sprite.setAnim("walk_left");sprite.moving = true;this.addIndex();},addIndex: function () {this.P_context.sprite.moveIndex_x += 1;}
...

繼續(xù)完成碰撞檢測(cè)

對(duì)地圖障礙物檢測(cè)進(jìn)行了修改，并將碰撞檢測(cè)和邊界檢測(cè)移到具體狀態(tài)類中。

相關(guān)代碼

WalkLeftState（此處只舉一個(gè)狀態(tài)類說明，其它狀態(tài)類與該類類似）

... walkLeft: function () {var sprite = this.P_context.sprite;sprite.setAnim("walk_left");if (!this.checkPassMap()) {sprite.moving = false;sprite.dirX = 0;return;}sprite.dirX = -1;sprite.dirY = 0;sprite.moving = true;this.addIndex(); }, ... //檢測(cè)是否可通過該地圖。可以通過返回true，不能通過返回false checkPassMap: function () {return !this.checkCollideWithBarrier(); }, checkCollideWithBarrier: function () {var pass = bomberConfig.map.terrain.pass,stop = bomberConfig.map.terrain.stop;//計(jì)算目的地地形數(shù)組下標(biāo)var target_x = this.P_context.sprite.x / bomberConfig.WIDTH - 1,target_y = this.P_context.sprite.y / bomberConfig.HEIGHT;//超出邊界if (target_x >= terrainData.length || target_y >= terrainData[0].length) {return true;}if (target_x < 0) {return true;}//碰撞if (window.terrainData[target_y][target_x] === stop) {return true;}return false; } ...

重構(gòu)

重構(gòu)PlayerSprite

將move移到狀態(tài)類中

PlayerSprite的move方法負(fù)責(zé)炸彈人的移動(dòng)，其應(yīng)該屬于具體狀態(tài)類的職責(zé)（負(fù)責(zé)本狀態(tài)的邏輯），故將PlayerSprite的move移到具體狀態(tài)類中。

進(jìn)一步分析

將PlayerSprite的move移到具體狀態(tài)類中，從職責(zé)上來進(jìn)一步分析，實(shí)質(zhì)是將“炸彈人移動(dòng)”的職責(zé)分散到各個(gè)具體狀態(tài)類中了（如WalkLeftState、WalkRightState只負(fù)責(zé)X方向的移動(dòng)，WalkUpState、WalkDownState只負(fù)責(zé)Y方向的移動(dòng)）

優(yōu)點(diǎn)

增加了細(xì)粒度的控制。可以控制各個(gè)具體狀態(tài)類下炸彈人的移動(dòng)。

缺點(diǎn)

不好統(tǒng)一管理。當(dāng)想修改“炸彈人移動(dòng)”的邏輯時(shí)，可能需要修改每個(gè)具體狀態(tài)類的move。

不過這個(gè)缺點(diǎn)可以在后面的提取具體狀態(tài)類的基類的重構(gòu)中解決。因?yàn)樵撝貥?gòu)會(huì)將具體狀態(tài)類中“炸彈人移動(dòng)”的職責(zé)匯聚到基類中。

重構(gòu)addIndex

現(xiàn)在PlayerSprite -> changeDir中不用調(diào)用addIndex方法了，可以直接在具體狀態(tài)類的move方法中調(diào)用。

這樣做的好處是具體狀態(tài)類不用再公開addIndex方法了，而是將其私有化。

為什么把公有方法addIndex改為私有方法比較好？

這是因?yàn)楦膭?dòng)一個(gè)類的私有成員時(shí)，只會(huì)影響到該類，而不會(huì)影響到與該類關(guān)聯(lián)的其它類；而改動(dòng)公有成員則可能會(huì)影響與之關(guān)聯(lián)的其它類。特別當(dāng)我們是在創(chuàng)建供別人使用的類庫時(shí)，如果發(fā)布后再來修改公有成員，會(huì)對(duì)很多人造成影響！這也是符合“高內(nèi)聚低耦合”的思想。

我們應(yīng)該對(duì)公有權(quán)限保持警惕的態(tài)度，能設(shè)成私有的就私有，只公開必要的接口成員。

相關(guān)代碼

PlayerSprite

move: function () {this._context.move();},

WalkLeftState（WalkRightState與之類似）

move: function () {if (this.P_context.sprite.moving) {this.addIndex();}this.__judgeCompleteOneMoveByIndex();this.__computeCoordinate();},__addIndex: function(){this.P_context.sprite.moveIndex_x += 1;},__judgeCompleteOneMoveByIndex: function () {var sprite = this.P_context.sprite;if (!sprite.moving) {return;}if (sprite.moveIndex_x >= sprite.stepX) {sprite.moveIndex_x = 0;sprite.completeOneMove = true;}else {sprite.completeOneMove = false;}},__computeCoordinate: function () {var sprite = this.P_context.sprite;sprite.x = sprite.x + sprite.speedX * sprite.dirX;//因?yàn)橐苿?dòng)次數(shù)是向上取整，可能會(huì)造成移動(dòng)次數(shù)偏多（如stepX為2.5，取整則stepX為3），//坐標(biāo)可能會(huì)偏大（大于bomberConfig.WIDTH / bomberConfig.HEIGHT的整數(shù)倍），//因此此處需要向下取整。//x、y為bomberConfig.WIDTH/bomberConfig.HEIGHT的整數(shù)倍（向下取整）if (sprite.completeOneMove) {sprite.x -= sprite.x % bomberConfig.WIDTH;}}

WalkUpState（WalkDownState與之類似）

move: function () {if (this.P_context.sprite.moving) {this.addIndex();}this.__judgeCompleteOneMoveByIndex();this.__computeCoordinate();},__addIndex: function(){this.P_context.sprite.moveIndex_y += 1;},__judgeCompleteOneMoveByIndex: function () {var sprite = this.P_context.sprite;if (!sprite.moving) {return;}if (sprite.moveIndex_y >= sprite.stepY) {sprite.moveIndex_y = 0;sprite.completeOneMove = true;}else {sprite.completeOneMove = false;}},__computeCoordinate: function () {var sprite = this.P_context.sprite;sprite.y = sprite.y + sprite.speedY * sprite.dirY;//因?yàn)橐苿?dòng)次數(shù)是向上取整，可能會(huì)造成移動(dòng)次數(shù)偏多（如stepX為2.5，取整則stepX為3），//坐標(biāo)可能會(huì)偏大（大于bomberConfig.WIDTH / bomberConfig.HEIGHT的整數(shù)倍），//因此此處需要向下取整。//x、y為bomberConfig.WIDTH/bomberConfig.HEIGHT的整數(shù)倍（向下取整）if (sprite.completeOneMove) {sprite.y -= sprite.y % bomberConfig.HEIGHT;}}

重構(gòu)狀態(tài)模式

讓我們來看看狀態(tài)類。

思路

我發(fā)現(xiàn)具體狀態(tài)類有很多重復(fù)的代碼，有些方法有很多相似之處。這促使我提煉出一個(gè)高層的共同模式。具體的方法就是提煉出基類，然后用模板模式，在子類中實(shí)現(xiàn)不同點(diǎn)。

提煉出WalkState、StandState

因此，我從WalkLeftState，WalkRightState，WalkDownState，WalkUpState中提煉出基類WalkState，從StandLeftState、StandRightState、StandDownState、StandUpState中提煉出基類StandState。

提煉出WalkState_X、WalkState_Y

我發(fā)現(xiàn)在WalkLeftState，WalkRightState中和WalkDownState，WalkUpState中，它們分別有共同的模式，而這共同模式不能提到WalkState中。因此，我又從WalkLeftState，WalkRightState中提煉出WalkState_X，WalkDownState，WalkUpState中提煉出WalkState_Y，然后讓W(xué)alkState_X和WalkState_Y繼承于WalkState。

狀態(tài)模式最新的領(lǐng)域模型

相關(guān)代碼

PlayerState

(function () {var PlayerState = YYC.AClass({Protected: {P_context: null},Public: {setContext: function (context) {this.P_context = context;}},Abstract: {stand: function () { },walkLeft: function () { },walkRight: function () { },walkUp: function () { },walkDown: function () { },move: function () { }}});window.PlayerState = PlayerState; }()); View Code

WalkState

(function () {var WalkState = YYC.AClass(PlayerState, {Protected: {//*子類可復(fù)用的代碼 P__checkMapAndSetDir: function () {var sprite = this.P_context.sprite;this.P__setDir();if (!this.__checkPassMap()) {sprite.moving = false;//sprite.dirX = 0;this.P__stop();}else {sprite.moving = true;}},Abstract: {P__setPlayerState: function () { },//計(jì)算并返回目的地地形數(shù)組下標(biāo) P__computeTarget: function () { },//檢測(cè)是否超出地圖邊界。//超出返回true，否則返回false P__checkBorder: function () { },//設(shè)置方向 P__setDir: function () { },//停止 P__stop: function () { }}},Private: {//檢測(cè)是否可通過該地圖。可以通過返回true，不能通過返回false __checkPassMap: function () {//計(jì)算目的地地形數(shù)組下標(biāo)var target = this.P__computeTarget();if (this.P__checkBorder(target)) {return false;}return !this.__checkCollideWithBarrier(target);},//地形障礙物碰撞檢測(cè) __checkCollideWithBarrier: function (target) {var stop = bomberConfig.map.terrain.stop;//碰撞if (window.terrainData[target.y][target.x] === stop) {return true;}return false;}},Public: {stand: function () {this.P__setPlayerState();this.P_context.stand();this.P_context.sprite.resetCurrentFrame(0);this.P_context.sprite.stand = true;},Virtual: {walkLeft: function () {this.P_context.setPlayerState(Context.walkLeftState);this.P_context.walkLeft();this.P_context.sprite.resetCurrentFrame(0);},walkRight: function () {this.P_context.setPlayerState(Context.walkRightState);this.P_context.walkRight();this.P_context.sprite.resetCurrentFrame(0);},walkUp: function () {this.P_context.setPlayerState(Context.walkUpState);this.P_context.walkUp();this.P_context.sprite.resetCurrentFrame(0);},walkDown: function () {this.P_context.setPlayerState(Context.walkDownState);this.P_context.walkDown();this.P_context.sprite.resetCurrentFrame(0);}}},Abstract: {move: function () {}}});window.WalkState = WalkState; }()); View Code

WalkState_X

(function () {var WalkState_X = YYC.AClass(WalkState, {Protected: {},Private: {__judgeCompleteOneMoveByIndex: function () {var sprite = this.P_context.sprite;if (sprite.moveIndex_x >= sprite.stepX) {sprite.moveIndex_x = 0;sprite.moving = false;}else {sprite.moving = true;}},__computeCoordinate: function () {var sprite = this.P_context.sprite;sprite.x = sprite.x + sprite.speedX * sprite.dirX;},__roundingDown: function () {this.P_context.sprite.x -= this.P_context.sprite.x % bomberConfig.WIDTH;}},Public: {move: function () {if (!this.P_context.sprite.moving) {this.__roundingDown();return;}this.P_context.sprite.moveIndex_x += 1;this.__judgeCompleteOneMoveByIndex();this.__computeCoordinate();}},Abstract: {}});window.WalkState_X = WalkState_X; }()); View Code

WalkState_Y

(function () {var WalkState_Y = YYC.AClass(WalkState, {Protected: {},Private: {__judgeCompleteOneMoveByIndex: function () {var sprite = this.P_context.sprite;if (sprite.moveIndex_y >= sprite.stepY) {sprite.moveIndex_y = 0;sprite.moving = false;}else {sprite.moving = true;}},__computeCoordinate: function () {var sprite = this.P_context.sprite;sprite.y = sprite.y + sprite.speedY * sprite.dirY;},__roundingDown: function () {this.P_context.sprite.y -= this.P_context.sprite.y % bomberConfig.WIDTH;}},Public: {move: function () {if (!this.P_context.sprite.moving) {this.__roundingDown();return;}this.P_context.sprite.moveIndex_y += 1;this.__judgeCompleteOneMoveByIndex();this.__computeCoordinate();}},Abstract: {}});window.WalkState_Y = WalkState_Y; }()); View Code

WalkLeftState

(function () {var WalkLeftState = YYC.Class(WalkState_X, {Protected: {P__setPlayerState: function () {this.P_context.setPlayerState(Context.standLeftState);},P__computeTarget: function () {var sprite = this.P_context.sprite;return {x: sprite.x / window.bomberConfig.WIDTH - 1,y: sprite.y / window.bomberConfig.HEIGHT};},P__checkBorder: function (target) {if (target.x < 0) {return true;}return false;},P__setDir: function () {var sprite = this.P_context.sprite;sprite.setAnim("walk_left");sprite.dirX = -1;},P__stop: function () {var sprite = this.P_context.sprite;sprite.dirX = 0;}},Public: {walkLeft: function () {this.P__checkMapAndSetDir();}}});window.WalkLeftState = WalkLeftState; }()); View Code

WalkRightState

(function () {var WalkRightState = YYC.Class(WalkState_X, {Protected: {P__setPlayerState: function () {this.P_context.setPlayerState(Context.standRightState);},P__computeTarget: function () {var sprite = this.P_context.sprite;return {x: sprite.x / window.bomberConfig.WIDTH + 1,y: sprite.y / window.bomberConfig.HEIGHT};},P__checkBorder: function (target) {if (target.x >= window.terrainData[0].length) {return true;}return false;},P__setDir: function () {var sprite = this.P_context.sprite;sprite.setAnim("walk_right");sprite.dirX = 1;},P__stop: function () {var sprite = this.P_context.sprite;sprite.dirX = 0;}},Public: {walkRight: function () {this.P__checkMapAndSetDir();}}});window.WalkRightState = WalkRightState; }()); View Code

WalkDownState

(function () {var WalkDownState = YYC.Class(WalkState_Y, {Protected: {P__setPlayerState: function () {this.P_context.setPlayerState(Context.standDownState);},P__computeTarget: function () {var sprite = this.P_context.sprite;return {x: sprite.x / window.bomberConfig.WIDTH,y: sprite.y / window.bomberConfig.HEIGHT + 1};},P__checkBorder: function (target) {if (target.y >= window.terrainData.length) {return true;}return false;},P__setDir: function () {var sprite = this.P_context.sprite;sprite.setAnim("walk_down");sprite.dirY = 1;},P__stop: function () {var sprite = this.P_context.sprite;sprite.dirY = 0;}},Private: {},Public: {walkDown: function () {this.P__checkMapAndSetDir();}}});window.WalkDownState = WalkDownState; }()); View Code

WalkUpState

(function () {var WalkUpState = YYC.Class(WalkState_Y, {Protected: {P__setPlayerState: function () {this.P_context.setPlayerState(Context.standUpState);},P__computeTarget: function () {var sprite = this.P_context.sprite;return {x: sprite.x / window.bomberConfig.WIDTH,y: sprite.y / window.bomberConfig.HEIGHT - 1};},P__checkBorder: function (target) {if (target.y < 0) {return true;}return false;},P__setDir: function () {var sprite = this.P_context.sprite;sprite.setAnim("walk_up");sprite.dirY = -1;},P__stop: function () {var sprite = this.P_context.sprite;sprite.dirY = 0;}},Public: {walkUp: function () {this.P__checkMapAndSetDir();}}});window.WalkUpState = WalkUpState; }()); View Code

StandState

(function () {var StandState = YYC.AClass(PlayerState, {Protected: {},Public: {walkLeft: function () {this.P_context.sprite.resetCurrentFrame(0);this.P_context.setPlayerState(Context.walkLeftState);this.P_context.walkLeft();},walkRight: function () {this.P_context.sprite.resetCurrentFrame(0);this.P_context.setPlayerState(Context.walkRightState);this.P_context.walkRight();},walkUp: function () {this.P_context.sprite.resetCurrentFrame(0);this.P_context.setPlayerState(Context.walkUpState);this.P_context.walkUp();},walkDown: function () {this.P_context.sprite.resetCurrentFrame(0);this.P_context.setPlayerState(Context.walkDownState);this.P_context.walkDown();},move: function () {}},Abstract: {}});window.StandState = StandState; }());

StandLeftState

(function () {var StandLeftState = YYC.Class(StandState, {Public: {stand: function () {var sprite = this.P_context.sprite;sprite.dirX = 0;sprite.setAnim("stand_left");sprite.moving = false;}}});window.StandLeftState = StandLeftState; }());

StandRightState

(function () {var StandRightState = YYC.Class(StandState, {Public: {stand: function () {var sprite = this.P_context.sprite;sprite.dirX = 0;sprite.setAnim("stand_right");sprite.moving = false;}}});window.StandRightState = StandRightState; }());

StandDownState

(function () {var StandDownState = YYC.Class(StandState, {Public: {stand: function () {var sprite = this.P_context.sprite;sprite.dirY = 0;sprite.setAnim("stand_down");sprite.moving = false;}}});window.StandDownState = StandDownState; }());

StandUpState

(function () {var StandUpState = YYC.Class(StandState, {Public: {stand: function () {var sprite = this.P_context.sprite;sprite.dirY = 0;sprite.setAnim("stand_up");sprite.moving = false;}}});window.StandUpState = StandUpState; }());

重構(gòu)PlayerSprite

changeDir改名為setDir

該方法會(huì)在游戲主循環(huán)中調(diào)用，并不會(huì)每次輪詢時(shí)都改變炸彈人移動(dòng)方向，因此changDir這個(gè)方法名不合理，改為setDir更為合適。

刪除completeOneMove

現(xiàn)在可以不需要completeOneMove標(biāo)志了，故將其刪除。?

重構(gòu)后的PlayerSprite

(function () {var PlayerSprite = YYC.Class({Init: function (data) {//初始坐標(biāo)this.x = data.x;this.y = data.y;this.speedX = data.speedX;this.speedY = data.speedY;//x/y坐標(biāo)的最大值和最小值, 可用來限定移動(dòng)范圍.this.minX = data.minX;this.maxX = data.maxX;this.minY = data.minY;this.maxY = data.maxY;this.defaultAnimId = data.defaultAnimId;this.anims = data.anims;this.walkSpeed = data.walkSpeed;this.speedX = data.walkSpeed;this.speedY = data.walkSpeed;this._context = new Context(this);},Private: {//狀態(tài)模式上下文類_context: null,//更新幀動(dòng)畫 _updateFrame: function (deltaTime) {if (this.currentAnim) {this.currentAnim.update(deltaTime);}},_computeCoordinate: function () {this.x = this.x + this.speedX * this.dirX;this.y = this.y + this.speedY * this.dirY;//因?yàn)橐苿?dòng)次數(shù)是向上取整，可能會(huì)造成移動(dòng)次數(shù)偏多（如stepX為2.5，取整則stepX為3），//坐標(biāo)可能會(huì)偏大（大于bomberConfig.WIDTH / bomberConfig.HEIGHT的整數(shù)倍），//因此此處需要向下取整。//x、y為bomberConfig.WIDTH/bomberConfig.HEIGHT的整數(shù)倍（向下取整）if (this.completeOneMove) {this.x -= this.x % bomberConfig.WIDTH;this.y -= this.y % bomberConfig.HEIGHT;}},_getCurrentState: function () {var currentState = null;switch (this.defaultAnimId) {case "stand_right":currentState = Context.standRightState;break;case "stand_left":currentState = Context.standLeftState;break;case "stand_down":currentState = Context.standDownState;break;case "stand_up":currentState = Context.standUpState;break;case "walk_down":currentState = Context.walkDownState;break;case "walk_up":currentState = Context.walkUpState;break;case "walk_right":currentState = Context.walkRightState;break;case "walk_left":currentState = Context.walkLeftState;break;default:throw new Error("未知的狀態(tài)");break;};return currentState;},//計(jì)算移動(dòng)次數(shù) _computeStep: function () {this.stepX = Math.ceil(bomberConfig.WIDTH / this.speedX);this.stepY = Math.ceil(bomberConfig.HEIGHT / this.speedY);},_allKeyUp: function () {return window.keyState[keyCodeMap.A] === false && window.keyState[keyCodeMap.D] === false&& window.keyState[keyCodeMap.W] === false && window.keyState[keyCodeMap.S] === false;},_judgeCompleteOneMoveByIndex: function () {if (!this.moving) {return;}if (this.moveIndex_x >= this.stepX) {this.moveIndex_x = 0;this.completeOneMove = true;}else if (this.moveIndex_y >= this.stepY) {this.moveIndex_y = 0;this.completeOneMove = true;}else {this.completeOneMove = false;}},_judgeAndSetDir: function () {if (window.keyState[keyCodeMap.A] === true) {this._context.walkLeft();}else if (window.keyState[keyCodeMap.D] === true) {this._context.walkRight();}else if (window.keyState[keyCodeMap.W] === true) {this._context.walkUp();}else if (window.keyState[keyCodeMap.S] === true) {this._context.walkDown();}}},Public: {//精靈的坐標(biāo)x: 0,y: 0,//精靈的速度speedX: 0,speedY: 0,//精靈的坐標(biāo)區(qū)間minX: 0,maxX: 9999,minY: 0,maxY: 9999,//精靈包含的所有 Animation 集合. Object類型, 數(shù)據(jù)存放方式為" id : animation ".anims: null,//默認(rèn)的Animation的Id , string類型defaultAnimId: null,//當(dāng)前的Animation.currentAnim: null,//精靈的方向系數(shù)：//往下走dirY為正數(shù)，往上走dirY為負(fù)數(shù)；//往右走dirX為正數(shù)，往左走dirX為負(fù)數(shù)。dirX: 0,dirY: 0,//定義sprite走路速度的絕對(duì)值walkSpeed: 0,//一次移動(dòng)步長中的需要移動(dòng)的次數(shù)stepX: 0,stepY: 0,//一次移動(dòng)步長中已經(jīng)移動(dòng)的次數(shù)moveIndex_x: 0,moveIndex_y: 0,//是否正在移動(dòng)標(biāo)志moving: false,//站立標(biāo)志//用于解決調(diào)用WalkState.stand后，PlayerLayer.render中P__isChange返回false的問題//（不調(diào)用draw，從而仍會(huì)顯示精靈類walk的幀（而不會(huì)刷新為更新狀態(tài)后的精靈類stand的幀））。stand: false,//設(shè)置當(dāng)前Animation, 參數(shù)為Animation的id, String類型 setAnim: function (animId) {this.currentAnim = this.anims[animId];},//重置當(dāng)前幀 resetCurrentFrame: function (index) {this.currentAnim && this.currentAnim.setCurrentFrame(index);},init: function () {this._context.setPlayerState(this._getCurrentState());this._computeStep();//設(shè)置當(dāng)前Animationthis.setAnim(this.defaultAnimId);},// 更新精靈當(dāng)前狀態(tài) update: function (deltaTime) {this._updateFrame(deltaTime);},draw: function (context) {var frame = null;if (this.currentAnim) {frame = this.currentAnim.getCurrentFrame();context.drawImage(this.currentAnim.getImg(), frame.x, frame.y, frame.width, frame.height, this.x, this.y, frame.imgWidth, frame.imgHeight);}},clear: function (context) {var frame = null;if (this.currentAnim) {frame = this.currentAnim.getCurrentFrame();//直接清空畫布區(qū)域context.clearRect(0, 0, bomberConfig.canvas.WIDTH, bomberConfig.canvas.HEIGHT);}},move: function () {this._context.move();},setDir: function () {if (this.moving) {return;}if (this._allKeyUp()) {this._context.stand();}else {this._judgeAndSetDir();}}}});window.PlayerSprite = PlayerSprite; }()); View Code

本文最終領(lǐng)域模型

查看大圖

高層劃分

與上文相同，沒有增加新的包

層、包

對(duì)應(yīng)領(lǐng)域模型

• 輔助操作層
  • 控件包
    PreLoadImg
  • 配置包
    Config
• 用戶交互層
  • 入口包
    Main
• 業(yè)務(wù)邏輯層
  • 輔助邏輯
    • 工廠包
      BitmapFactory、LayerFactory、SpriteFactory
    • 事件管理包
      KeyState、KeyEventManager
  • 游戲主邏輯
    • 主邏輯包
      Game
  • 層管理
    • 層管理實(shí)現(xiàn)包
      PlayerLayerManager、MapLayerManager
    • 層管理抽象包
    • LayerManager
  • 層
    • 層實(shí)現(xiàn)包
      PlayerLayer、MapLayer
    • 層抽象包
      Layer
    • 集合包
      Collection
  • 精靈
    • 精靈包
      PlayerSprite、Context、PlayerState、WalkState、StandState、WalkState_X、WalkState_Y、StandLeftState、StandRightState、StandUpState、StandDownState、WalkLeftState、WalkRightState、WalkUpState、WalkDownState
    • 動(dòng)畫包
      Animation、GetSpriteData、SpriteData、GetFrames、FrameData
• 數(shù)據(jù)操作層
  • 地圖數(shù)據(jù)操作包
    MapDataOperate
  • 路徑數(shù)據(jù)操作包
    GetPath
  • 圖片數(shù)據(jù)操作包
    Bitmap
• 數(shù)據(jù)層
  • 地圖包
    MapData、TerrainData
  • 圖片路徑包
    ImgPathData

本文參考資料

html5游戲開發(fā)-零基礎(chǔ)開發(fā)RPG游戲-開源講座(二)-跑起來吧英雄

歡迎瀏覽上一篇博文：炸彈人游戲開發(fā)系列（5）：控制炸彈人移動(dòng)，引入狀態(tài)模式

歡迎瀏覽下一篇博文：炸彈人游戲開發(fā)系列（7）：加入敵人，使用A*算法尋路

轉(zhuǎn)載于:https://www.cnblogs.com/chaogex/p/3327097.html

總結(jié)

以上是生活随笔為你收集整理的炸弹人游戏开发系列（6）：实现碰撞检测，设置移动步长的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。