Initial commit.

Signed-off-by: Yoan Blanc <yoan@dosimple.ch>
greut · Jun 19, 2017 · b157a22 · b157a22
commit b157a22
Show file tree

Hide file tree

Showing 28 changed files with 1,240 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,12 @@
+# Multiplayer phaser game
+
+A Phaser game runnin on Node.js so each client can create it's experience.
+
+[Video](https://www.youtube.com/watch?v=XhKdV8sTKBI)
+
+## Links
+
+- [Cute Knight assets](https://goglilol.itch.io/cute-knight)
+- [Platformer Art: Pixel Redux](http://kenney.nl/assets/platformer-art-pixel-redux)
+- [Phaser CE](https://phaser.io/download/phaserce)
+- [Tiled Map Editor](http://www.mapeditor.org/)
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang=fr>
+<meta charset="utf-8">
+<title>Multijoueur</title>
+<style>
+canvas {
+    margin: 0 auto;
+    image-rendering: -moz-crip-edges;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: -o-crisp-edges;
+    image-rendering: pixelated;
+}
+
+footer { color: #999; text-align:right }
+</style>
+<main id=game></main>
+<footer>
+    <p>Images: by <a href="https://goglilol.itch.io/cute-knight">@goglilol</a></p>
+</footer>
+<script src="/socket.io/socket.io.js"></script>
+<script src="libs/phaser.min.js"></script>
+<script src="client/js/hero.js"></script>
+<script src="client/js/play.js"></script>
+<script src="js/main.js"></script>
+</html>
diff --git a/client/js/hero.js b/client/js/hero.js
@@ -0,0 +1,61 @@
+"use strict"
+
+class Hero extends Phaser.Sprite {
+    constructor(game, name, x, y, key, frame) {
+        super(game, x, y, key || 'hero', frame)
+
+        this.anchor.set(.5, 1)
+
+        // Animations
+
+        this.animations.add('idle', [0])
+        this.animations.add('jump', [32])
+        this.animations.add('fall', [36])
+        this.animations.add('walk', [61])
+
+        // Temps des animations sur le serveur (en fps)
+        this.animations.add('death', [8], 1, false)
+        this.animations.add('duck', [16], 2, false)
+        this.animations.add('spawn', [24], 1, false)
+        this.animations.add('upstab', [40], 2, false)
+        this.animations.add('stab', [48], 2, false)
+        this.animations.add('hurt', [56], 2, false)
+
+        // Texte
+
+        this.text = this.game.add.text(0, 0," " + name + " ", {
+            font: "10px Arial",
+            fill: "#000",
+            align: "center",
+            boundsAlignV: "middle",
+            boundsAlignH: "center",
+            backgroundColor: "#fff"
+        })
+        this.text.alpha = .5
+        this.text.anchor.set(.5, 0)
+        this.text.setTextBounds(0, 0, this.text.width, this.text.height)
+        this.addChild(this.text)
+
+        // Zones de collision
+
+        /* debug
+        var attack = this.game.add.sprite(24, 0, '20x20')
+        attack.anchor.set(0.5, 1)
+        this.addChild(attack)
+
+        var upAttack = this.game.add.sprite(0, -32, '20x20')
+        upAttack.anchor.set(0.5, 1)
+        this.addChild(upAttack)
+        //*/
+    }
+
+    onUpdate(state) {
+        this.x = state.position.x
+        this.y = state.position.y
+        this.scale.x = state.scale.x
+        this.text.scale.x = state.scale.x
+
+        this.text.setText(" " + state.name + " " + state.health + " ")
+        this.animations.play(state.animation)
+    }
+}
diff --git a/client/js/play.js b/client/js/play.js
@@ -0,0 +1,161 @@
+"use strict"
+
+class Play {
+    constructor() {
+        // Tous les joueurs
+        this.players = {}
+        // Héro et Nom du joueur
+        this.hero = undefined
+        this.name = undefined
+        // Touches pressées en cours
+        this.move = {x: 0, y: 0, attack: false}
+    }
+
+    init() {
+        this.game.renderer.renderSession.roundPixels = true
+    }
+
+    preload() {
+        this.game.load.spritesheet('hero', 'images/sheet_hero_64x64.png', 64, 64, 64)
+        this.game.load.image('20x20', 'images/20x20.png')
+
+        this.game.load.spritesheet('background', 'images/backgrounds.png', 231, 63, 3)
+
+        this.game.load.tilemap('map', 'tmx/map.json', null, Phaser.Tilemap.TILED_JSON)
+        this.game.load.image('spritesheet', 'images/spritesheet.png')
+    }
+
+    create() {
+        this.background = this.game.add.sprite(0, 0, 'background')
+        this.background.width = this.game.width
+        this.background.height = this.game.height
+        this.background.fixedToCamera = true
+
+        this.map = this.game.add.tilemap('map')
+        this.map.addTilesetImage('spritesheet')
+
+        this.platforms = this.map.createLayer('platforms')
+        this.platforms.resizeWorld()
+
+        // WebSocket
+        this.socket = io()
+
+        this.socket.on('connect', this.onConnect.bind(this))
+        this.socket.on('ready', this.onReady.bind(this))
+        this.socket.on('new', this.onNew.bind(this))
+        this.socket.on('dead', this.onDead.bind(this))
+        this.socket.on('update', this.onUpdate.bind(this))
+
+        // Évènements de déplacements.
+
+        var cursor = this.input.keyboard.createCursorKeys()
+        cursor.space = this.game.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR)
+
+        // gauche <-> droite
+        cursor.left.onDown.add(() => {
+            this.move.x = cursor.right.isDown ? 0 : -1
+            this.emitMove()
+        }, this)
+        cursor.left.onUp.add(() => {
+            this.move.x = cursor.right.isDown ? 1 : 0
+            this.emitMove()
+        }, this)
+        cursor.right.onDown.add(() => {
+            this.move.x = cursor.left.isDown ? 0 : 1
+            this.emitMove()
+        }, this)
+        cursor.right.onUp.add(() => {
+            this.move.x = cursor.left.isDown ? -1 : 0
+            this.emitMove()
+        }, this)
+        // haut ^-v bas
+        cursor.up.onDown.add(() => {
+            this.move.y = cursor.down.isDown ? 0 : -1
+            this.emitMove()
+        }, this)
+        cursor.up.onUp.add(() => {
+            this.move.y = cursor.down.isDown ? 1 : 0
+            this.emitMove()
+        }, this)
+        cursor.down.onDown.add(() => {
+            this.move.y = cursor.up.isDown ? 0 : 1
+            this.emitMove()
+        }, this)
+        cursor.down.onUp.add(() => {
+            this.move.y = cursor.up.isDown ? -1 : 0
+            this.emitMove()
+        }, this)
+        // espace (attaque ou protection)
+        cursor.space.onDown.add(() => {
+            this.move.attack = true
+            this.emitMove()
+        }, this)
+        cursor.space.onUp.add(() => {
+            this.move.attack = false
+            this.emitMove()
+        }, this)
+    }
+
+    emitMove() {
+        // Envoi des touches dans la connexion
+        this.socket.emit('move', {id: this.id, move: this.move})
+    }
+
+    // Web-Socket
+
+    // Première étape, se connecter avec un HELLO
+    onConnect() {
+        while (!this.name) {
+            this.name = prompt('Username', '')
+        }
+        this.socket.emit('hello', {name: this.name})
+    }
+
+    // On nous répond avec READY
+    onReady(data) {
+        // Suppression des anciens états.
+        Object.keys(this.players).forEach(key => {
+            this.onDead({id: key})
+        }, this)
+
+        // Création de notre héros
+        var me = data.me
+        this.id = me.id
+        this.hero = this.onNew(me)
+
+        this.game.camera.follow(this.hero)
+
+        // Création des autres joueurs
+        data.others.forEach(other => {
+            this.onNew(other)
+        }, this)
+    }
+
+    // Un nouveau joueur entre
+    onNew(other) {
+        var user = new Hero(this.game, other.name, other.position.x, other.position.y)
+        user.scale.x = other.scale.x
+        this.game.add.existing(user)
+        this.players[other.id] = user
+
+        return user
+    }
+
+    // Un joueur quitte
+    onDead(other) {
+        if (other.id in this.players) {
+            this.players[other.id].kill()
+            delete this.players[other.id]
+        }
+    }
+
+    // L'état du jeu est modifié
+    onUpdate(state) {
+        state.players.forEach(user => {
+            var player = this.players[user.id]
+            if (player) {
+                player.onUpdate(user)
+            }
+        }, this)
+    }
+}
diff --git a/images/20x20.png b/images/20x20.png
diff --git a/images/64x64.png b/images/64x64.png
diff --git a/images/backgrounds.png b/images/backgrounds.png
diff --git a/images/sheet_bat_32x32.png b/images/sheet_bat_32x32.png
diff --git a/images/sheet_hero_64x64.png b/images/sheet_hero_64x64.png
diff --git a/images/sheet_snake_64x64.png b/images/sheet_snake_64x64.png
diff --git a/images/spritesheet.png b/images/spritesheet.png
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang=fr>
+<meta charset="utf-8">
+<title>Multijoueur</title>
+<style>
+canvas {
+    margin: 0 auto;
+    image-rendering: -moz-crip-edges;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: -o-crisp-edges;
+    image-rendering: pixelated;
+}
+
+footer { color: #999; text-align:right }
+</style>
+<main id=game></main>
+<footer>
+    <p>Images: by <a href="https://goglilol.itch.io/cute-knight">@goglilol</a></p>
+</footer>
+<script src="libs/phaser.min.js"></script>
+<script src="js/hero.js"></script>
+<script src="js/play.js"></script>
+<script src="js/main.js"></script>
+</html>