碰撞检测不适用于画布答案

【问题标题】：Collision detection not working for canvas碰撞检测不适用于画布
【发布时间】：2015-12-11 23:29:27
【问题描述】：

我一直在尝试制作游戏，但存在障碍。我有一个（球）球员和一个正方形（障碍物），我不知道如何让碰撞检测工作。到目前为止，这是我的代码：

    <!DOCTYPE html>
  <html>
  <head>
      <title>Ball Race</title>
  </head>

  <body>

      <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<canvas id="canvas" width="800" height="200"></canvas>
      <script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

var circle = function (x, y, radius, fillCircle) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  if (fillCircle) {
    ctx.fill();
  } else {
    ctx.stroke();
  }
};

var drawRect = function (x, y) {
ctx.fillRect(x, y, 20, 20)
}

var Object = function () {
this.x = width / 4;
this.y = height / 4;
}
// The Ball constructor
var Ball = function () {
  this.x = width / 2;
  this.y = height / 2;
  this.xSpeed = 5;
  this.ySpeed = 0;
};

// Update the ball's position based on its speed
Ball.prototype.move = function () {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 11) {
    this.x = 11;
  } else if (this.x > width - 11) {
    this.x = width - 11;
  } else if (this.y < 11) {
    this.y = 11;
  } else if (this.y > height - 11) {
    this.y = height - 11;
  }
};

// Draw the ball at its current position
Ball.prototype.draw = function () {
  circle(this.x, this.y, 10, true);
};

Object.prototype.draw = function () {
    drawRect(this.x, this.y)
}

//collision types



Object.prototype.checkCollision = function () {
var col1 = this.x == ball.x && this.y == ball.y;
var col2 = this.x + 1 == ball.x && this.y == ball.y;
var col3 = this.x + 2 == ball.x && this.y == ball.y;
var col4 = this.x + 3 == ball.x && this.y == ball.y;
if (col1 || col2 || col3 || col4) {
alert("COLLISION!");
}
}
// Set the ball's direction based on a string
Ball.prototype.setDirection = function (direction) {
  if (direction === "up") {
     this.xSpeed = 0;
     this.ySpeed = -5;
  } else if (direction === "down") {
     this.xSpeed = 0;
     this.ySpeed = 5;
  } else if (direction === "left") {
     this.xSpeed = -5;
     this.ySpeed = 0;
  } else if (direction === "right") {
     this.xSpeed = 5;
     this.ySpeed = 0;
  } else if (direction === "stop") {
     this.xSpeed = 0;
     this.ySpeed = 0;
  }
};

// Create the ball object
var ball = new Ball();
var object = new Object();
// An object to convert keycodes into action names
var keyActions = {
  32: "stop",
  37: "left",
  38: "up",
  39: "right",
  40: "down"
};

// The keydown handler that will be called for every keypress
$("body").keydown(function (event) {
  var direction = keyActions[event.keyCode];
  ball.setDirection(direction);
});

// The animation function, called every 30 ms
setInterval(function () {
  ctx.clearRect(0, 0, width, height);

  ball.draw();
  ball.move();

  object.draw();

  ctx.strokeRect(0, 0, width, height);
}, 30);

setInterval(function () {
  object.checkCollision();
}, 1)
       </script>
   </body>
   </html>

你会如何编码？请举一个和我类似的例子。

【问题讨论】：

首先，紧急通常意味着你有一个家庭作业到期。其次，你要求我们为你做这件事。如果您对某些问题为什么不工作或如何更接近您想要的结果有具体问题，您可能会得到更有用的答案。
那你打算怎么办？说说我有多烂？
没有。我将解释这不是一个好问题，没有人会为你做这件事。什么不适用于您当前的代码？你想发生什么没有发生的事情？你自己不能做什么？如果没有这些信息，有人将不得不从头开始并完全为您编写。就像我之前说的，这不是这样的。
您拥有的代码与您正在寻找的代码有什么区别？你到底卡在哪里了？

标签： javascript html canvas

【解决方案1】：

似乎大部分功能都在那里，您只是缺少checkCollision 中的正确逻辑。我会将其更改为：

Object.prototype.checkCollision = function() {
  var colx = (ball.x-ball.radius<this.x&&ball.x+ball.radius>this.x)||(ball.x-ball.radius<this.x+20&&ball.x+ball.radius>this.x+20);
  var coly = (ball.y-ball.radius<this.y&&ball.y+ball.radius>this.y)||(ball.y-ball.radius<this.y+20&&ball.y+ball.radius>this.y+20);

  if(colx&&coly){
    console.log('collision');
  }
}

colx 检查 x 碰撞，看球是否在物体之间的位置。 coly 做同样的事情，但对 y 变量。如果两者都为真，则存在冲突。

我将radius 变量添加到Ball

var Ball = function() {
  this.x = width / 2;
  this.y = height / 2;
  this.xSpeed = 5;
  this.ySpeed = 0;
  this.radius = 10;
};

这是fiddle

【讨论】：

如何让它停止？ xspeed 和 yspeed 将设置为 0 对吗？但随后它会再次自动更新。
让球停下来？也忽略输入？