突圍碰撞檢測

Question

我正在用Javascript編寫Breakout游戲。 我參加了MDN教程和另一篇教程，並嘗試使用OOP方法修改原始文檔。 到現在為止，一切正常，除了通過槳進行碰撞檢測之外。 這沒有發生。 這是為什么？ 這是我的代碼。 有人可以幫忙嗎？ 謝謝！

 var canvas = document.getElementById('game'); var theLoop; var paddleSpeed = 4; //OBJECTS //Game function Game() { this.width = canvas.width; this.height = canvas.height; this.ctx = canvas.getContext('2d'); this.ctx.fillStyle = "white"; this.p = new Paddle(0, 130); this.px = (this.width - this.p.width) / 2; this.keys = new Keylistener(); this.ball = new Ball(); this.ball.x = this.width / 2; this.ball.y = 125; this.ball.vy = Math.floor(Math.random() * 12 - 6);  this.ball.vx = 7 - Math.abs(this.ball.vy); } Game.prototype.draw = function() { this.ctx.clearRect(0, 0, this.width, this.height); this.p.draw(this.ctx); this.ball.draw(this.ctx); }; Game.prototype.update = function() { if (this.paused) return; this.ball.update(); //Right Paddle's Directions if (this.keys.isPressed(37)) { // LEFT this.px = Math.max(0, this.px - paddleSpeed); } else if (this.keys.isPressed(39)) { // RIGHT    this.px = Math.min(this.px + paddleSpeed, this.width - this.p.width); } if (this.ball.x < this.ball.ballRadius || this.ball.x > this.width - this.ball.ballRadius) { //LEFT & RIGHT this.ball.vx = -this.ball.vx; } if (this.ball.y < this.ball.ballRadius) { //TOP this.ball.vy = -this.ball.vy; } else if (this.ball.y > this.height - this.ball.ballRadius) { if (this.ball.x > this.px && this.ball.x < this.px + this.p.width) { this.ball.vy = -this.ball.vy; console.log('hit'); } else { // console.log(this.ball.x); } } }; /////Paddle function Paddle(x, y) { this.x = x; this.y = y; this.width = 30; this.height = 5; this.score = 0; } Paddle.prototype.draw = function(p) { p.fillRect(this.x, this.y, this.width, this.height); }; ///KEY LISTENER function Keylistener() { this.pressedKeys = []; this.keydown = function(e) { this.pressedKeys[e.keyCode] = true; }; this.keyup = function(e) { this.pressedKeys[e.keyCode] = false; }; document.addEventListener("keydown", this.keydown.bind(this)); document.addEventListener("keyup", this.keyup.bind(this)); } Keylistener.prototype.isPressed = function(key) { return this.pressedKeys[key] ? true : false; }; Keylistener.prototype.addKeyPressListener = function(keyCode, callback) { document.addEventListener("keypress", function(e) { if (e.keyCode == keyCode) callback(e); }); }; ///BALL function Ball() { this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.ballRadius = 5; } Ball.prototype.update = function() { this.x += this.vx; this.y += this.vy; }; Ball.prototype.draw = function(p) { p.beginPath(); p.arc(this.x, this.y, this.ballRadius, 0, Math.PI * 2, false); p.fill(); p.closePath(); }; //Initialize the game var game = new Game(); //the Main Engine function mainLoop() { theLoop = setInterval(function() { game.update(); game.draw(); }, 33.3333); } //calling the Main Engine mainLoop(); 

 #game { width: 800px; height: 400px; background-color: #353535; } 

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

Answer 1

您的問題是此部分。

