Explosion, adjacent explosion and precision fix on player get pos

Author: Gabriel de Oliveira Rohden

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [{
+        "type": "node",
+        "request": "launch",
+        "name": "Launch server",
+        "program": "${workspaceFolder}\\server\\src\\server.ts",
+        "outFiles": [
+            "${workspaceFolder}/**/*.js"
+        ]
+    }]
+}

client/src/assets.ts

@@ -1,8 +1,11 @@
 export const MAIN_TILES = 'MAIN_TILES'
 
+export const BOMB_TIME = 2000;
+
 export const ASSETS = {
     PLAYER: 'dude',
-    BOMB: 'bomb'
+    BOMB: 'bomb',
+    EXPLOSION: 'explosion'
 }
 
 export const MAPS = {

client/src/game.ts

@@ -1,8 +1,10 @@
 import { BackendState, GameDimensions, PlayerDirections, SimpleCoordinates, SocketEvents } from "commons"
 import Phaser from "phaser"
-import { ASSETS, MAIN_TILES, MAPS } from "./assets"
+import { ASSETS, MAIN_TILES, MAPS, BOMB_TIME } from "./assets"
 import Socket = SocketIOClient.Socket;
 
+const debug = true;
+
 interface Directions {
     left: boolean;
     right: boolean;
@@ -29,8 +31,13 @@ export class BombGame {
     private backgroundMap: SceneMap;
     private breakableMap: SceneMap;
     private wallsMap: SceneMap;
+    private spawnedBombCount = 0
+    private playerMaxBombSpawn = 2
     private bombMap: {
-        [xy: string]: Phaser.GameObjects.Sprite;
+        [xy: string]: {
+            sprite: Phaser.GameObjects.Sprite,
+            range: number
+        }
     } = {};
 
     private playerRegistry: {
@@ -79,6 +86,11 @@ export class BombGame {
             frameWidth: GameDimensions.playerWidth,
             frameHeight: GameDimensions.playerHeight
         })
+
+        scene.load.spritesheet(ASSETS.EXPLOSION, "assets/explosion.png", {
+            frameWidth: GameDimensions.playerWidth,
+            frameHeight: GameDimensions.playerHeight
+        })
     }
 
     private static applyPhysicsAndAnimations(
@@ -143,7 +155,7 @@ export class BombGame {
                 default: "arcade",
                 arcade: {
                     gravity: {},
-                    debug: true
+                    debug
                 }
             },
             scene: {
@@ -174,16 +186,7 @@ export class BombGame {
         player.setBounce(1.2);
         player.setCollideWorldBounds(true);
 
-        scene.physics.add.collider(
-            player,
-            this.breakableMap.layer,
-            (_, tile: unknown) => {
-                const { x, y } = tile as SimpleCoordinates;
-
-                this.breakableMap.map.removeTileAt(x, y);
-                this.socket.emit(SocketEvents.WallDestroyed, { x, y })
-            }
-        );
+        scene.physics.add.collider(player, this.breakableMap.layer);
 
         scene.physics.add.collider(player, this.wallsMap.layer);
 
@@ -288,7 +291,51 @@ export class BombGame {
         })
     }
 
-    private fabricBombAt(scene: Phaser.Scene, x: number, y: number) {
+    private putExplosionAt(scene: Phaser.Scene, x: number, y: number, range: number) {
+        const { tileWidth, tileHeight } = GameDimensions;
+        const offset = Math.floor(range / 2);
+        const explosions: Array<Phaser.GameObjects.Sprite> = []
+        const putAndExplodeAdjacent = (sx: number, sy: number) => {
+            const sprite = scene.add.sprite(sx, sy, ASSETS.EXPLOSION)
+
+            explosions.push(sprite)
+        }
+
+        for (let i = 0; i < range; i++) {
+            const nX = ((x + i) - offset)
+            const nY = ((y + i) - offset)
+            putAndExplodeAdjacent(
+                nX * tileWidth + tileWidth / 2,
+                y * tileHeight + tileHeight / 2
+            );
+
+            putAndExplodeAdjacent(
+                x * tileWidth + tileWidth / 2,
+                nY * tileHeight + tileHeight / 2,
+            );
+
+            this.explodeBombAt(scene, nX, y)
+            this.explodeBombAt(scene, x, nY)
+        }
+
+        setTimeout(() => {
+            explosions.forEach(e => e.destroy(true))
+        }, 1000)
+    }
+
+    private destroyWallAt(x: number, y: number) {
+        this.breakableMap.map.removeTileAt(x, y);
+        this.socket.emit(SocketEvents.WallDestroyed, { x, y })
+    }
+
+    private tryToSetupBombAt(scene: Phaser.Scene, x: number, y: number) {
+        if (this.spawnedBombCount >= this.playerMaxBombSpawn) {
+            return
+        } else {
+            this.spawnedBombCount++
+        }
+
+
         const { tileWidth, tileHeight } = GameDimensions;
         const newBomb = scene.add.sprite(
             x * tileWidth + tileWidth / 2,
@@ -297,25 +344,49 @@ export class BombGame {
         );
 
         const key = `${x}-${y}`
-        this.bombMap[key] = newBomb
+        this.bombMap[key] = {
+            sprite: newBomb,
+            range: 3
+        }
 
         setTimeout(() => {
-            if (this.hasABombAt(x, y)) {
-                this.bombMap[key].destroy(true);
-                delete this.bombMap[key];
+            this.explodeBombAt(scene, x, y)
+            this.spawnedBombCount--
+        }, BOMB_TIME);
+    }
+
+    private explodeBombAt(scene: Phaser.Scene, x: number, y: number) {
+        const key = `${x}-${y}`
+
+        if (this.hasBombAt(x, y)) {
+            const bomb = this.bombMap[key]
+            const offset = Math.floor(bomb.range / 2);
+            for (let i = 0; i < 3; i++) {
+                this.destroyWallAt((i + x) - offset, y);
+                this.destroyWallAt(x, (i + y) - offset);
             }
-        }, 1000);
+
+            bomb.sprite.destroy(true);
+            delete this.bombMap[key];
+
+            this.putExplosionAt(scene, x, y, bomb.range)
+
+            debug && console.debug(`Bomb exploded at x: ${x} y:${y}`)
+        } else {
+            debug && console.debug(`Bomb not found at x: ${x} y:${y}`)
+        }
     }
 
-    private hasABombAt(x: number, y: number): boolean {
+    private hasBombAt(x: number, y: number): boolean {
         return `${x}-${y}` in this.bombMap
     }
 
     private findPlayerMapPosition(coords: SimpleCoordinates): SimpleCoordinates {
         const { tileWidth, tileHeight } = GameDimensions;
         return {
             x: Math.floor(coords.x / tileWidth),
-            y: Math.floor(coords.y / tileHeight)
+            // +(tileHeight / 2) is a precision fix :D
+            y: Math.floor((coords.y + (tileHeight / 2)) / tileHeight)
         }
     }
 
@@ -337,8 +408,8 @@ export class BombGame {
 
                 if (cursors.space!.isDown) {
                     const { x, y } = this.findPlayerMapPosition(player);
-                    if (!this.hasABombAt(x, y)) {
-                        this.fabricBombAt(scene, x, y)
+                    if (!this.hasBombAt(x, y)) {
+                        this.tryToSetupBombAt(scene, x, y)
                     }
                 }
             } else {

server/build/static/assets/bomb.png

@@ -33,6 +33,7 @@ const state: BackendState = {
 }
 
 io.on('connection', function (socket) {
+    const playerId = socket.id
     const newPlayer = {
         directions: {
             down: false,
@@ -43,24 +44,25 @@ io.on('connection', function (socket) {
             y: 0
         }
     }
-    state.playerRegistry[socket.id] = newPlayer
+
+    state.playerRegistry[playerId] = newPlayer
 
     socket.emit(SocketEvents.InitWithState, state)
-    socket.broadcast.emit(SocketEvents.NewPlayer, {...newPlayer, id: socket.id})
+    socket.broadcast.emit(SocketEvents.NewPlayer, { ...newPlayer, id: playerId })
 
     socket.on(SocketEvents.Movement, (directions: PlayerDirections) => {
-        const player = state.playerRegistry[socket.id]
+        const player = state.playerRegistry[playerId]
         if (player) {
             player.directions = directions
         }
     })
 
     socket.on(SocketEvents.Disconnect, () => {
-        if (socket.id in state.playerRegistry) {
-            delete state.playerRegistry[socket.id]
+        if (playerId in state.playerRegistry) {
+            delete state.playerRegistry[playerId]
         }
 
-        io.sockets.emit(SocketEvents.PlayerDisconnect, socket.id)
+        io.sockets.emit(SocketEvents.PlayerDisconnect, playerId)
     })
 
     socket.on(SocketEvents.WallDestroyed, (coordinates: SimpleCoordinates) => {