摘要:文章首發于我的博客前言上一篇文章小恐龍游戲源碼探究八奔跑的小恐龍實現了小恐龍的繪制以及鍵盤對小恐龍的控制,這一篇文章中將實現游戲的碰撞檢測。
文章首發于我的 GitHub 博客前言
上一篇文章:《Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍》實現了小恐龍的繪制以及鍵盤對小恐龍的控制,這一篇文章中將實現游戲的碰撞檢測。
碰撞檢測原理這個游戲采用的檢測方法是盒子碰撞,這種檢測方法最大的好處就是簡單,但是缺點是不夠精確。
首先,如果將小恐龍和障礙物分別看作兩個大的盒子,那么進行碰撞檢測的效果如下:
可以看出,兩個盒子雖然有重疊部分,但是實際小恐龍并沒有和障礙物相撞。
所以想要進行更精確的檢測,需要把物體拆分成多個較小的盒子。例如:
但是拆分的時候也不能過于細致,否則運算的時候,很影響性能。
這個游戲中所進行的必要拆分如圖所示:
這里值得一提的是,當小恐龍俯身時,只需要將其拆成一個大的盒子。因為當小恐龍俯身時,可以產生碰撞的部分只有前面,而在小恐龍前面碰撞一定會碰到它的頭部。畢竟現在這個游戲中還沒有那么矮小的障礙物,以至于剛好碰到小恐龍俯身時的下巴。
這就提示我們,如果想要對游戲進行擴展,添加新的障礙物,就要考慮到小恐龍當前的碰撞盒子是否需要進行調整,要確保當前的碰撞盒子可以正確檢測出所有情況。
生成碰撞盒子游戲中使用 CollisionBox 類來生成碰撞盒子:
/** * 用于生成碰撞盒子 * @param {Number} x X 坐標 * @param {Number} y Y坐標 * @param {Number} w 寬度 * @param {Number} h 高度 */ function CollisionBox(x, y, w, h) { this.x = x; this.y = y; this.width = w; this.height = h; };
小恐龍的碰撞盒子如下:
// 小恐龍的碰撞盒子 Trex.collisionBoxes = { DUCKING: [ new CollisionBox(1, 18, 55, 25) ], RUNNING: [ new CollisionBox(22, 0, 17, 16), new CollisionBox(1, 18, 30, 9), new CollisionBox(10, 35, 14, 8), new CollisionBox(1, 24, 29, 5), new CollisionBox(5, 30, 21, 4), new CollisionBox(9, 34, 15, 4) ] };
障礙物的碰撞盒子如下:
Obstacle.types = [{ type: "CACTUS_SMALL", // 小仙人掌 width: 17, height: 35, yPos: 105, // 在 canvas 上的 y 坐標 multipleSpeed: 4, minGap: 120, // 最小間距 minSpeed: 0, // 最低速度 + collisionBoxes: [ // 碰撞盒子 + new CollisionBox(0, 7, 5, 27), + new CollisionBox(4, 0, 6, 34), + new CollisionBox(10, 4, 7, 14), + ], }, { type: "CACTUS_LARGE", // 大仙人掌 width: 25, height: 50, yPos: 90, multipleSpeed: 7, minGap: 120, minSpeed: 0, + collisionBoxes: [ // 碰撞盒子 + new CollisionBox(0, 12, 7, 38), + new CollisionBox(8, 0, 7, 49), + new CollisionBox(13, 10, 10, 38), + ], }, { type: "PTERODACTYL", // 翼龍 width: 46, height: 40, yPos: [ 100, 75, 50 ], // y 坐標不固定 multipleSpeed: 999, minSpeed: 8.5, minGap: 150, numFrames: 2, // 兩個動畫幀 frameRate: 1000 / 6, // 幀率(一幀的時間) speedOffset: 0.8, // 速度修正 + collisionBoxes: [ // 碰撞盒子 + new CollisionBox(15, 15, 16, 5), + new CollisionBox(18, 21, 24, 6), + new CollisionBox(2, 14, 4, 3), + new CollisionBox(6, 10, 4, 7), + new CollisionBox(10, 8, 6, 9), + ], }];添加碰撞盒子
在 Obstacle 類上添加屬性:
function Obstacle(canvas, type, spriteImgPos, dimensions, gapCoefficient, speed, opt_xOffset) { //... + this.collisionBoxes = []; // 存儲碰撞盒子 // ... }
添加方法,用于拷貝障礙物的碰撞盒子:
Obstacle.prototype = { // 復制碰撞盒子 cloneCollisionBoxes: function() { var collisionBoxes = this.typeConfig.collisionBoxes; for (var i = collisionBoxes.length - 1; i >= 0; i--) { this.collisionBoxes[i] = new CollisionBox(collisionBoxes[i].x, collisionBoxes[i].y, collisionBoxes[i].width, collisionBoxes[i].height); } }, };
然后,調用這個方法來初始化障礙物的碰撞盒子:
Obstacle.prototype = { init: function () { + this.cloneCollisionBoxes(); // ... }, };
這里需要對仙人掌中間的碰撞盒子進行調整:
Obstacle.prototype = { init: function () { // ... + // 調整中間的碰撞盒子的大小 + // ____ ______ ________ + // _| |-| _| |-| _| |-| + // | |<->| | | |<--->| | | |<----->| | + // | | 1 | | | | 2 | | | | 3 | | + // |_|___|_| |_|_____|_| |_|_______|_| + // + if (this.size > 1) { + this.collisionBoxes[1].width = this.width - this.collisionBoxes[0].width - + this.collisionBoxes[2].width; + this.collisionBoxes[2].x = this.width - this.collisionBoxes[2].width; + } // ... }, };碰撞檢測
首先,檢測矩形四個邊的相對位置,來判斷兩個矩形是否相交:
/** * 比較兩個矩形是否相交 * @param {CollisionBox} tRexBox 小恐龍的碰撞盒子 * @param {CollisionBox} obstacleBox 障礙物的碰撞盒子 */ function boxCompare(tRexBox, obstacleBox) { var crashed = false; // 兩個矩形相交 if (tRexBox.x < obstacleBox.x + obstacleBox.width && tRexBox.x + tRexBox.width > obstacleBox.x && tRexBox.y < obstacleBox.y + obstacleBox.height && tRexBox.height + tRexBox.y > obstacleBox.y) { crashed = true; } return crashed; };
然后調用這個方法,判斷小恐龍和障礙物是否碰撞的邏輯如下:
/** * 檢測盒子是否碰撞 * @param {Object} obstacle 障礙物 * @param {Object} tRex 小恐龍 * @param {HTMLCanvasContext} opt_canvasCtx 畫布上下文 */ function checkForCollision(obstacle, tRex, opt_canvasCtx) { // 調整碰撞盒子的邊界,因為小恐龍和障礙物有 1 像素的白邊 var tRexBox = new CollisionBox( // 小恐龍最外層的碰撞盒子 tRex.xPos + 1, tRex.yPos + 1, tRex.config.WIDTH - 2, tRex.config.HEIGHT - 2); var obstacleBox = new CollisionBox( // 障礙物最外層的碰撞盒子 obstacle.xPos + 1, obstacle.yPos + 1, obstacle.typeConfig.width * obstacle.size - 2, obstacle.typeConfig.height - 2); // 繪制調試邊框 if (opt_canvasCtx) { drawCollisionBoxes(opt_canvasCtx, tRexBox, obstacleBox); } // 檢查最外層的盒子是否碰撞 if (boxCompare(tRexBox, obstacleBox)) { var collisionBoxes = obstacle.collisionBoxes; // 小恐龍有兩種碰撞盒子,分別對應小恐龍站立狀態和低頭狀態 var tRexCollisionBoxes = tRex.ducking ? Trex.collisionBoxes.DUCKING : Trex.collisionBoxes.RUNNING; // 檢測里面小的盒子是否碰撞 for (var t = 0; t < tRexCollisionBoxes.length; t++) { for (var i = 0; i < collisionBoxes.length; i++) { // 調整碰撞盒子的實際位置(除去小恐龍和障礙物上 1 像素的白邊) var adjTrexBox = createAdjustedCollisionBox(tRexCollisionBoxes[t], tRexBox); var adjObstacleBox = createAdjustedCollisionBox(collisionBoxes[i], obstacleBox); var crashed = boxCompare(adjTrexBox, adjObstacleBox); // 繪制調試邊框 if (opt_canvasCtx) { drawCollisionBoxes(opt_canvasCtx, adjTrexBox, adjObstacleBox); } if (crashed) { return [adjTrexBox, adjObstacleBox]; } } } } return false; }; /** * 調整碰撞盒子 * @param {!CollisionBox} box 原始的盒子 * @param {!CollisionBox} adjustment 要調整成的盒子 * @return {CollisionBox} 被調整的盒子對象 */ function createAdjustedCollisionBox(box, adjustment) { return new CollisionBox( box.x + adjustment.x, box.y + adjustment.y, box.width, box.height); }; /** * 繪制碰撞盒子的邊框 * @param {HTMLCanvasContext} canvasCtx canvas 上下文 * @param {CollisionBox} tRexBox 小恐龍的碰撞盒子 * @param {CollisionBox} obstacleBox 障礙物的碰撞盒子 */ function drawCollisionBoxes(canvasCtx, tRexBox, obstacleBox) { canvasCtx.save(); canvasCtx.strokeStyle = "#f00"; canvasCtx.strokeRect(tRexBox.x, tRexBox.y, tRexBox.width, tRexBox.height); canvasCtx.strokeStyle = "#0f0"; canvasCtx.strokeRect(obstacleBox.x, obstacleBox.y, obstacleBox.width, obstacleBox.height); canvasCtx.restore(); };
其中 drawCollisionBoxes 方法是 debug 時用的,用于顯示碰撞盒子的邊框。
上面的代碼中,對碰撞檢測的計算進行了優化:首先判斷小恐龍和障礙物最外層的盒子有沒有碰撞,當它們最外層的盒子碰撞后,再計算里面的小盒子是否碰撞。這樣和直接計算所有盒子是否碰撞比起來,性能要好很多。
然后,調用 checkForCollision 方法:
Runner.prototype = { update: function () { // ... if (this.playing) { // ... + // 碰撞檢測 + var collision = hasObstacles && + checkForCollision(this.horizon.obstacles[0], this.tRex, this.ctx); // ... } // ... }, };
效果如下:
可以看到碰撞檢測是實現了,但是小恐龍遮住了顯示出來的碰撞盒子,這是因為更新畫布時,繪制小恐龍的方法在碰撞檢測后面調用。所以為了演示,我們把碰撞檢測的調用代碼調整一下位置:
Runner.prototype = { update: function () { // ... // 游戲變為開始狀態或小恐龍還沒有眨三次眼 if (this.playing || (!this.activated && this.tRex.blinkCount < Runner.config.MAX_BLINK_COUNT)) { this.tRex.update(deltaTime); + // 碰撞檢測 + var collision = hasObstacles && + checkForCollision(this.horizon.obstacles[0], this.tRex, this.ctx); // 進行下一次更新 this.scheduleNextUpdate(); } }, };
這樣就可以看到顯示出的碰撞盒子,效果如下:
到此就實現了碰撞檢測。至于檢測出碰撞后,結束游戲的相關邏輯,放到下一章來實現。
查看添加或修改的代碼,戳這里
Demo 體驗地址:https://liuyib.github.io/blog/demo/game/google-dino/collision-detection/
上一篇 | 下一篇 | Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍 | Chrome 小恐龍游戲源碼探究完 -- 游戲結束和其他要素 |
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103911.html
摘要:首先是繪制靜態的地面。上一篇下一篇無小恐龍游戲源碼探究二讓地面動起來 文章首發于我的 GitHub 博客 目錄 Chrome 小恐龍游戲源碼探究一 -- 繪制靜態地面 Chrome 小恐龍游戲源碼探究二 -- 讓地面動起來 Chrome 小恐龍游戲源碼探究三 -- 進入街機模式 Chrome 小恐龍游戲源碼探究四 -- 隨機繪制云朵 Chrome 小恐龍游戲源碼探究五 -- 隨機繪...
摘要:例如,將函數修改為小恐龍眨眼這樣小恐龍會不停的眨眼睛。小恐龍的開場動畫下面來實現小恐龍對鍵盤按鍵的響應。接下來還需要更新動畫幀才能實現小恐龍的奔跑動畫。 文章首發于我的 GitHub 博客 前言 上一篇文章:《Chrome 小恐龍游戲源碼探究七 -- 晝夜模式交替》實現了游戲晝夜模式的交替,這一篇文章中,將實現:1、小恐龍的繪制 2、鍵盤對小恐龍的控制 3、頁面失焦后,重新聚焦會重置...
摘要:文章首發于我的博客前言上一篇文章小恐龍游戲源碼探究四隨機繪制云朵實現了云朵的隨機繪制,這一篇文章中將實現仙人掌翼龍障礙物的繪制游戲速度的改變障礙物的類型有兩種仙人掌和翼龍。 文章首發于我的 GitHub 博客 前言 上一篇文章:《Chrome 小恐龍游戲源碼探究四 -- 隨機繪制云朵》 實現了云朵的隨機繪制,這一篇文章中將實現:1、仙人掌、翼龍障礙物的繪制 2、游戲速度的改變 障礙物...
摘要:文章首發于我的博客前言上一篇文章小恐龍游戲源碼探究二讓地面動起來實現了地面的移動。街機模式的效果就是游戲開始后,進入全屏模式。例如可以看到,進入街機模式之前,有一段開場動畫。 文章首發于我的 GitHub 博客 前言 上一篇文章:《Chrome 小恐龍游戲源碼探究二 -- 讓地面動起來》 實現了地面的移動。這一篇文章中,將實現效果:1、瀏覽器失焦時游戲暫停,聚焦游戲繼續。 2、開場動...
摘要:文章首發于我的博客前言上一篇文章小恐龍游戲源碼探究五隨機繪制障礙實現了障礙物仙人掌和翼龍的繪制。在游戲中,小恐龍移動的距離就是游戲的分數。 文章首發于我的 GitHub 博客 前言 上一篇文章:《Chrome 小恐龍游戲源碼探究五 -- 隨機繪制障礙》 實現了障礙物仙人掌和翼龍的繪制。這一篇將實現當前分數、最高分數的記錄和繪制。 在游戲中,小恐龍移動的距離就是游戲的分數。分數每達 1...
閱讀 2731·2021-11-24 09:39
閱讀 1647·2021-09-28 09:35
閱讀 1119·2021-09-06 15:02
閱讀 1306·2021-07-25 21:37
閱讀 2726·2019-08-30 15:53
閱讀 3643·2019-08-30 14:07
閱讀 713·2019-08-30 11:07
閱讀 3512·2019-08-29 18:36