else if (this.ball.y > this.height - this.ball.ballRadius) {
    if (this.ball.x > this.p.x && this.ball.x < this.p.x + this.p.width) {

除非球在屏幕底部，否則您不會嘗試用槳葉擊打。 在擊打屏幕底部之前 ，需要檢查球是否與槳葉相交。

var paddleLeft = this.p.x;
var paddleRight = paddleLeft + this.p.width;
var paddleTop = this.p.y;
var ballLeft = this.ball.x;
var ballRight = ballLeft + this.ball.ballRadius;
var ballBottom = this.ball.y + this.ball.ballRadius;
var xCollision = (ballLeft <= paddleRight && ballRight >= paddleLeft);
var yCollision = (ballBottom >= paddleTop);
if (this.ball.y < this.ball.ballRadius) { //TOP
  this.ball.vy = -this.ball.vy;
} else if (xCollision && yCollision) {
  this.ball.vy = -this.ball.vy;
  console.log('hit');
}

它在您的游戲中運行。

 var canvas = document.getElementById('game'); var theLoop; var paddleSpeed = 4; //OBJECTS //Game function Game() { this.width = canvas.width; this.height = canvas.height; this.ctx = canvas.getContext('2d'); this.ctx.fillStyle = "white"; this.p = new Paddle(0, 220); this.px = (this.width - this.p.width) / 2; this.keys = new Keylistener(); this.ball = new Ball(); this.ball.x = this.width / 2; this.ball.y = 125; this.ball.vy = Math.floor(Math.random() * 12 - 6);  this.ball.vx = 7 - Math.abs(this.ball.vy); } Game.prototype.draw = function() { this.ctx.clearRect(0, 0, this.width, this.height); this.p.draw(this.ctx); this.ball.draw(this.ctx); }; Game.prototype.update = function() { if (this.paused) return; this.ball.update(); //Right Paddle's Directions if (this.keys.isPressed(37)) { // LEFT this.px = Math.max(0, this.px - paddleSpeed); } else if (this.keys.isPressed(39)) { // RIGHT    this.px = Math.min(this.px + paddleSpeed, this.width - this.p.width); } var leftBallCollision = this.ball.x < this.ball.ballRadius; var rightBallCollision = this.ball.x > this.width - this.ball.ballRadius; if (leftBallCollision || rightBallCollision) { //LEFT & RIGHT this.ball.vx = -this.ball.vx; } var paddleLeft = this.px; var paddleRight = paddleLeft + this.p.width; var paddleTop = this.py; var ballLeft = this.ball.x; var ballRight = ballLeft + this.ball.ballRadius; var ballBottom = this.ball.y + this.ball.ballRadius; var xCollision = (ballLeft <= paddleRight && ballRight >= paddleLeft); var yCollision = (ballBottom >= paddleTop); if (this.ball.y < this.ball.ballRadius) { //TOP this.ball.vy = -this.ball.vy; } else if (xCollision && yCollision) { this.ball.vy = -this.ball.vy; console.log('hit'); } }; /////Paddle function Paddle(x, y) { this.x = x; this.y = y; this.width = 30; this.height = 5; this.score = 0; } Paddle.prototype.draw = function(p) { p.fillRect(this.x, this.y, this.width, this.height); }; ///KEY LISTENER function Keylistener() { this.pressedKeys = []; this.keydown = function(e) { this.pressedKeys[e.keyCode] = true; }; this.keyup = function(e) { this.pressedKeys[e.keyCode] = false; }; document.addEventListener("keydown", this.keydown.bind(this)); document.addEventListener("keyup", this.keyup.bind(this)); } Keylistener.prototype.isPressed = function(key) { return this.pressedKeys[key] ? true : false; }; Keylistener.prototype.addKeyPressListener = function(keyCode, callback) { document.addEventListener("keypress", function(e) { if (e.keyCode == keyCode) callback(e); }); }; ///BALL function Ball() { this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.ballRadius = 5; } Ball.prototype.update = function() { this.x += this.vx; this.y += this.vy; }; Ball.prototype.draw = function(p) { p.beginPath(); p.arc(this.x, this.y, this.ballRadius, 0, Math.PI * 2, false); p.fill(); p.closePath(); }; //Initialize the game var game = new Game(); //the Main Engine function mainLoop() { theLoop = setInterval(function() { game.update(); game.draw(); }, 33.3333); } //calling the Main Engine mainLoop(); 

 #game { background-color: #353535; } 

 <canvas id="game" width="320" height="240"></canvas> 

Answer 2

 var canvas = document.getElementById('game'); var theLoop; var paddleSpeed = 4; //OBJECTS //Game function Game() { this.width = canvas.width; this.height = canvas.height; this.ctx = canvas.getContext('2d'); this.ctx.fillStyle = "white"; this.p = new Paddle(0, 130); this.px = (this.width - this.p.width) / 2; this.keys = new Keylistener(); this.ball = new Ball(); this.ball.x = this.width / 2; this.ball.y = 125; this.ball.vy = Math.floor(Math.random() * 12 - 6);  this.ball.vx = 7 - Math.abs(this.ball.vy); } Game.prototype.draw = function() { this.ctx.clearRect(0, 0, this.width, this.height); this.p.draw(this.ctx); this.ball.draw(this.ctx); }; Game.prototype.update = function() { if (this.paused) return; this.ball.update(); //Right Paddle's Directions if (this.keys.isPressed(37)) { // LEFT this.px = Math.max(0, this.px - paddleSpeed); } else if (this.keys.isPressed(39)) { // RIGHT    this.px = Math.min(this.px + paddleSpeed, this.width - this.p.width); } if (this.ball.x < this.ball.ballRadius || this.ball.x > this.width - this.ball.ballRadius) { //LEFT & RIGHT this.ball.vx = -this.ball.vx; } if (this.ball.y < this.ball.ballRadius) { //TOP this.ball.vy = -this.ball.vy; } else if (this.ball.y > this.py - this.ball.ballRadius && this.ball.y < this.py + this.p.height + this.ball.ballRadius) { if (this.ball.x > this.px && this.ball.x < this.px + this.p.width) { this.ball.vy = -this.ball.vy; console.log('hit'); } else { // console.log(this.ball.x); } } }; /////Paddle function Paddle(x, y) { this.x = x; this.y = y; this.width = 30; this.height = 5; this.score = 0; } Paddle.prototype.draw = function(p) { p.fillRect(this.x, this.y, this.width, this.height); }; ///KEY LISTENER function Keylistener() { this.pressedKeys = []; this.keydown = function(e) { this.pressedKeys[e.keyCode] = true; }; this.keyup = function(e) { this.pressedKeys[e.keyCode] = false; }; document.addEventListener("keydown", this.keydown.bind(this)); document.addEventListener("keyup", this.keyup.bind(this)); } Keylistener.prototype.isPressed = function(key) { return this.pressedKeys[key] ? true : false; }; Keylistener.prototype.addKeyPressListener = function(keyCode, callback) { document.addEventListener("keypress", function(e) { if (e.keyCode == keyCode) callback(e); }); }; ///BALL function Ball() { this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.ballRadius = 5; } Ball.prototype.update = function() { this.x += this.vx; this.y += this.vy; }; Ball.prototype.draw = function(p) { p.beginPath(); p.arc(this.x, this.y, this.ballRadius, 0, Math.PI * 2, false); p.fill(); p.closePath(); }; //Initialize the game var game = new Game(); //the Main Engine function mainLoop() { theLoop = setInterval(function() { game.update(); game.draw(); }, 33.3333); } //calling the Main Engine mainLoop(); 

 #game { width: 800px; height: 400px; background-color: #353535; } 

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