From 9c5918c19b7ef542ef61652d5000924dee9f3ede Mon Sep 17 00:00:00 2001 From: Darius Rapalis Date: Sat, 30 Jan 2021 20:53:35 +0200 Subject: [PATCH] Changed render engine, fixed health bug display bug, lowered rendering range --- client/src/OtherPlayer.ts | 5 +- client/src/app.ts | 6 +- client/src/preloadResources.ts | 2 +- client/src/setupSocketEvents.ts | 5 ++ client/static/assets/images/grass.png | Bin 438 -> 379 bytes server/src/Player.ts | 51 ++++++++++++++ server/src/Players.ts | 57 +++++++++++++++ server/src/app.ts | 97 ++------------------------ 8 files changed, 124 insertions(+), 99 deletions(-) create mode 100644 server/src/Player.ts create mode 100644 server/src/Players.ts diff --git a/client/src/OtherPlayer.ts b/client/src/OtherPlayer.ts index b638f06..4e32202 100644 --- a/client/src/OtherPlayer.ts +++ b/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) { diff --git a/client/src/app.ts b/client/src/app.ts index 7207662..3012626 100644 --- a/client/src/app.ts +++ b/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 diff --git a/client/src/preloadResources.ts b/client/src/preloadResources.ts index 3995de4..f735db8 100644 --- a/client/src/preloadResources.ts +++ b/client/src/preloadResources.ts @@ -8,7 +8,7 @@ export default function prealoadResources(p5: P5): { let images = new Map() let fonts = new Map() - 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')) diff --git a/client/src/setupSocketEvents.ts b/client/src/setupSocketEvents.ts index bac54db..630a787 100644 --- a/client/src/setupSocketEvents.ts +++ b/client/src/setupSocketEvents.ts @@ -43,6 +43,10 @@ export default function setupSocketEvents(socket: SocketIOClient.Socket, game: G otherPlayer.addBullet(new Bullet(otherPlayer, data.direction)) } }) + + socket.on('ded', (data: BulletData) => { + window.location.href = '/ded'; + }) socket.on('health-update', (data: {id: string, health: number}) => { let otherPlayer = game.getOtherPlayer(data.id) @@ -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'; } } diff --git a/client/static/assets/images/grass.png b/client/static/assets/images/grass.png index 230bebd61cfc815099e64bff7fcf1af3134986f7..b3ba9095fcac852a1717ffb76b8fea8688616b51 100644 GIT binary patch literal 379 zcmeAS@N?(olHy`uVBq!ia0y~yU~B+kMrNSMJWlmLK#H+A$lZxy-8q?;Kn_c~qpu?a z!^VE@KZ&eBK3jlKh%18+J3}((r2Sj|0Yx|qJR*x382Ao@Fyrz36)8Z$f1WOmAr-gY zUfIaYY{+owe7o%MQQ>6E~AE4!yV_l^LXxkUL@UI&A-d= zN3+y^{+2Tj4jkvd{(bV(9)&{vQU`Q}{y85}Sb4q9e07uV`g8%>k literal 438 zcmeAS@N?(olHy`uVBq!ia0vp^2SAvG8AvYpRA>UE7>k44ofy`glX(f`u%tWsIx;Y9 z?C1WI$O`1M1^9%xGWf7FBy&#MzvUlLgtNdSvY3H^?=T269?xHq0yM(X)5S5Q;?~=% zyE$D9c~~!AZ~C2I7WpTzLNsHOp#+<%x`EsM?`x07HS&G1FE_Z)B-`N15+wh$cUklT z=9+%Rs0GY#f=zETN$!Ym-pwStK&~aDk?(*K)5`u&ZU-)jcQEYx!m6~v|7s3*%7Z%I zcU&b6RRW7xtr)sFme`$=X7r9%VEO@6cEB!lv+jh(-=;gXFEGAx>=1jwprbV5mqtE| zPHiK{1CX-cA!oNau)VwfV4VZ|3U-ji8#)|bE#4!z0cb;mK2RAw9r9vpot)1bdG { + 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) + } + } + } + +} \ No newline at end of file diff --git a/server/src/app.ts b/server/src/app.ts index 8b06b59..4f35365 100644 --- a/server/src/app.ts +++ b/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}) => { - players.updatePlayerHealth(data.player, data.health) - io.emit('health-update', {id: data.player, health: data.health}) + socket.on('hit-player', (data: {player: string, damage: number}) => { + let hpLeft = players.takeDamage(data.player, data.damage) + io.emit('health-update', {id: data.player, health: hpLeft}) }) });