与球碰撞时移除物体

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>

用箭头键移动球。当我与黄色块碰撞时，我希望它消失。使用clearRect不会简单，因为它会在setInterval中重绘。我怎么会让它消失？

Answer 1

通常，当您在游戏中有多个项目时，将它们放入某种objects数组中，然后当您绘制循环并在每个项目上调用.draw()时。这样做可以让您删除不需要的项目（例如key），因此将不再绘制它。在你的情况下，我们可以做的一件事（假设只有一个密钥）就是给你的ball hasKey属性。在碰撞时将其设置为false到true。然后在内部绘制中，如果你还希望删除碰撞，你可以在碰撞条件下!ball.hasKey && key.checkCollision()进行关键：

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

＆＃13;

＆＃13;

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);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;