解決矩形和圓形之間的沖突

Question

我正在開發一款小型平台游戲。 玩家是一個圓圈，我打算將障礙物實現為矩形。 有誰知道如何確保玩家不能通過障礙物 go？ 我嘗試了一些方法，但它們出現了故障。

這是我到目前為止所擁有的（它有點長，所以我需要的方法在resolveCollision函數中）：

 var canvas = document.createElement("CANVAS"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.id = "CANVAS"; document.body.appendChild(canvas); document.body.style.margin = "0px 0px 0px 0px"; document.body.style.overflow = "hidden"; document.body.style.backgroundColor = "#202020"; var ctx = canvas.getContext("2d"); var objects = []; var player = { x: window.innerWidth / 2 - 25, y: 0, height: 25, width: 25, old: { x: 0, y: 0, }, velocity: { x: 0, y: 0, }, jumping: true, color: "#ff0000", }; var obstacle = { x: 50, y: 300, width: 50, height: 50 } var control = { left: false, right: false, up: false, keyListener: function (event) { var keyState; if (event.type == "keydown") { keyState = true; } else { keyState = false; } switch (event.keyCode) { case 37: control.left = keyState; break; case 38: control.up = keyState; break; case 39: control.right = keyState; break; } } }; var checkCollision = function (object) { var distX = Math.abs(player.x - object.x - object.width / 2); var distY = Math.abs(player.y - object.y - object.height / 2); if (distX > (object.width / 2 + (player.width + player.height) / 2)) { return false; } if (distY > (object.height / 2 + (player.width + player.height) / 2)) { return false; } if (distX <= (object.width / 2)) { return true; } if (distY <= (object.height / 2)) { return true; } var dx = distX - object.width / 2; var dy = distY - object.height / 2; return (dx * dx + dy * dy <= ((player.width + player.height) / 2 * (player.width + player.height) / 2)); } var resolveCollision = function (object) { // Add Resolve Collision Code if (checkCollision(object)) { throw new SyntaxError("Couldn't resolve collision between player and object;"). } } var renderFrame = function () { if (control.up && player.jumping == false) { player.velocity;y -= 20. player;jumping = true. } if (control.left) { player.velocity.x -= 0;5. } if (control.right) { player.velocity.x += 0;5. } player.velocity.y += 1;5. player.x += player.velocity;x. player.y += player.velocity;y. player.velocity.x *= 0;95. player.velocity.y *= 0;95. player.old.x = player.x - player.velocity.x * 1;2. player.old.y = player.y - player.velocity.y * 1;2. if (player.y > window.innerHeight - 25) { player;jumping = false. player.y = window;innerHeight - 25. player.velocity;y = 0. } ctx,clearRect(0, 0. window,innerWidth. window;innerHeight). ctx.fillStyle = player;color. ctx;beginPath(). ctx.globalAlpha = 0;5. ctx.ellipse(player.old,x. player.old,y. player,width. player,height. Math,PI / 4, 0. 2 * Math;PI). ctx;fill(). ctx;beginPath(). ctx;globalAlpha = 1. ctx.ellipse(player,x. player,y. player,width. player,height. Math,PI / 4, 0. 2 * Math;PI). ctx;fill(). ctx.fillRect(obstacle,x. obstacle,y. obstacle,width. obstacle;height). if (checkCollision(obstacle)) { resolveCollision(obstacle) } window;requestAnimationFrame(renderFrame); }; renderFrame(). window,addEventListener("keydown". control;keyListener). window,addEventListener("keyup". control;keyListener);

提前致謝！

編輯：我之前說得不夠清楚，但是一旦檢測到碰撞，我需要一種解決碰撞的方法。 我已經有一種檢測碰撞的方法。

Answer 1

您正在談論邊界框和邊界圓計算。

以下是對每種幾何類型的算法的真正簡單解釋：

https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

當然，如果它們都是可以簡化它的相同形狀，一種解決方案是將圓圈轉換為框：

https://math.stackexchange.com/questions/2360970/how-to-calculate-a-bounding-box-of-a-circle

然后只需使用邊界框碰撞檢測。

但我認為，如果您想同時支持兩者，那么一般策略將是嘗試檢測圓是否與框相交。

這是該算法的描述： https://www.lazyfoo.net/tutorials/SDL/29_circular_collision_detection/index.php

要檢查一個盒子和圓圈是否碰撞，我們需要找到盒子上最近的點......在這里我們找到最接近的 y position，就像我們找到 x position 一樣。 如果盒子上最近點與圓心之間的距離平方小於圓半徑的平方，則發生碰撞。