Add different player sprites and ai

ai/.babelrc

@@ -0,0 +1,4 @@
+{
+    "plugins": ["transform-object-rest-spread", "transform-es2015-destructuring"],
+    "presets": ["es2015", "stage-2"]
+}

ai/app.js

@@ -0,0 +1 @@
+import * as socket from './socket'

ai/loop.js

@@ -0,0 +1,102 @@
+import world from './world/world'
+
+function getDirections () {
+    const pPosX = Math.floor(world.player.posX / 2)
+    const pPosY = Math.floor(world.player.posY / 2)
+    let dirs = [{
+        posX : world.player.posX, pPosX : pPosX,
+        posY : world.player.posY - 2.0, pPosY : pPosY - 1.0,
+        dir : 0,
+    }, {
+        posX : world.player.posX - 2.0, pPosX : pPosX - 1.0,
+        posY : world.player.posY, pPosY : pPosY,
+        dir : 1,
+    }, {
+        posX : world.player.posX, pPosX : pPosX,
+        posY : world.player.posY + 2.0, pPosY : pPosY + 1.0,
+        dir : 2,
+    }, {
+        posX : world.player.posX + 2.0, pPosX : pPosX + 1.0,
+        posY : world.player.posY, pPosY : pPosY,
+        dir : 3,
+    }]
+
+    return dirs
+}
+
+function getAvailablePaths (dirs) {
+    let _dirs = dirs.slice(0)
+    for (let i = 0; i < _dirs.length; i++) {
+        const dir  = _dirs[i]
+        dir.pos = dir.pPosY * world.width + dir.pPosX
+        dir.n = world.map[Math.round(dir.pos)]
+
+        if (dir.n !== 1) _dirs.splice(i--, 1)
+    }
+
+    return _dirs
+}
+
+function runAway (dirs, aDirs) {
+    const pPosX = Math.floor(world.player.posX / 2)
+    const pPosY = Math.floor(world.player.posY / 2)
+
+    const vpPosX = Math.floor(world.vPlayers[0].posX / 2)
+    const vpPosY = Math.floor(world.vPlayers[0].posY / 2)
+
+    const v = {
+        x : world.player.posX - world.vPlayers[0].posX,
+        y : world.player.posY - world.vPlayers[0].posY,
+    }
+    const length = Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2))
+
+    for (let i = 0; i < aDirs.length; i++) {
+        const dir = aDirs[i]
+        const _v = {
+            x : dir.posX - world.vPlayers[0].posX,
+            y : dir.posY - world.vPlayers[0].posY,
+        }
+        const _length = Math.sqrt(Math.pow(_v.x, 2) + Math.pow(_v.y, 2))
+
+        if (_length < length) aDirs.splice(i--, 1)
+    }
+
+    return aDirs[Math.floor(Math.random() * aDirs.length)]
+}
+
+function runRandomly (dirs, aDirs, lastDir) {
+
+    const r = Math.random()
+    for (let i = 0; i < aDirs.length; i++) {
+        const dir = aDirs[i]
+
+        if (lastDir.dir === dir.dir && r > 0.75) {
+            // 66% chance to walk in the same direction as before
+            aDirs = [dir]
+            break
+        }
+    }
+    return aDirs[Math.floor(Math.random() * aDirs.length)]
+}
+
+export default function loop(lastDir = {}) {
+    let dirs = getDirections()
+    let aDirs = getAvailablePaths(dirs)
+    let dir
+    let timeout
+
+    if (world.vPlayers.length && !world.player.hasGodMode) {
+        dir = runAway(dirs, aDirs)
+        timeout = 500
+    } else {
+        dir = runRandomly(dirs, aDirs, lastDir)
+        timeout = 1000
+    }
+
+    if (dir) world.updatePos(dir.posX, dir.posY, dir.dir)
+    lastDir = dir
+
+    setTimeout(() => {
+        loop(dir)
+    }, timeout)
+}

ai/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "ris-ai",
+  "version": "0.0.1",
+  "scripts": {
+    "start": "nodemon --exec babel-node -- app.js"
+  },
+  "dependencies": {
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-stage-2": "^6.3.13",
+    "socket.io": "^1.4.4"
+  }
+}

ai/socket/index.js

@@ -0,0 +1,9 @@
+import io from 'socket.io-client'
+
+const _player = require('./player')(io, 3003)
+const _world = require('./world')(io, 3003)
+
+export default {
+    player : _player,
+    world : _world,
+}

ai/socket/player.js

@@ -0,0 +1,60 @@
+import world from '../world/world'
+import loop from '../loop'
+
+module.exports = function(io, port) {
+    const _player = io.connect(`http://localhost:${port}/ris/player`)
+
+    _player.on('connect', () => {
+        _player.emit('registerAI')
+    })
+
+    _player.on('registeredAI', data => {
+        console.log('player/registeredAI')
+        world.player.posX = data.posX
+        world.player.posY = data.posY
+        world.player.texture = data.texture
+
+        loop()
+    })
+
+    _player.on('registered', data => {
+        console.log('player/registered')
+        world.player.texture = data.texture
+        world.player.hasGodMode = data.hasGodMode
+    })
+
+    _player.on('moveConfirmation', data => {
+        world.player.posX = data.posX
+        world.player.posY = data.posY
+        world.player.lastUpdate = Date.now()
+    })
+
+    _player.on('visibleArea', data => {
+        world.vPlayers = data.vPlayers
+        world.map = data.map || world.map
+    })
+
+    _player.on('vPlayer', vPlayer => {
+        let contains = false
+        for (let index = 0; index < world.vPlayers.length; index++) {
+            if (world.vPlayers[index].id === vPlayer.id) {
+                contains = true
+                world.vPlayers[index] = vPlayer
+                break
+            }
+        }
+
+        if (!contains) world.vPlayers.push(vPlayer)
+    })
+
+    _player.on('lvPlayer', id => {
+        for (let i = 0; i < world.vPlayers.length; i++) {
+            if (world.vPlayers[i].id === id) {
+                world.vPlayers.splice(i, 1)
+                break
+            }
+        }
+    })
+
+    return _player
+}

