Question

我是网站和编码的新手。我需要帮助我当前的javascript代码，我遇到了碰撞时检测到我的两个对象的问题。

抱歉无法看到对象，因为它们是png的。如果有人能够专门帮助我这一部分，以便检测到碰撞，我将非常感激。

function collision(a, b){

return  a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.width;

}

if (collision(player, asteroid)){
    player.playerImage = player.playerImage2;
    cancelAnimationFrame(animation_frame);
}

Answer 1

这是检测碰撞的代码：

var playerX = player.x + playerWidth / 2;
var playerY = player.y + playerHeight / 2;

var asteroidX = asteroid.x + asteroisWidth / 2;
var asteroidX = asteroid.y + asteroidHeight / 2;

var distanceX = (playerX - asteroidX)(playerX - asteroidX);
var distanceY = (playerY - asteroidY)(playerY - asteroidY);

var distance = Math.sqrt(distanceX + distanceY);

if(distance <= 0){
   console.log('Collided!');
}

如果仍有疑惑，请观看此视频https://www.youtube.com/watch?v=XYzA_kPWyJ8

HTML5画布碰撞检测混淆

1 个答案: