From 9d54842c2f5b084ab1b0de4c4b8978cc43297546 Mon Sep 17 00:00:00 2001 From: Mike Vink Date: Tue, 13 Jul 2021 18:30:12 +0200 Subject: feat(WebSockets): client server WebSocket connect --- client/src/game.ts | 78 +++++++++++++++++++++++++++++----------------------- client/tsconfig.json | 26 +++++++++++++----- 2 files changed, 62 insertions(+), 42 deletions(-) (limited to 'client') diff --git a/client/src/game.ts b/client/src/game.ts index ea9ca26..daaf5d9 100644 --- a/client/src/game.ts +++ b/client/src/game.ts @@ -1,4 +1,4 @@ -import 'phaser'; +import Phaser from 'phaser'; export default class Demo extends Phaser.Scene { @@ -24,6 +24,7 @@ export default class Demo extends Phaser.Scene "assets/atlas/atlas.json"); } + create () { const map = this.make.tilemap({ key: "map" }); @@ -49,7 +50,7 @@ export default class Demo extends Phaser.Scene // Create a sprite with physics enabled via the physics system. The image used for the sprite has // a bit of whitespace, so I'm using setSize & setOffset to control the size of the player's body. player = this.physics.add - .sprite(spawnPoint.x, spawnPoint.y, "atlas", "misa-front") + .sprite(spawnPoint.x as number, spawnPoint.y as number, "atlas", "misa-front") .setSize(30, 40) .setOffset(0, 24); @@ -59,28 +60,28 @@ export default class Demo extends Phaser.Scene // animation manager so any sprite can access them. const anims = this.anims; anims.create({ - key: "misa-left-walk", - frames: anims.generateFrameNames("atlas", { prefix: "misa-left-walk.", start: 0, end: 3, zeroPad: 3 }), - frameRate: 10, - repeat: -1 + key: "misa-left-walk", + frames: anims.generateFrameNames("atlas", { prefix: "misa-left-walk.", start: 0, end: 3, zeroPad: 3 }), + frameRate: 10, + repeat: -1 }); anims.create({ - key: "misa-right-walk", - frames: anims.generateFrameNames("atlas", { prefix: "misa-right-walk.", start: 0, end: 3, zeroPad: 3 }), - frameRate: 10, - repeat: -1 + key: "misa-right-walk", + frames: anims.generateFrameNames("atlas", { prefix: "misa-right-walk.", start: 0, end: 3, zeroPad: 3 }), + frameRate: 10, + repeat: -1 }); anims.create({ - key: "misa-front-walk", - frames: anims.generateFrameNames("atlas", { prefix: "misa-front-walk.", start: 0, end: 3, zeroPad: 3 }), - frameRate: 10, - repeat: -1 + key: "misa-front-walk", + frames: anims.generateFrameNames("atlas", { prefix: "misa-front-walk.", start: 0, end: 3, zeroPad: 3 }), + frameRate: 10, + repeat: -1 }); anims.create({ - key: "misa-back-walk", - frames: anims.generateFrameNames("atlas", { prefix: "misa-back-walk.", start: 0, end: 3, zeroPad: 3 }), - frameRate: 10, - repeat: -1 + key: "misa-back-walk", + frames: anims.generateFrameNames("atlas", { prefix: "misa-back-walk.", start: 0, end: 3, zeroPad: 3 }), + frameRate: 10, + repeat: -1 }); @@ -92,20 +93,22 @@ export default class Demo extends Phaser.Scene cursors = this.input.keyboard.createCursorKeys(); // Debug graphics - this.input.keyboard.once("keydown_D", event => { - // Turn on physics debugging to show player's hitbox - this.physics.world.createDebugGraphic(); - - // Create worldLayer collision graphic above the player, but below the help text - const graphics = this.add - .graphics() - .setAlpha(0.75) - .setDepth(20); - worldLayer.renderDebug(graphics, { - tileColor: null, // Color of non-colliding tiles - collidingTileColor: new Phaser.Display.Color(243, 134, 48, 255), // Color of colliding tiles - faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Color of colliding face edges - }); + this.input.keyboard.once("keydown_D", (event: Event) => { + // Turn on physics debugging to show player's hitbox + this.physics.world.createDebugGraphic(); + + // Create worldLayer collision graphic above the player, but below the help text + const graphics = this.add + .graphics() + .setAlpha(0.75) + .setDepth(20); + + worldLayer.renderDebug(graphics, { + tileColor: null, // Color of non-colliding tiles + collidingTileColor: new Phaser.Display.Color(243, 134, 48, 255), // Color of colliding tiles + faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Color of colliding face edges + }); + }); // Constrain the camera so that it isn't allowed to move outside the width/height of tilemap @@ -171,8 +174,13 @@ const config = { } } }; -let cursors; -let player; -let showDebug = false; +let cursors: Phaser.Types.Input.Keyboard.CursorKeys; +let player: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody; + +const socket = new WebSocket('ws://localhost:8080'); +socket.addEventListener('open', (e: Event) => {socket.send('Hello Server!');}); +socket.addEventListener('close', (e: Event) => {socket.send('Goodbye!');}); + +// socket.send("bye"); const game = new Phaser.Game(config); diff --git a/client/tsconfig.json b/client/tsconfig.json index cecd357..4da9d17 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -1,9 +1,21 @@ { - "compilerOptions": { - "target": "es5", - "moduleResolution": "node" - }, - "include": [ - "./src/**/*" - ] + "include": [ + "./src/**/*" + ], + "compilerOptions": { + "target": "es5", + "moduleResolution": "node", + "noEmit": true, + "strict": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "importsNotUsedAsValues": "error", + "esModuleInterop": true, + "allowJs": true, + "noFallthroughCasesInSwitch": true, + "isolatedModules": true + } } + -- cgit v1.2.3