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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
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,43 +57,108 @@ 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) {
this.angle = this.g2r( Math.floor(Math.random() * (max-min)) + min );
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);
}
g2r(deg) {
return ( ((360+deg)%360) * Math.PI) / 180.0;
return (((360 + deg) % 360) * Math.PI) / 180.0;
}
r2g(rad) {
return rad*180 / Math.PI;
return rad * 180 / Math.PI;
}
}

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>

21
index.js
View File

@ -7,20 +7,29 @@ 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) {
switch (stage) {
case 1: board = new GamePlay(ctx, key); break;
default: board = new GameIntro(ctx,key); break;
default: board = new GameIntro(ctx, key); break;
}
board
.run()
.then( stage=>runBoard(stage), e=>{} );;
.then(stage => runBoard(stage), e => { });;
}
runBoard(0);
}