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 230bebd..b3ba909 100644 Binary files a/client/static/assets/images/grass.png and b/client/static/assets/images/grass.png differ diff --git a/server/src/Player.ts b/server/src/Player.ts new file mode 100644 index 0000000..422bc33 --- /dev/null +++ b/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 + } + +} \ No newline at end of file diff --git a/server/src/Players.ts b/server/src/Players.ts new file mode 100644 index 0000000..fa220b6 --- /dev/null +++ b/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) + } + } + } + +} \ 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}) }) });