Changed render engine, fixed health bug display bug, lowered rendering range

client/src/OtherPlayer.ts

@@ -14,14 +14,13 @@ export default class OtherPlayer {
         private _color: string,
         private _health: number
     ) {
-        this._health = 100
         this._damage = 10
     }
 
     hit(bullet: Bullet, socket: SocketIOClient.Socket) {
-        this.health -= bullet.shooter.damage
+        // this.health -= bullet.shooter.damage
         bullet.timeToLive = -1
-        socket.emit('health-update', {player: this.id, health: this.health})
+        socket.emit('hit-player', {player: this.id, damage: bullet.shooter.damage})
     }
 
     addBullet(bullet: Bullet) {

client/src/app.ts

@@ -140,7 +140,7 @@ function distance(p1: any, p2: any) {
 
 function drawMap(p5: P5) {
   for (let tile of mapTiles) {
-    if (isVisible(game.getPlayer().position, tile.position)) {
+    if (isVisible(game.getPlayer().position, {x: tile.position.x - tile.image.width / 2, y: tile.position.y - tile.image.height / 2})) {
       p5.image(tile.image, tile.position.x - game.getPlayer().position.x - tile.image.width/2, tile.position.y - game.getPlayer().position.y - tile.image.height/2)
     }
   }
@@ -149,7 +149,7 @@ function drawMap(p5: P5) {
 const sketch = (p5: P5) => {
   p5.setup = () => {
     buildMap()
-    p5.createCanvas(1920, 1080, p5.WEBGL);
+    p5.createCanvas(1920, 1080);
     canvas = document.querySelector('canvas')!
     onCanvasResize()
     window.addEventListener('resize', onCanvasResize)
@@ -175,7 +175,7 @@ const sketch = (p5: P5) => {
 
   p5.draw = () => {
     p5.background('#000000')
-    // p5.translate(p5.width/2, p5.height/2)
+    p5.translate(p5.width/2, p5.height/2)
 
 
     // drawing map background

client/src/preloadResources.ts

@@ -8,7 +8,7 @@ export default function prealoadResources(p5: P5): {
     let images = new Map<string, P5.Image>()
     let fonts = new Map<string, P5.Font>()
 
-    images.set('grass', p5.loadImage('images/grass.png'))
+    images.set('grass', p5.loadImage('images/grass.jpg'))
     images.set('powerUp', p5.loadImage('images/PowerUp.png'))
     images.set('shield', p5.loadImage('images/Shield.png'))
     images.set('healthPack', p5.loadImage('images/HealthPack.png'))

client/src/setupSocketEvents.ts

@@ -44,6 +44,10 @@ export default function setupSocketEvents(socket: SocketIOClient.Socket, game: G
         }
     })
 
+    socket.on('ded', (data: BulletData) => {
+        window.location.href = '/ded';
+    })
+    
     socket.on('health-update', (data: {id: string, health: number}) => {
         let otherPlayer = game.getOtherPlayer(data.id)
         if (otherPlayer) {
@@ -52,6 +56,7 @@ export default function setupSocketEvents(socket: SocketIOClient.Socket, game: G
         if (game.getPlayer().socket.id === data.id) {
             game.getPlayer().health = data.health
             if (data.health <= 0) {
+                game.getPlayer().socket.disconnect()
                 window.location.href = '/ded';
             }
         }

server/src/Player.ts

@@ -0,0 +1,51 @@
+import socketIO from 'socket.io'
+
+export default class Player {
+
+    private name: string
+    private position: {x: number, y: number}
+    private color: string
+    private health: number
+
+    constructor(private _socket: socketIO.Socket) {
+        this.name = 'Player#' + Math.floor(Math.random() * 10000)
+        this.position = {
+            x: Math.random()*1000 - 500,
+            y: Math.random()*1000 - 500,
+        }
+        this.color = '#' + (Math.floor(Math.random() * 256)).toString(16) + (Math.floor(Math.random() * 256)).toString(16) + (Math.floor(Math.random() * 256)).toString(16)
+        this.health = Math.floor(Math.random() * 50) + 50
+    }
+
+    get socket() {
+        return this._socket
+    }
+
+    getHealth() {
+        return this.health
+    }
+
+    takeDamage(damage: number) {
+        this.health -= damage
+    }
+
+    getPlayerDescription() {
+        return {
+            name: this.name,
+            color: this.color,
+            position: this.position,
+            id: this.socket.id,
+            health: this.health
+        }
+    }
+
+    setHealth(hp: number) {
+        this.health = hp
+    }
+
+    setPosition(x: number, y: number) {
+        this.position.x = x
+        this.position.y = y
+    }
+
+}

server/src/Players.ts

@@ -0,0 +1,57 @@
+import Player from './Player'
+
+export default class Players {
+
+    private players: {
+        socketID: string,
+        player: Player
+    }[]
+
+    constructor() {
+        this.players = []
+    }
+
+    addPlayer(id: string, player: Player) {
+        this.players.push({
+            socketID: id,
+            player: player
+        })
+    }
+
+    removePlayer(id: string) {
+        this.players = this.players.filter((player) => {
+            return player.socketID !== id
+        })
+    }
+
+    takeDamage(id: string, damage: number) {
+        for (let player of this.players) {
+            if (player.socketID === id) {
+                player.player.takeDamage(damage)
+                if (player.player.getHealth() <= 0) {
+                    player.player.socket.emit('ded')
+                    player.player.socket.disconnect()
+                    return player.player.getHealth()
+                }
+                return player.player.getHealth()
+            }
+        }
+    }
+
+    getPlayers(): Player[] {
+        let playerList = []
+        for (let player of this.players) {
+            playerList.push(player.player)
+        }
+        return playerList
+    }
+
+    updatePlayerPosition(id: string, position: {x: number, y: number}) {
+        for (let player of this.players) {
+            if (player.socketID === id) {
+                player.player.setPosition(position.x, position.y)
+            }
+        }
+    }
+
+}

server/src/app.ts

@@ -4,100 +4,13 @@ import socketIO from 'socket.io'
 import fs from 'fs'
 import cors from 'cors'
 import path from 'path'
+import Players from './Players'
+import Player from './Player'
 
 const app = express()
 const server = new http.Server(app)
 const io = new socketIO.Server(server)
 
-class Players {
-
-    private players: {
-        socketID: string,
-        player: Player
-    }[]
-
-    constructor() {
-        this.players = []
-    }
-
-    addPlayer(id: string, player: Player) {
-        this.players.push({
-            socketID: id,
-            player: player
-        })
-    }
-
-    removePlayer(id: string) {
-        this.players = this.players.filter((player) => {
-            return player.socketID !== id
-        })
-    }
-
-    updatePlayerHealth(id: string, health: number) {
-        for (let player of this.players) {
-            if (player.socketID === id) {
-                player.player.setHealth(health)
-                return
-            }
-        }
-    }
-
-    getPlayers(): Player[] {
-        let playerList = []
-        for (let player of this.players) {
-            playerList.push(player.player)
-        }
-        return playerList
-    }
-
-    updatePlayerPosition(id: string, position: {x: number, y: number}) {
-        for (let player of this.players) {
-            if (player.socketID === id) {
-                player.player.setPosition(position.x, position.y)
-            }
-        }
-    }
-
-}
-
-class Player {
-
-    private name: string
-    private position: {x: number, y: number}
-    private color: string
-    private health: number
-
-    constructor(private socket: socketIO.Socket) {
-        this.name = 'Player#' + Math.floor(Math.random() * 10000)
-        this.position = {
-            x: Math.random()*500 - 250,
-            y: Math.random()*500 - 250,
-        }
-        this.color = '#' + (Math.floor(Math.random() * 256)).toString(16) + (Math.floor(Math.random() * 256)).toString(16) + (Math.floor(Math.random() * 256)).toString(16)
-        this.health = 100
-    }
-
-    getPlayerDescription() {
-        return {
-            name: this.name,
-            color: this.color,
-            position: this.position,
-            id: this.socket.id,
-            health: this.health
-        }
-    }
-
-    setHealth(hp: number) {
-        this.health = hp
-    }
-
-    setPosition(x: number, y: number) {
-        this.position.x = x
-        this.position.y = y
-    }
-
-}
-
 const players = new Players()
 
 app.use(cors())
@@ -151,9 +64,9 @@ io.on('connection', function(socket: socketIO.Socket) {
         io.emit('shoot', {id: socket.id, position: data.position, direction: data.direction})
     })
 
-    socket.on('health-update', (data: {player: string, health: number}) => {
+    socket.on('hit-player', (data: {player: string, damage: number}) => {
-        players.updatePlayerHealth(data.player, data.health)
+        let hpLeft = players.takeDamage(data.player, data.damage)
-        io.emit('health-update', {id: data.player, health: data.health})
+        io.emit('health-update', {id: data.player, health: hpLeft})
     })
 
 });