diff --git a/Ball.js b/Ball.js new file mode 100644 index 0000000..4574385 --- /dev/null +++ b/Ball.js @@ -0,0 +1,97 @@ +class Ball { + constructor(ctx, bar) { + this.ctx = ctx; + this.bar = bar; + this.size = 15; + + this.moving = false; + this.x = this.bar.x + (this.bar.w) / 2; + this.y = this.bar.y - this.size -1; + + + this.speed = 5; + // this.angle = 90; + this.bounce(220,340); + + this.color = 'red'; + + 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(); + 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(); + } + + move() { + if (this.moving) { + this.x += this.speed * Math.cos(this.angle); + this.y += this.speed * Math.sin(this.angle); + + // Escaped from the pad + if (this.y > this.limits.b) { + this.moving = false; + return false; + } + + 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); + } else { + if ( this.x < this.limits.l ) { + // Left wall + if (this.angle this.limits.r ) { + // Right wall + if (this.angle 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); + } + } +} diff --git a/index.html b/index.html index 183c13d..daaa296 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,11 @@ + + + diff --git a/index.js b/index.js index baeffdf..b15b640 100644 --- a/index.js +++ b/index.js @@ -17,29 +17,38 @@ function init() { } // ------------------------------------------------------------------- - let gstate = 1; + let gstate = 0; let key = new Key(controls); let intro = new Intro(ctx); + let gameOver = new GameOver(ctx); let score = new Score(ctx); + let lives = new Lives(ctx); let bar = new Bar(ctx, key); + let balls = []; + newGame(); function controls(e) { switch (gstate) { case 0: // Waiting to start - if (e.code=='Space') newGame(); + if (e.code == 'Space') newGame(); break; case 1: // Playing... + if (e.code == 'Space' && balls.length>0) balls[balls.length - 1].start(); + else + if (e.code == 'KeyX') { balls.push(new Ball(ctx, bar)); balls[balls.length - 1].start(); } break; case 2: // Game Over - if (e.code=='Space') newGame(); + if (e.code == 'Space') newGame(); break; } } function newGame() { gstate = 1; + lives.reset(); score.reset(); bar.reset(); + balls.push(new Ball(ctx, bar)); } function refresh() { @@ -48,51 +57,23 @@ function init() { intro.update(); break; case 1: // Playing... - bar.update(); + case 2: + + if(gstate==2) { + gameOver.update(); + } else { + bar.update(); + balls = balls.filter(ball => ball.update()); + if (balls.length==0) { + if ( lives.lost() ) gstate=2; + else balls.push(new Ball(ctx, bar)); + } + } score.update(); - break; - case 2: // Game Over + lives.update(); break; } } run(); } - - - - -class ball { - constructor(x, y, speed, angle) { - this.x = x; - this.y = y; - this.speed = speed; - this.angle = angle; - this.color = 'black'; - this.size = 20; - } - - update() { - this.move(); - this.draw(); - } - - draw() { - this.ctx.fillStyle = this.color; - this.ctx.fillRect(this.x, this.y, this.size, this.size); - } - - move() { - this.x += this.speed * Math.cos(this.angle); - this.y += this.speed * Math.sin(this.angle); - - if (this.x < 0 || this.x > this.ctx.canvas.width || this.y < 0 || this.y > this.ctx.canvas.height) - this.bounce(); - } - - bounce() { - this.angle += 180; - } -} - -