javascript - 与正方形碰撞后如何保持圆周速度?
问题描述
我正在开发一个游戏,其中玩家是一个圆圈,而瓷砖是正方形。用户使用键盘移动头像(圆圈),并且不应与瓷砖(正方形)发生碰撞。
另外,如果他们碰到角落,我希望圆圈沿着正方形滑动,这样如果玩家一直按下键向同一方向移动,他们将沿着正方形滑动而不是卡在上面。
我已经开发了我在这里面临的问题的完整再现:
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
class Vec2 {
constructor(x, y) {
this.x = x || 0;
this.y = y || 0;
}
distance(v) {
let x = v.x - this.x;
let y = v.y - this.y;
return Math.sqrt(x * x + y * y);
}
magnitude() {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
dot(v) {
return this.x * v.x + this.y * v.y;
}
normalize() {
let magnitude = this.magnitude();
return new Vec2(this.x / magnitude, this.y / magnitude);
}
multiply(val) {
return typeof val === "number" ? new Vec2(this.x * val, this.y * val) : new Vec2(this.x * val.x, this.y * val.y);
}
subtract(val) {
return typeof val === "number" ? new Vec2(this.x - val, this.y - val) : new Vec2(this.x - val.x, this.y - val.y);
}
add(val) {
return typeof val === "number" ? new Vec2(this.x + val, this.y + val) : new Vec2(this.x + val.x, this.y + val.y);
}
}
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
function drawCircle(xCenter, yCenter, radius) {
ctx.beginPath();
ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI);
ctx.fill();
}
function drawSquare(x, y, w, h) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.stroke();
}
function circleRectangleCollision(cX, cY, cR, rX, rY, rW, rH) {
let x = clamp(cX, rX, rX + rW);
let y = clamp(cY, rY, rY + rH);
let cPos = new Vec2(cX, cY);
return cPos.distance(new Vec2(x, y)) < cR;
}
function getCircleRectangleDisplacement(rX, rY, rW, rH, cX, cY, cR, cVel) {
let circle = new Vec2(cX, cY);
let nearestX = Math.max(rX, Math.min(cX, rX + rW));
let nearestY = Math.max(rY, Math.min(cY, rY + rH));
let dist = new Vec2(cX - nearestX, cY - nearestY);
let tangentVel = dist.normalize().dot(cVel);
// The original answer had `cVel.subtract(tangentVel * 2);` here
// but that was giving me issues as well
return cVel.add(tangentVel);
}
let circlePos = new Vec2(150, 80);
let squarePos = new Vec2(240, 110);
let circleR = 50;
let squareW = 100;
let squareH = 100;
let circleVel = new Vec2(5, 0);
draw = () => {
ctx.fillStyle = "#b2c7ef";
ctx.fillRect(0, 0, 800, 800);
ctx.fillStyle = "#ffffff";
drawCircle(circlePos.x, circlePos.y, circleR);
drawSquare(squarePos.x, squarePos.y, squareW, squareH);
}
update = () => {
draw();
if (circleRectangleCollision(circlePos.x, circlePos.y, circleR, squarePos.x, squarePos.y, squareW, squareH)) {
circleVel = getCircleRectangleDisplacement(squarePos.x, squarePos.y, squareW, squareH, circlePos.x, circlePos.y, circleR, circleVel);
}
circlePos = circlePos.add(circleVel);
}
setInterval(update, 30);
canvas { display: flex; margin: 0 auto; }
<canvas width="800" height="800"></canvas>
如果您运行该代码段,您会看到圆圈正确地围绕正方形移动,但之后它会向下和向右移动。我不确定为什么会这样。之后它应该保持完全笔直并向右移动。
不幸的是,我数学不是很好,所以我很难弄清楚为什么会这样。我通过这个答案了解了主要算法,但也参考了以下答案 :一 二三
我注意到的另一个问题是,如果将circlePos
from的 y 位置更改80
为240
,那么它仍然会沿着正方形的顶部滑动,而不是沿着正方形的底部走更自然的滑动路径。如果可能的话,我也想解决这个问题。
此外,理想情况下,如果圆圈直接撞到瓷砖上,则根本不应该有任何滑动,如果这是有道理的话。在这种情况下,它应该卡在正方形上。
解决方案
我建议进行以下更改:
在你的类中定义另外两个方法:
crossProductZ(v) {
return this.x * v.y - v.x * this.y;
}
perpendicular() {
return new Vec2(this.y, -this.x);
}
getCircleRectangleDisplacement
将return
语句替换为:
return dist.perpendicular().normalize()
.multiply(cVel.magnitude() * Math.sign(cVel.crossProductZ(dist)));
这个想法是圆应该垂直于通过圆心和命中点(即dist
)的线移动。垂线上当然有两个方向:应该dist
是与当前速度矢量在同一侧的方向。这样,圆圈将选择正方形的右侧。
该移动的幅度应该等于当前速度的幅度(因此速度没有变化,只是方向上的变化)。
最后,还要对update
函数进行以下更改:
let nextCirclePos = circlePos.add(circleVel);
if (circleRectangleCollision(nextCirclePos.x, nextCirclePos.y, circleR, squarePos.x, squarePos.y, squareW, squareH)) {
let currentVel = getCircleRectangleDisplacement(squarePos.x, squarePos.y, squareW, squareH, circlePos.x, circlePos.y, circleR, circleVel);
nextCirclePos = circlePos.add(currentVel);
}
circlePos = nextCirclePos;
这里的想法是,我们首先像往常一样进行移动(circleVel
),看看这是否意味着碰撞。在那种情况下,我们不会采取行动。相反,我们从当前位置获得位移。
而且,我们从不更新currentVel
. 这将保证一旦障碍物消失,运动将像以前一样继续。
在下面的代码段中进行了这些更改。此外,我在圆圈的路径中添加了第二个正方形,一旦圆圈不在视线范围内,我添加了第二次运行,圆圈采用不同的路径:
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
class Vec2 {
constructor(x, y) {
this.x = x || 0;
this.y = y || 0;
}
distance(v) {
let x = v.x - this.x;
let y = v.y - this.y;
return Math.sqrt(x * x + y * y);
}
magnitude() {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
dot(v) {
return this.x * v.x + this.y * v.y;
}
normalize() {
let magnitude = this.magnitude();
return new Vec2(this.x / magnitude, this.y / magnitude);
}
multiply(val) {
return typeof val === "number" ? new Vec2(this.x * val, this.y * val) : new Vec2(this.x * val.x, this.y * val.y);
}
subtract(val) {
return typeof val === "number" ? new Vec2(this.x - val, this.y - val) : new Vec2(this.x - val.x, this.y - val.y);
}
add(val) {
return typeof val === "number" ? new Vec2(this.x + val, this.y + val) : new Vec2(this.x + val.x, this.y + val.y);
}
crossProductZ(v) {
return this.x * v.y - v.x * this.y;
}
perpendicular() {
return new Vec2(this.y, -this.x);
}
}
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
function drawCircle(xCenter, yCenter, radius) {
ctx.beginPath();
ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI);
ctx.fill();
}
function drawSquare(x, y, w, h) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.stroke();
}
function circleRectangleCollision(cX, cY, cR, rX, rY, rW, rH) {
let x = clamp(cX, rX, rX + rW);
let y = clamp(cY, rY, rY + rH);
let cPos = new Vec2(cX, cY);
return cPos.distance(new Vec2(x, y)) < cR;
}
function getCircleRectangleDisplacement(rX, rY, rW, rH, cX, cY, cR, cVel) {
let circle = new Vec2(cX, cY);
let nearestX = clamp(cX, rX, rX + rW);
let nearestY = clamp(cY, rY, rY + rH);
let dist = new Vec2(cX - nearestX, cY - nearestY);
return dist.perpendicular().normalize().multiply(cVel.magnitude() * Math.sign(cVel.crossProductZ(dist)));
}
let circlePos = new Vec2(100, 80);
let squarePosList = [new Vec2(240, 110), new Vec2(480, -50)];
let circleR = 50;
let squareW = 100;
let squareH = 100;
let circleVel = new Vec2(5, 0);
draw = () => {
ctx.fillStyle = "#b2c7ef";
ctx.fillRect(0, 0, 800, 800);
ctx.fillStyle = "#ffffff";
drawCircle(circlePos.x, circlePos.y, circleR);
for (let squarePos of squarePosList) {
drawSquare(squarePos.x, squarePos.y, squareW, squareH);
}
}
update = () => {
draw();
let nextCirclePos = circlePos.add(circleVel);
for (let squarePos of squarePosList) {
if (circleRectangleCollision(nextCirclePos.x, nextCirclePos.y, circleR, squarePos.x, squarePos.y, squareW, squareH)) {
let currentVel = getCircleRectangleDisplacement(squarePos.x, squarePos.y, squareW, squareH, circlePos.x, circlePos.y, circleR, circleVel);
nextCirclePos = circlePos.add(currentVel);
break; // we only deal with one collision (otherwise it becomes more complex)
}
}
circlePos = nextCirclePos;
if (circlePos.x > 800 + circleR) { // Out of view: Repeat the animation but with a diagonal direction
circlePos = new Vec2(100, 400);
circleVel = new Vec2(3.6, -3.6);
}
}
let interval = setInterval(update, 30);
canvas { display: flex; margin: 0 auto; }
<canvas width="800" height="800"></canvas>
注意:您在碰撞和位移函数中有一些代码重复。他们都计算几乎相同的东西。这可以优化。
推荐阅读
- reactjs - 嵌套数组形式 - onChange 处理程序渲染缓慢 - 不变性助手
- r - R闪亮的dygraph不渲染
- c - Vscode 调试器不替换环境变量值
- python - 托管在 repl.it 上的 Python discord bot 无法正常工作
- liquibase - 如何在不重新运行 liquibase 中的语句的情况下重新计算校验和?
- wordpress - 错误地将样式和脚本排入队列
- javascript - 通过单击按钮从 API 更新 LocalStorage(数组)
- android - Css 数学函数(计算、最小值、最大值、钳位)在 Edge Android 上不起作用?
- xml - 使用 Haskell 和 HXT 解析 XML
- java - 如何模拟(模拟)MyBatis-Plus 数据访问层以对 Model<> Active Record 进行单元测试?