jdg/breakout
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added the bricks (and improve the bouncing)

Browse Source
This commit is contained in:
José David Guillén
2021-11-14 23:49:49 +01:00
parent 0f4a403edb
commit 7493713529
12 changed files with 303 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
Ball.js
View File

@ -1,51 +1,53 @@
class Ball {
constructor(ctx, bar) {
this.ctx = ctx;
this.bar = bar;
this.size = 15;
constructor() {
this.size = 10;
this.moving = false;
this.x = this.bar.x + (this.bar.w) / 2;
this.y = this.bar.y - this.size -1;
this.speed = 5;
this.speed = 7;
// this.angle = 90;
this.bounce(220,340);
this.setAngle(180 +60, 360 - 60);
this.color = 'red';
this.limits = null;
this.angleTR = this.g2r(360);
this.angleBR = this.g2r(90);
this.angleBL = this.g2r(180);
this.angleTL = this.g2r(270);
this.limits = {
l: this.size,
t: this.size,
r: this.ctx.canvas.width - this.size,
b: this.ctx.canvas.height
}
}
start() {
this.moving = true;
}
update() {
if (this.move()) {
this.draw();
update(ctx, x, y) {
this.limits ??= {
l: this.size,
t: this.size,
r: ctx.canvas.width - this.size,
b: ctx.canvas.height
};
if (this.move(x,y)) {
this.draw(ctx);
return true;
}
return false;
}
draw() {
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
this.ctx.fillStyle = this.color;
this.ctx.fill();
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = '#003300';
this.ctx.stroke();
draw(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#003300';
ctx.stroke();
}
move() {
move(x,y) {
if (this.moving) {
this.x += this.speed * Math.cos(this.angle);
this.y += this.speed * Math.sin(this.angle);
@ -55,35 +57,100 @@ class Ball {
this.moving = false;
return false;
}
if (this.y > this.bar.y ) return true; // Ball is lost, don't check anything else
if ( (this.y + this.size) > this.bar.y && this.x > this.bar.x && this.x < (this.bar.x + this.bar.w) ) {
// Down (Bar)
this.bounce(220,340);
this.collideWalls(this.limits.l, this.limits.t, this.limits.r, this.limits.b);
} else {
if ( this.x < this.limits.l ) {
// Left wall
if (this.angle<this.g2r(180)) this.bounce(20,70); // It was going DOWN
else this.bounce(290,340); // It was going UP
} else
if ( this.x > this.limits.r ) {
// Right wall
if (this.angle<this.g2r(180)) this.bounce(110,160); // It was going DOWN
else this.bounce(200,250); // It was going UP
} else
if ( this.y < this.limits.t ) {
// Top Wall
this.bounce(20,140);
}
}
} else {
this.x = this.bar.x + (this.bar.w) / 2;
this.y = this.bar.y - this.size -1;
this.x = x;
this.y = y - this.size - 1;
}
return true;
}
bounce(min,max) {
bounceL(r) {
if(this.angle<=this.angleBL)
this.setAngle(0 + r, 90 - r);
else
this.setAngle(270 + r, 360 - r);
}
bounceR(r) {
if(this.angle<=this.angleBR)
this.setAngle(90 + r, 180 - r);
else
this.setAngle(180 + r, 270 - r);
}
bounceT(r) {
if(this.angle<=this.angleTL)
this.setAngle(90 + r, 180 - r);
else
this.setAngle(0 + r, 90 - r);
}
bounceB(r) {
if(this.angle<=this.angleBR)
this.setAngle(270 + r, 360 - r);
else
this.setAngle(180 + r, 270 - r);
}
collideWalls(x0, y0, x1, y1) {
let r = 20;
if ( this.x <= x0 ) {
this.bounceL(r);
return true;
}
if (this.x >= x1 ) {
this.bounceR(r);
return true;
}
if (this.y <= y0 ) {
this.bounceT(r);
return true;
}
if (this.y >= y1 ) {
this.bounceB(r);
return true;
}
return false;
}
/*
TL 270 TR
180 0
BL 90 BR
B
---------
R | | L
---------
T
*/
collide(x0,y0,x1,y1) { // 0 = hit Left/Right, 1 = hit Up/Down
let r = 20;
if (this.x>=x0 && this.x<=x1 && (this.y+this.size)>=y0 && (this.y+this.size)<y1) {
this.bounceB(r);
return true;
}
if (this.x>=x0 && this.x<=x1 && (this.y-this.size)<=y1 && (this.y-this.size)>y0) {
this.bounceT(r);
return true;
}
if (this.y>=y0 && this.y<=y1 && (this.y+this.size)>=x0 && (this.y-this.size)<x1) {
this.bounceR(r);
return true;
}
if (this.y>=y0 && this.y<=y1 && (this.y-this.size)<=x1 && (this.y-this.size)>x0) {
this.bounceL(r);
return true;
}
return false;
}
setAngle(min, max) {
this.angle = this.g2r(Math.floor(Math.random() * (max - min)) + min);
}

5
Bar.js
View File

@ -3,14 +3,15 @@ class Bar {
this.ctx = ctx;
this.key = key;
this.w = 100;
this.h = 20;
this.w = 80;
this.h = 15;
this.speed = 10; // Target Speed
this._speed = 0; // Current Speed and direction
this.xLimit = (ctx.canvas.width - this.w);
this.reset();
}
reset() {
this.x = (this.ctx.canvas.width - this.w) / 2;
this._y = (this.ctx.canvas.height - this.h * 2);

6
Board.js
View File

@ -29,13 +29,17 @@ class Board {
}
next(nextStage) {
this.loopStop();
this.resolve(nextStage);
}
loopStop() {
this.stop = true;
if (this.requestID) {
cancelAnimationFrame(this.requestID);
this.requestID = null;
}
this.ctx.clearRect(0, 0, this.w, this.h);
this.resolve(nextStage);
}
loop() {

30
Bricks.js Normal file
View File

@ -0,0 +1,30 @@
class Brick {
constructor(type, column, row) {
this.type = type;
this.row = row;
this.column = column;
this.vspace = 2;
this.hspace = 2;
this.w = (360/8) -this.hspace;
this.h = (20) - this.vspace;
this.x = (this.w +this.hspace)*column;
this.y = 80 + (this.h +this.vspace)*row;
this.alive = true;
}
update(ctx) {
if (!this.alive) return false;
switch(this.type) {
case 1:
ctx.fillStyle = 'blue';
ctx.fillRect(this.x+1, this.y, this.w, this.h);
break;
}
return true;
}
}

31
GameOver.js
View File

@ -1,16 +1,25 @@
class GameOver {
constructor(ctx) {
this.ctx = ctx;
this.x = ctx.canvas.width;
this.y = ctx.canvas.height / 2 - 48;
constructor() {
this.w = 240;
this.h = 120;
this.cx = 360 / 2;
this.cy = 640 / 2;
this.x = this.cx - this.w/2;
this.y = this.cy - this.h/2;
}
update() {
this.centerText('GAME OVER', this.y, '48px', 'Consolas', 'Black');
update(ctx) {
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(this.x, this.y, this.w, this.h);
this.centerText(ctx, 'GAME OVER', this.cy, '48px', 'Consolas', 'Black');
this.centerText(ctx, '(Press "N" to start)', this.cy + 48, '24px', 'Consolas', 'Black');
}
centerText(txt, y, s, f, c) {
this.ctx.font = s + ' ' + f;
this.ctx.fillStyle = 'Black';
let x = (this.ctx.canvas.width - this.ctx.measureText(txt).width) / 2;
this.ctx.fillText(txt, x, y);
centerText(ctx, txt, y, s, f, c) {
ctx.font = s + ' ' + f;
ctx.fillStyle = 'Black';
let x = (ctx.canvas.width - ctx.measureText(txt).width) / 2;
ctx.fillText(txt, x, y);
}
}

54
GamePlay.js
View File

@ -4,39 +4,73 @@ class GamePlay extends Board {
this.controls = {
'KeyX': ()=>{
this.balls.push(new Ball(this.ctx, this.bar));
let b = new Ball();
b.update(this.ctx, this.bar.x + this.bar.w/2, this.bar.y);
this.balls.push(b);
this.balls[this.balls.length - 1].start();
},
'Space': ()=>{
this.balls[0].moving = true;
},
'KeyN': ()=>{
if(this.lives.get()==0) this.next(1);
}
}
this.score = new Score(ctx);
this.lives = new Lives(ctx);
this.gameOver = new GameOver();
this.score = new Score();
this.lives = new Lives();
this.bar = new Bar(ctx, key);
this.levels = new Levels();
this.newGame();
}
newGame() {
this.lives.reset();
this.score.reset();
this.nextLevel(1);
}
nextLevel(lvl) {
this.level = lvl;
this.bricks = this.levels.load(lvl);
this.bar.reset();
this.balls = [];
this.balls.push(new Ball(this.ctx, this.bar));
this.balls.push(new Ball());
}
update() {
if(this.lives.get()==0) {
gameOver.update();
this.loopStop();
this.gameOver.update(this.ctx);
// this.next(2);
} else {
this.balls = this.balls.filter(ball => ball.update());
if (this.balls.length==0) {
if ( !this.lives.lost() ) this.balls.push(new Ball(this.ctx, this.bar));
this.balls = this.balls.filter(ball => {
let r = ball.update(this.ctx, this.bar.x + this.bar.w/2, this.bar.y);
ball.collide( this.bar.x, this.bar.y, this.bar.x + this.bar.w, this.bar.y + this.bar.h );
this.bricks.forEach(b=>{
if(b.alive){
if ( ball.collide(b.x,b.y,b.x+b.w,b.y+b.h) ) {
this.score.add(1);
b.alive = false;
}
}});
return r;
}
);
if (this.bricks.length==0) {
this.nextLevel(++this.level);
}
if (this.balls.length==0) {
if ( !this.lives.lost() ) this.balls.push(new Ball());
}
this.bricks = this.bricks.filter(brick => brick.update(this.ctx));
// if ( this.bricks.length == 0 ) this.nextLevel();
this.bar.update();
}
this.score.update();
this.lives.update();
this.score.update(this.ctx);
this.lives.update(this.ctx);
}
}

2
Key.js → Keyboard.js
View File

@ -1,4 +1,4 @@
class Key {
class Keyboard {
constructor(onKeydown) {
this._pressed = {};
this.cb_onKeydown = onKeydown;

39
Levels.js Normal file
View File

@ -0,0 +1,39 @@
class Levels {
load(lvl) {
let map = [];
switch (+lvl) {
case 1:
map = [].concat(
this.row(0, [1, 0, 1, 0, 0, 1, 0, 1]),
this.row(1, [1, 1, 1, 1, 1, 1, 1, 1]),
this.row(3, [0, 1, 1, 1, 1, 1, 1, 0]),
this.row(4, [1, 1, 1, 1, 1, 1, 1, 1])
);
break;
default:
map = [].concat(
this.row(0, [1, 1, 1, 1, 1, 1, 1, 1]),
this.row(1, [1, 1, 1, 1, 1, 1, 1, 1]),
this.row(2, [1, 1, 1, 1, 1, 1, 1, 1]),
this.row(3, [1, 1, 1, 1, 1, 1, 1, 1]),
this.row(4, [1, 1, 1, 1, 1, 1, 1, 1])
);
break;
}
return this.toBricks(map);
}
row(r, bricksTypes) {
let row = [];
for (var i = 0; i < bricksTypes.length; i++) row.push([bricksTypes[i], i, r]);
return row;
}
toBricks(map) {
let bricks = [];
map.forEach(b => {
if (b[0] > 0) bricks.push(new Brick(b[0], b[1], b[2]));
});
return bricks;
}
}

20
Lives.js
View File

@ -1,15 +1,10 @@
class Lives {
constructor(ctx) {
this.ctx = ctx;
constructor() {
this.reset();
this.ctx.font = "30px Consolas";
let m = ctx.measureText('Score: 00000');
this.x = ctx.canvas.width - m.width;
this.y = 20;
}
reset() {
this.lives = 3;
this.y = 10;
}
lost() {
this.lives--;
@ -18,14 +13,15 @@ class Lives {
get() {
return this.lives;
}
update() {
if (this.y != 60) this.y++;
update(ctx) {
if (this.y != 48) this.y++;
if (this.y > 0) {
let txt = (String.fromCharCode(parseInt('26A1', 16))+" ").repeat(this.lives);
this.ctx.font = "30px Consolas";
this.ctx.fillStyle = 'Green';
this.ctx.fillText(txt, this.x, this.y);
ctx.font = "18px Consolas";
ctx.fillStyle = 'Green';
this.x = ctx.canvas.width - ctx.measureText(txt).width;
ctx.fillText(txt, this.x, this.y);
}
}
}

20
Score.js
View File

@ -1,25 +1,21 @@
class Score {
constructor(ctx) {
this.ctx = ctx;
constructor() {
this.reset();
this.ctx.font = "30px Consolas";
let m = ctx.measureText('Score: 00000');
this.x = ctx.canvas.width - m.width;
this.y = -10;
}
reset() {
this.points = 0;
this.x = 235;
this.y = -10;
}
add(x) {
this.points += x;
}
update() {
if (this.y != 30) this.y++;
update(ctx) {
if (this.y != 20) this.y++;
if (this.y > 0) {
this.ctx.font = "30px Consolas";
this.ctx.fillStyle = 'Black';
this.ctx.fillText('Score: ' + this.points, this.x, this.y);
ctx.font = "20px Consolas";
ctx.fillStyle = 'Black';
ctx.fillText('Score: ' + this.points, this.x, this.y);
}
}
}

9
index.html
View File

@ -5,14 +5,21 @@
body {
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
display: flex;
}
canvas { border:1px solid black; }
</style>
<!-- ------------------------------------------ -->
<script src="Key.js"></script>
<script src="Keyboard.js"></script>
<script src="Board.js"></script>
<!-- ------------------------------------------ -->
<script src="GameIntro.js"></script>
<!-- ------------------------------------------ -->
<script src="GameOver.js"></script>
<script src="Bricks.js"></script>
<script src="Levels.js"></script>
<script src="Score.js"></script>
<script src="Lives.js"></script>
<script src="Bar.js"></script>

15
index.js
View File

@ -7,12 +7,21 @@ document.addEventListener('DOMContentLoaded', init);
function init() {
let ctx, canvas = document.createElement("canvas");
canvas.width = window.innerWidth
canvas.height = window.innerHeight
canvas.width = 360; // window.innerWidth
canvas.height = 640; // window.innerHeight
ctx = canvas.getContext('2d');
document.body.insertBefore(canvas, document.body.childNodes[0]);
let container = document.querySelector("body");
let resize = (e) => {
container.clientWidth / container.clientHeight > 1
? (canvas.style.height = "100vh") && (canvas.style.width = "auto")
: (canvas.style.height = "auto") && (canvas.style.width = "100vw");
};
resize();
container.onresize = resize;
let key = new Key(), board;
let key = new Keyboard(), board;
function runBoard(stage) {
switch (stage) {
case 1: board = new GamePlay(ctx, key); break;