javascript - 移除与球碰撞的物体

Question

我知道你可以 fillRect 对吗？你可以 clearRect。但是，如果有一个动画并且您必须删除一个对象，尽管它会从 setInterval 中重新绘制，会发生什么情况。你将如何删除 fillRect？

举个例子:

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, color) {
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  if (fillCircle) {
ctx.fill();
  } else {
ctx.stroke();
  }
};

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

var Object = function (xPos, yPos) {
this.x = xPos;
this.y = yPos;
}
// The Ball constructor
var Ball = function () {
  this.x = width / 2;
  this.y = height / 2;
  this.xSpeed = 0;
  this.ySpeed = 0;
  this.radius = 10;
};

// 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, "Black");
};

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

Object.prototype.drawKey = function (color) {
  drawRect(this.x, this.y, "Yellow")
}

Object.prototype.checkCollision = function (direction) {
return (ball.x-ball.radius < this.x + 20)
  && (ball.x+ball.radius > this.x)
  && (ball.y-ball.radius < this.y + 20)
  && (ball.y+ball.radius > this.y)
  ;
}

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

ball.draw();
object1.draw("Blue");
object2.draw();
object3.draw();
object4.draw();
object5.draw();
key.drawKey();

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

function simulate() {
  for (z = 0; z < 5; z++) {
var prev_ball_x = ball.x;
var prev_ball_y = ball.y;
ball.move();
// handle collision here
if (object1.checkCollision() || object2.checkCollision() || object3.checkCollision() || object4.checkCollision() || object5.checkCollision()) {
    ball.setDirection('stop');
    // reset ball's position so they do not overlap
    ball.x = prev_ball_x;
    ball.y = prev_ball_y;
}

if (key.checkCollision()) {
  ball.x = prev_ball_x;
  ball.y = prev_ball_y;
}

  }

  $("body").keyup(function (event) {
  ball.setDirection('stop'); 
})
}

setInterval(function () {
// separate drawing and simulating phases
simulate();
draw();
}, 30);

// Set the ball's direction based on a string
Ball.prototype.setDirection = function (direction) {
  if (direction === "up") {
 this.xSpeed = 0;
 this.ySpeed = -1;
  } else if (direction === "down") {
 this.xSpeed = 0;
 this.ySpeed = 1;
  } else if (direction === "left") {
 this.xSpeed = -1;
 this.ySpeed = 0;
  } else if (direction === "right") {
 this.xSpeed = 1;
 this.ySpeed = 0;
  } else if (direction === "stop") {
this.xSpeed = 0;
 this.ySpeed = 0;
  }
};

// Create the ball object
var ball = new Ball();
var object1 = new Object(50, 0);
var object2 = new Object(50, 20);
var object3 = new Object(50, 40);
var object4 = new Object(50, 60);
var object5 = new Object(50, 80);
var key = new Object(70, 70);

// An object to convert keycodes into action names
var keyActions = {
  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);
});

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

您可以使用箭头键在球周围移动。当我与黄色 block 碰撞时，我希望它消失。使用 clearRect 将不起作用，因为它会在 setInterval 中重新绘制。我怎样才能让它消失？

Answer 1

通常，当您在游戏中有多个项目时，您会将它们放入一种objects 数组中，然后在绘制时循环遍历并调用 .draw()每一个项目。这样做可以让您删除不需要的项目(例如 key)，因此它将不再被绘制。在你的情况下，我们可以做的一件事(假设只有一个键)是给你的 ball 一个 hasKey 属性。并在碰撞时将其从 false 设置为 true。然后在 draw 中，如果您还想消除碰撞，您可以在键的碰撞条件中执行 !ball.hasKey && key.checkCollision():

if(!ball.hasKey) key.drawKey();

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, color) {
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  if (fillCircle) {
ctx.fill();
  } else {
ctx.stroke();
  }
};

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

var Object = function (xPos, yPos) {
this.x = xPos;
this.y = yPos;
}
// The Ball constructor
var Ball = function () {
  this.x = width / 2;
  this.y = height / 2;
  this.xSpeed = 0;
  this.ySpeed = 0;
  this.radius = 10;
  this.hasKey = false;
};

// 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, "Black");
};

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

Object.prototype.drawKey = function (color) {
  drawRect(this.x, this.y, "Yellow")
}

Object.prototype.checkCollision = function (direction) {
return (ball.x-ball.radius < this.x + 20)
  && (ball.x+ball.radius > this.x)
  && (ball.y-ball.radius < this.y + 20)
  && (ball.y+ball.radius > this.y)
  ;
}

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

ball.draw();
object1.draw("Blue");
object2.draw();
object3.draw();
object4.draw();
object5.draw();
if(!ball.hasKey) key.drawKey();

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

function simulate() {
  for (z = 0; z < 5; z++) {
var prev_ball_x = ball.x;
var prev_ball_y = ball.y;
ball.move();
// handle collision here
if (object1.checkCollision() || object2.checkCollision() || object3.checkCollision() || object4.checkCollision() || object5.checkCollision()) {
    ball.setDirection('stop');
    // reset ball's position so they do not overlap
    ball.x = prev_ball_x;
    ball.y = prev_ball_y;
}

if (!ball.hasKey && key.checkCollision()) {
  ball.x = prev_ball_x;
  ball.y = prev_ball_y;
  ball.hasKey = true;
}

  }

  $("body").keyup(function (event) {
  ball.setDirection('stop'); 
})
}

setInterval(function () {
// separate drawing and simulating phases
simulate();
draw();
}, 30);

// Set the ball's direction based on a string
Ball.prototype.setDirection = function (direction) {
  if (direction === "up") {
 this.xSpeed = 0;
 this.ySpeed = -1;
  } else if (direction === "down") {
 this.xSpeed = 0;
 this.ySpeed = 1;
  } else if (direction === "left") {
 this.xSpeed = -1;
 this.ySpeed = 0;
  } else if (direction === "right") {
 this.xSpeed = 1;
 this.ySpeed = 0;
  } else if (direction === "stop") {
this.xSpeed = 0;
 this.ySpeed = 0;
  }
};

// Create the ball object
var ball = new Ball();
var object1 = new Object(50, 0);
var object2 = new Object(50, 20);
var object3 = new Object(50, 40);
var object4 = new Object(50, 60);
var object5 = new Object(50, 80);
var key = new Object(70, 70);

// An object to convert keycodes into action names
var keyActions = {
  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);
});

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