Question

我一直在尝试制作游戏，但有障碍。我有一个（球）球员和一个方形（障碍物），我无法弄清楚如何使碰撞检测工作。到目前为止，这是我的代码：

    <!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>

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

Answer 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

碰撞检测不适用于画布

1 个答案: