javascript - Canvas 碰撞

Question

我是 javascript 的新手，正在尝试找出如何与球和木板发生碰撞，这将停止游戏并提醒玩家“你输了”。但我只想让红球击中木板，让蓝球不接触地继续前进。这是我正在处理的代码。 (我不介意你是否可以帮助只用两个球进行碰撞)

var spawnRate = 100;

var spawnRateOfDescent = 2;

var lastSpawn = -10;

var objects = [];

var startTime = Date.now();

function spawnRandomObject() {


var t;

if (Math.random() < 0.50) {
    t = "red";
} else {
    t = "blue";
}


var object = {
    type: t,
    x: Math.random() * (canvas.width - 30) + 15,
    y: 0

}

objects.push(object);
}



function animate() {

var time = Date.now();

if (time > (lastSpawn + spawnRate)) {
    lastSpawn = time;
    spawnRandomObject();
}

for (var i = 0; i < objects.length; i++) {
    var object = objects[i];
    object.y += spawnRateOfDescent;
    ctx.beginPath();
    ctx.arc(object.x, object.y, 8, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = object.type;
    ctx.fill();

    }

    }



var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var paddleHeight = 10;
var paddleWidth = 60;
var paddleY = 480
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
if(e.keyCode == 39) {
    rightPressed = true;
}
else if(e.keyCode == 37) {
    leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
    rightPressed = false;
}
else if(e.keyCode == 37) {
    leftPressed = false;
}
}



function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}




function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle();    
animate();

if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 3;
}
else if(leftPressed && paddleX > 0) {
    paddleX -= 3;
}

}

setInterval(draw, 10);

谢谢!

Answer 1

如果你有这样一个对象:

let ball = { type: 'red', x: 10, y: 10, width: 10, height: 10 };

您可能需要考虑为此添加一个方法来检查它是否与任何其他矩形重叠:

ball.overlapsBall = function( otherBall ){
    return !( 
        otherBall.x + otherBall.width < this.x 
        && otherBall.y + otherBall.height < this.y 
        && otherBall.y > this.y + this.height 
        && otherBall.x > this.x + this.height
    );
}

你通过检查它是否不重叠来做到这一点，只有当一个框完全在另一个框之外时才为真(通读 if 语句并尝试将其可视化，它实际上相当简单)

在您的绘制函数中，您现在可以添加一个循环以查看是否发生任何重叠:

var overlap = objects.filter(function( ball ) { return paddle.overlapsBall( ball ) });

您甚至可以放置一个if 语句来检查它的类型! (过滤器 将获取整个球数组并检查重叠，并从数组中删除任何不返回 true 的内容。现在您可以使用 overlaps。 forEach(function( ball ){/* ... */}); 对与 Racket 重叠的所有球做一些事情。)

最后一件事，如果您计划对许多对象执行此操作，您可能需要考虑为您制作的每个桨或球使用这样的简单类:

class Object2D {

    constructor(x = 0, y = 0;, width = 1, height = 1){
        this.x = x;
        this.y = x;
        this.width = width;
        this.height = height;
    }

    overlaps( otherObject ){
        !( otherObject.x + otherObject.width < this.x && otherObject.y + otherObject.height < this.y && otherObject.y > this.y + this.height && otherObject.x > this.x + this.height );
    }

}

这允许您使用这个简单的表达式创建一个新对象，该对象自动具有检查与相似对象重叠的方法:

var paddle = new Object2D(0,0,20,10);
var ball = new Object2D(5,5,10,10);
paddle.overlaps( ball ); // true!

最重要的是，您确保任何 Object2D 都包含您计算所需的值。您可以使用 paddle instanceof Object2D 检查此对象的类型是否正确(true)。

注意 请注意，正如@Janje 在下面的评论中不断指出的那样，我们在这里做一个矩形重叠，它可能会为所有矩形片段创建一些“误报”不是圆圈。这对于大多数情况来说已经足够好了，但您可以通过快速谷歌搜索轻松找到其他重叠和碰撞的数学。

更新:简单实现

请参阅下面的一个非常简单的示例，了解重叠如何发挥作用:

var paddle = { x: 50,  y: 50,  width: 60,  height: 20 };
var box = { x: 5, y: 20, width: 20, height: 20 };

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

document.body.appendChild( canvas );

canvas.width = 300;
canvas.height = 300;

function overlaps( a, b ){
  return !!( a.x + a.width > b.x &&  a.x < b.x + b.width
    && a.y + a.height > b.y &&  a.y < b.y + b.height );
}

function animate(){
  ctx.clearRect( 0, 0, canvas.width, canvas.height );
  
  ctx.fillStyle = overlaps( paddle, box ) ? "red" : "black";
  ctx.fillRect( paddle.x, paddle.y, paddle.width, paddle.height );
  ctx.fillRect( box.x, box.y, box.width, box.height );
	
  window.requestAnimationFrame( animate );
}

canvas.addEventListener('mousemove', function(event){
  paddle.x = event.clientX - paddle.width / 2;
  paddle.y = event.clientY - paddle.height / 2;
})

animate();