Improved hit box and collisions

This commit is contained in:
Marcel 2019-04-10 10:29:41 +02:00
parent a11ecb6f6a
commit fd1e0447a4
2 changed files with 22 additions and 10 deletions

17
ball.js
View File

@ -17,7 +17,7 @@ class Ball {
this.cx += this.vx / stepCount; this.cx += this.vx / stepCount;
this.cy -= this.vy / stepCount; this.cy -= this.vy / stepCount;
if (this.cx - this.game.ballRadius <= 0 || this.cx + this.game.ballRadius >= this.game.canvas.width) { if (this.cx - this.game.ballRadius <= game.startAtX || this.cx + this.game.ballRadius >= this.game.canvas.width - game.startAtX) {
this.vx *= -1; this.vx *= -1;
} }
@ -77,12 +77,23 @@ class Ball {
const collLeft = (this.cx + this.game.ballRadius) - rect.x; const collLeft = (this.cx + this.game.ballRadius) - rect.x;
const collRight = rect.x + this.game.rectSize - (this.cx - this.game.ballRadius); const collRight = rect.x + this.game.rectSize - (this.cx - this.game.ballRadius);
if ((collTop <= collLeft && collTop <= collRight) || (collBottom <= collLeft && collBottom <= collRight)) { if ((collTop <= collBottom && collTop <= collLeft && collTop <= collRight) || (collBottom <= collTop && collBottom <= collLeft && collBottom <= collRight)) {
this.vy *= -1; this.vy *= -1;
} else { }
if((collLeft <= collRight && collLeft <= collTop && collLeft <= collBottom) || (collRight <= collLeft && collRight <= collTop && collRight <= collBottom)) {
this.vx *= -1; this.vx *= -1;
} }
if (distX > 0)
this.cx += game.ballRadius - distX;
else if (distX < 0)
this.cx -= game.ballRadius + distX;
if (distY > 0)
this.cy += game.ballRadius - distY;
else if(distY < 0)
this.cy -= game.ballRadius + distY;
rect.hit(this); rect.hit(this);
} }
} }

15
game.js
View File

@ -16,13 +16,14 @@ class Game {
this.colCount = 7; this.colCount = 7;
this.rowCount = 7; this.rowCount = 7;
this.rectSize = this.width / this.colCount; this.rectSize = Math.floor(this.width / this.colCount);
this.startAtX = (this.width - this.colCount * this.rectSize) / 2;
this.originX = this.width / 2; this.originX = this.width / 2;
this.originY = (this.rowCount + 2) * this.rectSize; this.originY = (this.rowCount + 2) * this.rectSize;
this.newOriginX = null; this.newOriginX = null;
this.ballRadius = 12; this.ballRadius = 10;
this.ballVelocity = 15; this.ballVelocity = 15;
this.powerUpRadius = 15; this.powerUpRadius = 15;
@ -74,7 +75,7 @@ class Game {
} }
removeEventListeners() { removeEventListeners() {
// this.canvas.removeEventListener()
} }
draw() { draw() {
@ -198,25 +199,25 @@ class Game {
} }
addNewObjects() { addNewObjects() {
const spawnBall = Math.random() < .5, const spawnBall = this.roundNumber > 1,
ballPos = spawnBall ? Math.round(Math.random() * (this.colCount - 1)) : null, ballPos = spawnBall ? Math.round(Math.random() * (this.colCount - 1)) : null,
spawnCoin = Math.random() < .33, spawnCoin = Math.random() < .33,
coinPos = spawnCoin ? Math.round(Math.random() * (this.colCount - 1)) : null; coinPos = spawnCoin ? Math.round(Math.random() * (this.colCount - 1)) : null;
for (let i = 0; i < this.colCount; i++) { for (let i = 0; i < this.colCount; i++) {
if (spawnBall && ballPos === i) { if (spawnBall && ballPos === i) {
this.powerUps.push(new PowerUpBall(this, (i + .5) * this.rectSize, .5 * this.rectSize)); this.powerUps.push(new PowerUpBall(this, this.startAtX + (i + .5) * this.rectSize, .5 * this.rectSize));
continue; continue;
} }
if (spawnCoin && coinPos === i) { if (spawnCoin && coinPos === i) {
this.powerUps.push(new PowerUpCoin(this, (i + .5) * this.rectSize, .5 * this.rectSize)); this.powerUps.push(new PowerUpCoin(this, this.startAtX + (i + .5) * this.rectSize, .5 * this.rectSize));
continue; continue;
} }
if (Math.random() < .6) { if (Math.random() < .6) {
const number = Math.random() < .6 ? this.roundNumber : 2 * this.roundNumber; const number = Math.random() < .6 ? this.roundNumber : 2 * this.roundNumber;
this.rects.push(new Rect(this, i * this.rectSize, 0, number)); this.rects.push(new Rect(this, this.startAtX + i * this.rectSize, 0, number));
} }
} }
} }