From 4e7902beecb9fcd94fa045a0ddd2f8f98648d58f Mon Sep 17 00:00:00 2001 From: luciano cardozo casariego Date: Wed, 24 Nov 2021 18:21:44 -0300 Subject: [PATCH] Add pause feature --- src/Asteroid.js | 13 +++++++++++ src/Bullet.js | 13 +++++++++++ src/Particle.js | 19 ++++++++++++++-- src/Reacteroids.js | 57 ++++++++++++++++++++++++++++++++++++++++------ src/Ship.js | 18 +++++++++++++++ src/style.css | 2 +- 6 files changed, 112 insertions(+), 10 deletions(-) diff --git a/src/Asteroid.js b/src/Asteroid.js index e48d9e2..4521115 100644 --- a/src/Asteroid.js +++ b/src/Asteroid.js @@ -15,6 +15,8 @@ export default class Asteroid { this.create = args.create; this.addScore = args.addScore; this.vertices = asteroidVertices(8, args.size) + + this.beforePauseVelocity = this.velocity } destroy(){ @@ -56,6 +58,17 @@ export default class Asteroid { } } + pause(){ + this.velocity = { + x: 0, + y: 0 + } + } + + unPause(){ + this.velocity = this.beforePauseVelocity + } + render(state){ // Move this.position.x += this.velocity.x; diff --git a/src/Bullet.js b/src/Bullet.js index 8a26e9b..7176f7d 100644 --- a/src/Bullet.js +++ b/src/Bullet.js @@ -13,12 +13,25 @@ export default class Bullet { y:posDelta.y / 2 }; this.radius = 2; + + this.beforePauseVelocity = this.velocity } destroy(){ this.delete = true; } + pause(){ + this.velocity = { + x: 0, + y: 0 + } + } + + unPause(){ + this.velocity = this.beforePauseVelocity + } + render(state){ // Move this.position.x += this.velocity.x; diff --git a/src/Particle.js b/src/Particle.js index 91c0f24..a5ef289 100644 --- a/src/Particle.js +++ b/src/Particle.js @@ -5,12 +5,24 @@ export default class Particle { this.radius = args.size; this.lifeSpan = args.lifeSpan; this.inertia = 0.98; + + this.isPaused = false } destroy(){ this.delete = true; } + pause(){ + this.velocity = {x:0, y:0} + this.isPaused = true + } + + unPause(){ + this.isPaused = false + this.velocity = {x:0.5, y:0.5} + } + render(state){ // Move this.position.x += this.velocity.x; @@ -19,11 +31,14 @@ export default class Particle { this.velocity.y *= this.inertia; // Shrink - this.radius -= 0.1; + if(!this.isPaused){ + this.radius -= 0.1; + this.lifeSpan -= 1 + } if(this.radius < 0.1) { this.radius = 0.1; } - if(this.lifeSpan-- < 0){ + if(this.lifeSpan < 0){ this.destroy() } diff --git a/src/Reacteroids.js b/src/Reacteroids.js index dc844d7..c2269f0 100644 --- a/src/Reacteroids.js +++ b/src/Reacteroids.js @@ -10,7 +10,8 @@ const KEY = { A: 65, D: 68, W: 87, - SPACE: 32 + SPACE: 32, + ESC: 27 }; export class Reacteroids extends Component { @@ -29,11 +30,13 @@ export class Reacteroids extends Component { up : 0, down : 0, space : 0, + esc : 0, }, asteroidCount: 3, currentScore: 0, topScore: localStorage['topscore'] || 0, - inGame: false + inGame: false, + pause: false } this.ship = []; this.asteroids = []; @@ -53,19 +56,44 @@ export class Reacteroids extends Component { handleKeys(value, e){ let keys = this.state.keys; - if(e.keyCode === KEY.LEFT || e.keyCode === KEY.A) keys.left = value; - if(e.keyCode === KEY.RIGHT || e.keyCode === KEY.D) keys.right = value; - if(e.keyCode === KEY.UP || e.keyCode === KEY.W) keys.up = value; - if(e.keyCode === KEY.SPACE) keys.space = value; + const finalValue = !this.state.pause ? value : 0 + + if(e.keyCode === KEY.LEFT || e.keyCode === KEY.A) keys.left = finalValue; + if(e.keyCode === KEY.RIGHT || e.keyCode === KEY.D) keys.right = finalValue; + if(e.keyCode === KEY.UP || e.keyCode === KEY.W) keys.up = finalValue; + if(e.keyCode === KEY.SPACE) keys.space = finalValue; this.setState({ keys : keys }); } + handlePause(e){ + if(e.keyCode === KEY.ESC && this.state.inGame){ + + const pause = this.state.pause + if(pause){ + this.ship[0].unPause() + this.asteroids.forEach(asteroid => asteroid.unPause()) + this.bullets.forEach(bullet => bullet.unPause()) + this.particles.forEach(particle => particle.unPause()) + }else{ + this.ship[0].pause() + this.asteroids.forEach(asteroid => asteroid.pause()) + this.bullets.forEach(bullet => bullet.pause()) + this.particles.forEach(particle => particle.pause()) + } + + this.setState({ + pause: !pause + }) + } + } + componentDidMount() { window.addEventListener('keyup', this.handleKeys.bind(this, false)); window.addEventListener('keydown', this.handleKeys.bind(this, true)); window.addEventListener('resize', this.handleResize.bind(this, false)); + window.addEventListener('keydown', this.handlePause.bind(this)); const context = this.refs.canvas.getContext('2d'); this.setState({ context: context }); @@ -77,6 +105,7 @@ export class Reacteroids extends Component { window.removeEventListener('keyup', this.handleKeys); window.removeEventListener('keydown', this.handleKeys); window.removeEventListener('resize', this.handleResize); + window.removeEventListener('keydown', this.handlePause); } update() { @@ -222,6 +251,7 @@ export class Reacteroids extends Component { render() { let endgame; let message; + let onPause; if (this.state.currentScore <= 0) { message = '0 points... So sad.'; @@ -244,14 +274,27 @@ export class Reacteroids extends Component { ) } + if(this.state.pause){ + onPause = ( +
+

Pause

+

press [ESC] to resume

+
+ ) + }else{ + onPause = (
) + } + return (
{ endgame } + { onPause } Score: {this.state.currentScore} Top Score: {this.state.topScore} Use [A][S][W][D] or [←][↑][↓][→] to MOVE
- Use [SPACE] to SHOOT + Use [SPACE] to SHOOT
+ Use [ESC] to PAUSE