如何添加碰撞检测？

Question

我正在使用 Javascript 制作一个简单的游戏。我目前正在尝试为玩家添加碰撞检测，以便在玩家距离硬币一定范围内时发生某些事情。我试过从硬币中减去玩家的 x 和 y 坐标，我还尝试了一个 for 循环来检测硬币和玩家之间的接近度差异，现在我正在尝试使用 range() 函数.为了实现我的目标，我无法使这些方法中的任何一种起作用。任何帮助将不胜感激。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

//set player, background and coin info
const player = new Image();
player.src = "down.png";
const background = new Image();
background.src = "landscape.png";
const coin = new Image();
coin.src = "coin.png"

//create player
function drawSprite(img, sX, sY, sW, sH, dX, dY, dW, dH){
    ctx.drawImage(img, sX, sY, sW, sH, dX, dY, dW, dH);
}

//create score
var score = 0
function drawScore() {
    ctx.font = "10px Arial";
    ctx.fillStyle = "#FFFFFF";
    ctx.fillText("Score: " + score, 254, 12);
}

//controls
var xPos = 0;
var yPos = 0;
var playerWidth = 30;
var playerHeight = 52;
const speed = 6;
function movement(e){
    if (e.keyCode == 37){
      xPos -= speed;
      player.src = "left.png";
    }
    else if (e.keyCode == 38){
      yPos -= speed;
      player.src = "up.png";
    }
    else if (e.keyCode == 39){
      xPos += speed;
      player.src = "right.png"; 
    }
    else if (e.keyCode == 40){
      yPos += speed;
      player.src = "down2.png";
    }

    if (xPos < 0)
      xPos = 0;

    if (xPos > canvas.width - playerWidth)
      xPos = canvas.width - playerWidth;

    if (yPos < 0)
      yPos = 0;

    if (yPos > canvas.height - playerHeight)
      yPos = canvas.height - playerHeight;
}

document.onkeydown = movement;

function idle(){
    player.src = "down.png";
}

document.onkeyup = setInterval(idle, 0600);

//collision detection
if (player.xPos == range((coin.x - 6), (coin.x + 6))){
    //do something;
}

//animation
function animate(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
    ctx.drawImage(coin, 100, 50, 40, 35);
    drawSprite(player, 0, 0, 30, 52, xPos, yPos, 30, 52);
    drawScore();
    requestAnimationFrame(animate);
}
animate();

Answer 1

我强烈建议您将播放器和硬币更改为对象，并在这些对象中分配它们的参数。这使得做这类事情更加动态和更容易理解。

对于您当前的代码，您可以编写类似

的内容

function collision() {
  if (
    xPos + playerWidth < 100 ||
    xPos > 140 ||
    yPos + playerHeight < 50 ||
    yPos > 50 + 35
  ) {
    return;
  }
  console.log(true)
}

数字是您在绘制硬币时指定给硬币的 x、y、宽度和高度。

编写此代码的更好方法是将您的玩家和硬币作为一个对象。

let player = {
  x: 0,
  y: 0,
  width: 30,
  height: 52
}

let coin = {
  x: 100,
  y: 50,
  width: 40,
  height: 35,
}

在构建游戏时，您会发现通过这种方式访问和更改值会更加容易。当它们发生碰撞时，我只是简单地控制台日志记录为真。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

//set player, background and coin info
const playerImg = new Image();
playerImg.src =
  "https://www.pngitem.com/pimgs/m/157-1571473_pac-man-png-pacman-png-illustration-transparent-png.png";
const background = new Image();
background.src =
  "https://image.freepik.com/free-vector/desert-day-game-background_7814-292.jpg";
const coinImg = new Image();
coinImg.src = "https://image.pngaaa.com/391/204391-small.png";

//create player
function drawSprite(img, sX, sY, sW, sH, dX, dY, dW, dH) {
  ctx.drawImage(img, sX, sY, sW, sH, dX, dY, dW, dH);
}

//create score
var score = 0;
function drawScore() {
  ctx.font = "10px Arial";
  ctx.fillStyle = "#FFFFFF";
  ctx.fillText("Score: " + score, 254, 12);
}

//controls

let player = {
  x: 0,
  y: 0,
  width: 30,
  height: 52
};

let coin = {
  x: 100,
  y: 50,
  width: 40,
  height: 35
};

const speed = 6;
function movement(e) {
  if (e.keyCode == 37) {
    player.x -= speed;
    //  player.src = "left.png";
  } else if (e.keyCode == 38) {
    player.y -= speed;
    //  player.src = "up.png";
  } else if (e.keyCode == 39) {
    player.x += speed;
    //  player.src = "right.png";
  } else if (e.keyCode == 40) {
    player.y += speed;
    //  player.src = "down2.png";
  }

  if (player.x < 0) player.x = 0;

  if (player.x > canvas.width - player.width)
    player.x = canvas.width - player.width;

  if (player.y < 0) player.y = 0;

  if (player.y > canvas.height - player.height)
    player.y = canvas.height - player.height;
}

document.onkeydown = movement;

function collision() {
  if (
    player.x + player.width < coin.x ||
    player.x > coin.x + coin.width ||
    player.y + player.height < coin.y ||
    player.y > coin.y + coin.height
  ) {
    return;
  }
  console.log(true);
}

//document.onkeyup = setInterval(idle, 0600);

//animation
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
  ctx.drawImage(coinImg, coin.x, coin.y, coin.width, coin.height);
  drawSprite(
    playerImg,
    0,
    0,
    30,
    52,
    player.x,
    player.y,
    player.width,
    player.height
  );
  drawScore();
  collision();
  requestAnimationFrame(animate);
}
animate();

<canvas id="canvas"></canvas>

忽略图片。我只是从 google.

中随机抓取了一些

如何添加碰撞检测？

How to add collision detection?

javascript

collision-detection

detection

collision