feat: add player boost and particles on eating #11

src/Configs.js

@@ -46,6 +46,8 @@ const GlobalConfigs = {
 			up2: "W",
 			down1: "DOWN",
 			down2: "S",
+			boost1: "SHIFT",
+			boost2: "SPACE",
 		},
 	},
 };

src/Objects/Snake/EventSystem.js

@@ -1,7 +1,8 @@
 export const EVENTS_NAMES = {
-	playerDied: "playerDied",
+	gameOver: "gameOver",
 	restartGame: "restartGame",
 	increaseScore: "increaseScore",
+	updateScore: "updateScore",
 };
 
 const EventSystem = new Phaser.Events.EventEmitter();

src/Objects/Snake/Player.js

@@ -8,6 +8,7 @@ const DIRECTIONS = {
 	RIGHT: "right"
 }
 const TILE_SIZE = GlobalConfigs.snakeTileSize;
+const SNAKE_NORMAL_SPEED = 150;
 
 export default class Player {
 	constructor(scene, x, y) {
@@ -19,7 +20,7 @@ export default class Player {
 		this.tail = new Phaser.Geom.Point(x, y);
 
 		this.isAlive = true;
-		this.speed = 150;
+		this.speed = SNAKE_NORMAL_SPEED;
 		this.moveTime = 0;
 
 		this.heading = DIRECTIONS.RIGHT;
@@ -37,10 +38,18 @@ export default class Player {
 		const { isAlive, keys } = this;
 		if (!isAlive || !keys) return;
 
-		if (keys.left1.isDown || keys.left2.isDown) this.goLeft();
-		else if (keys.right1.isDown || keys.right2.isDown) this.goRight();
-		else if (keys.up1.isDown || keys.up2.isDown) this.goUp();
-		else if (keys.down1.isDown || keys.down2.isDown) this.goDown();
+		const { left1, left2, right1, right2, up1, up2, down1, down2, boost1, boost2 } = keys;
+
+		// Directions
+		if (left1.isDown || left2.isDown) this.goLeft();
+		else if (right1.isDown || right2.isDown) this.goRight();
+		else if (up1.isDown || up2.isDown) this.goUp();
+		else if (down1.isDown || down2.isDown) this.goDown();
+
+		// Boost
+		if (boost1.isDown || boost2.isDown) this.speed = SNAKE_NORMAL_SPEED / 2;
+		else this.speed = SNAKE_NORMAL_SPEED;
+
 
 		this.move(time);
 	}
@@ -78,7 +87,8 @@ export default class Player {
 		// Check if player collided with body
 		if (Phaser.Actions.GetFirst(this.body.getChildren(), { x: this.head.x, y: this.head.y }, 1)) {
 			this.isAlive = false;
-			EventSystem.emit(EVENTS_NAMES.playerDied);
+			EventSystem.emit(EVENTS_NAMES.gameOver);
+			return;
 		}
 
 		// Change individual body elements direction
@@ -87,7 +97,6 @@ export default class Player {
 		for (let i = 0; i < reversedBody.length - 1; i++) {
 			reversedBody[i].setDirection(reversedBody[i + 1].direction);
 		}
-
 	}
 
 	grow(spriteName) {

src/Objects/Snake/UpdateScoreLabel.js

@@ -0,0 +1,49 @@
+import { randomInt } from "201flaviosilva-utils";
+
+import EventSystem, { EVENTS_NAMES } from "./EventSystem";
+import { TextStyle } from "../../Theme";
+
+export default class UpdateScoreLabel extends Phaser.GameObjects.Text {
+	constructor(scene, x = 10, y = 10, score = 0, spriteKey = "JS", style = TextStyle.snake.updateScoreLabel) {
+		super(scene, x, y, score, style);
+		scene.add.existing(this);
+
+		this.score = score;
+
+		this.setDepth(1000);
+		this.setOrigin(0.5);
+		this.setColor("#ff0");
+
+		this.particles = scene.add.particles(spriteKey);
+		this.particlesEmitter = this.particles.createEmitter({
+			x, y,
+			quantity: 64,
+			frequency: -1,
+			scale: { start: 1, end: 0 },
+			alpha: { start: 1, end: 0 },
+			angle: { start: 0, end: 360, steps: 64 },
+			rotate: { start: randomInt(-360, 360), end: randomInt(-360, 360) },
+			speed: { min: 500, max: 750 },
+			lifespan: { min: 750, max: 1000 },
+		});
+		this.particlesEmitter.explode();
+	}
+
+	animate({ x, y }) {
+		this.scene.tweens.add({
+			targets: [this],
+			x, y,
+			ease: "Linear",
+			duration: 1000,
+			scale: 2,
+			onComplete: () => this.kill(),
+		});
+	}
+
+	kill() {
+		EventSystem.emit(EVENTS_NAMES.updateScore, this.score);
+		this.particlesEmitter.stop();
+		this.particles.destroy();
+		this.destroy();
+	}
+}

src/Scenes/GamePlay/SnakeAll.js

@@ -1,11 +1,13 @@
+import { range, randomInt } from "201flaviosilva-utils";
+
 import GlobalConfigs from "../../Configs";
 import DebugFPS from "../../Components/DebugFPS";
 import Button from "../../Components/Button";
 import EventSystem, { EVENTS_NAMES } from "../../Objects/Snake/EventSystem";
 
 import { TextStyle } from "../../Theme";
 
-
+import UpdateScoreLabel from "../../Objects/Snake/UpdateScoreLabel";
 import Player from "../../Objects/Snake/Player";
 import Apple from "../../Objects/Snake/Apple";
 
@@ -16,7 +18,6 @@ export default class SnakeAll extends Phaser.Scene {
 		const config = {
 			key: "SnakeAll",
 			cameras: {
-				// backgroundColor: 0x00ff00,
 				x: 0,
 				y: 8,
 				width: 1280, // 40*32
@@ -66,13 +67,14 @@ export default class SnakeAll extends Phaser.Scene {
 			loop: true,
 		});
 
-		EventSystem.once(EVENTS_NAMES.playerDied, (value) => {
+		EventSystem.removeListener(EVENTS_NAMES.gameOver);
+		EventSystem.on(EVENTS_NAMES.gameOver, (value) => {
 			this.isAlive = false;
 			this.newAppleTimer.paused = true;
 		});
 
-		EventSystem.once(EVENTS_NAMES.restartGame, (value) => { this.scene.restart(); });
-		this.events.on("shutdown", () => EventSystem.removeAllListeners());
+		EventSystem.removeListener(EVENTS_NAMES.restartGame);
+		EventSystem.on(EVENTS_NAMES.restartGame, (value) => { this.scene.restart(); });
 	}
 
 	newApple() {
@@ -89,7 +91,7 @@ export default class SnakeAll extends Phaser.Scene {
 		this.apples.push(apple);
 	}
 
-	update(time, delta) {
+	update(time) {
 		if (!this.isAlive) return;
 
 		this.player.update(time);
@@ -98,7 +100,7 @@ export default class SnakeAll extends Phaser.Scene {
 			if (this.player.head.x === apple.x && this.player.head.y === apple.y && apple.isAlive) {
 				this.player.grow(apple.spriteName);
 				apple.kill();
-				EventSystem.emit(EVENTS_NAMES.increaseScore, 1);
+				EventSystem.emit(EVENTS_NAMES.increaseScore, 1, apple, apple.spriteName);
 			}
 		});
 	}
@@ -144,13 +146,37 @@ export class SnakeAllUI extends Phaser.Scene {
 			upCallback: () => { EventSystem.emit(EVENTS_NAMES.restartGame); },
 		}).changeVisibility(false);
 
-		EventSystem.once(EVENTS_NAMES.playerDied, (value) => this.restartButton.changeVisibility(true));
-		EventSystem.on(EVENTS_NAMES.increaseScore, this.updateScore.bind(this));
-		this.events.on("shutdown", () => EventSystem.removeAllListeners());
+		const SQUARES_PARTICLES = this.add.particles("SquaresParticles");
+		this.scoreParticles = SQUARES_PARTICLES.createEmitter({
+			frame: range(0, 9),
+			x: this.scoreLabel.x,
+			y: this.scoreLabel.y,
+			quantity: 64,
+			frequency: -1,
+			scale: { start: 0.75, end: 0 },
+			alpha: { start: 0.75, end: 0 },
+			angle: { start: 0, end: 360, steps: 64 },
+			rotate: { start: randomInt(-360, 360), end: randomInt(-360, 360) },
+			speed: { min: 500, max: 750 },
+			lifespan: 1000,
+		});
+
+		// Events
+		EventSystem.on(EVENTS_NAMES.gameOver, (value) => this.restartButton.changeVisibility(true));
+
+		EventSystem.removeListener(EVENTS_NAMES.increaseScore);
+		EventSystem.on(EVENTS_NAMES.increaseScore, this.createNewScoreLabel.bind(this));
+
+		EventSystem.removeListener(EVENTS_NAMES.updateScore);
+		EventSystem.on(EVENTS_NAMES.updateScore, score => {
+			this.scoreParticles.explode();
+			this.score += score;
+			this.scoreLabel.setText(this.score);
+		});
 	}
 
-	updateScore(value, position) {
-		this.score += value;
-		this.scoreLabel.setText(this.score);
+	createNewScoreLabel(score, { x, y }, spriteKey) {
+		const updateScoreLabel = new UpdateScoreLabel(this, x, y, score, spriteKey);
+		updateScoreLabel.animate(this.scoreLabel);
 	}
 }

src/Theme.js

@@ -92,6 +92,11 @@ export const TextStyle = {
 			align: "center",
 			color: "#ffff00",
 		},
+		updateScoreLabel: {
+			fontFamily: PressStart2P,
+			fontSize: "16px",
+			align: "center",
+		},
 	},
 	start: {},
 	objects: {