ai/socket/world.js

@@ -0,0 +1,35 @@
+import world from '../world/world'
+
+module.exports = function(io, port) {
+    const _world = io.connect(`http://localhost:${port}/ris/world`)
+
+    _world.on('connect', () => {
+        console.log('world/connection')
+
+        _world.emit('request')
+
+        _world.on('world', data => {
+            console.log('world/world')
+
+            world.map = data.map
+            world.width = data.width
+            world.height = data.height
+
+            world.player.posX = Math.round(data.width)
+            world.player.posY = Math.round(data.height)
+
+        })
+
+        _world.on('gameover', data => {
+            console.log('world/gameover', data)
+            world.isGameRunning = false
+            setTimeout(() => {
+                world.map = data.map,
+                world.vPlayers = data.players
+            }, 3000);
+        })
+    })
+
+
+    return _world
+}

ai/world/world.js

@@ -0,0 +1,40 @@
+import socket from '../socket/'
+
+export default {
+
+    isGameRunning : true,
+
+    width : 0,
+    height : 0,
+
+    map : [],
+
+    player : {
+        posX : 0,
+        posY : 0,
+        lastUpdate : Date.now(),
+
+        texture : {
+            dirIndex : 0,
+            spritePos : 18,
+        }
+    },
+
+    vPlayers : [],
+
+    updatePos : function(posX, posY, dir) {
+
+        if (!this.isGameRunning) return
+        this.player.posX = posX
+        this.player.posY = posY
+        this.player.texture.spritePos = dir * 9
+
+        if (Date.now() - this.player.lastUpdate > 24) {
+            socket.player.emit('move', {
+                posX : this.player.posX,
+                posY : this.player.posY,
+                spritePos : this.player.texture.spritePos,
+            })
+        }
+    },
+}

client/package.json

@@ -51,6 +51,9 @@
   "engines": {
     "node": ">=0.12.0"
   },
+  "scripts" : {
+    "start": "gulp serve"
+  },
   "//": "CUSTOM CONFIGURATION",
   "config": {
     "//": "Entry files",

client/src/_data/shader.fs

@@ -4,11 +4,20 @@ precision mediump float;
 
 varying vec2 vTextureCoord;
 uniform sampler2D uSampler;
+
 uniform float brightness;
+uniform vec4 brightnessColor;
 
 void main(void) {
     vec4 color = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
     if (color.a < 0.5)
         discard;
-    gl_FragColor = vec4(color.r * brightness, color.g * brightness, color.b * brightness, color.a - 0.1);
+
+
+    gl_FragColor = vec4(
+        (color.r * brightness) * brightnessColor.r,
+        (color.g * brightness) * brightnessColor.g,
+        (color.b * brightness) * brightnessColor.b,
+        color.a - 0.1
+    );
 }

client/src/_scripts/render/players.js

@@ -9,7 +9,15 @@ const mat4 = require('./../../../node_modules/gl-matrix/src/gl-matrix.js').mat4
 let neheTextures
 let skippedFrames = Number.MAX_SAFE_INTEGER - 50
 
-texture(['BODY_male.png'], {size : 64}).then( textures => { neheTextures = textures })
+texture([
+    'sprite_blonde.png',
+    'sprite_hunter.png',
+    'sprite_monk.png',
+    'sprite_skeleton.png',
+    'sprite_bunny.png',
+    'sprite_bunny_pink.png',
+    'sprite_bunny_gold.png',
+    ], {size : 64}).then( textures => { neheTextures = textures })
 
 export default function draw (mvMatrix, pMatrix, pressedKeys) {
 
@@ -33,7 +41,7 @@ export default function draw (mvMatrix, pMatrix, pressedKeys) {
             console.log(world.player)
         }
 
-        gl.bindTexture(gl.TEXTURE_2D, neheTextures[0][world.player.texture.spritePos])
+        gl.bindTexture(gl.TEXTURE_2D, neheTextures[world.player.texture.sprite][world.player.texture.spritePos])
     }
 
     gl.uniform1i(shaderProgram.samplerUniform, 0)
@@ -68,7 +76,7 @@ export default function draw (mvMatrix, pMatrix, pressedKeys) {
 
         gl.activeTexture(gl.TEXTURE0)
         if (neheTextures) {
-            gl.bindTexture(gl.TEXTURE_2D, neheTextures[0][vPlayer.spritePos])
+            gl.bindTexture(gl.TEXTURE_2D, neheTextures[vPlayer.texture.sprite][vPlayer.texture.spritePos])
         }
 
         gl.uniform1i(shaderProgram.samplerUniform, 0)