Fix physics

server.js

@@ -9,7 +9,7 @@ const express = require('express'),
     qrCode = require('branded-qr-code');
 
 /** CONSTANTS */
-const HOST = 'http://192.168.0.105:8080/client/';
+const HOST = 'http://100.119.37.224:8080/client/';
 
 const players = [
     {
@@ -63,6 +63,8 @@ app.get(['/', '/index.html'], (req, res) => {
         layout: false,
         marioURL: HOST + players[0].id,
         luigiURL: HOST + players[1].id,
+        marioId: players[0].id,
+        luigiId: players[1].id,
     });
 });
 
@@ -143,6 +145,10 @@ monitorNSP.on('connection', socket => {
     });
 });
 
+function getPlayerFromId(id) {
+    return players.filter(el => el.id == id)[0];
+}
+
 function guid() {
     function s4() {
         return Math.floor((1 + Math.random()) * 0x10000)
@@ -151,7 +157,3 @@ function guid() {
     }
     return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
 }
-
-function getPlayerFromId(id) {
-    return players.filter(el => el.id == id)[0];
-}

src/views/server.hbs

@@ -7,7 +7,9 @@
             padding: 0;
         }
 
-        body {}
+        body {
+            overflow-x: hidden;
+        }
 
         img.check {
             filter: blur(10px);
@@ -42,13 +44,13 @@
     <mario>
         <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMyNkE5NjQiIGQ9Ik00OS44NDQsNjguMzI1Yy0xLjQxNiwwLTIuNzQ4LTAuNTU0LTMuNzUtMS41NTdMMjcuNTIzLDQ4LjE5MWMtMS4wMDMtMS4wMDItMS41NTUtMi4zMzQtMS41NTUtMy43NXMwLjU1Mi0yLjc0OSwxLjU1NS0zLjc1YzEuMDAxLTEuMDAxLDIuMzMzLTEuNTUyLDMuNzUtMS41NTJzMi43NSwwLjU1MSwzLjc1MywxLjU1M2wxNC4wMTksMTQuMDE3TDgyLjE0LDUuNTA0YzAuOTg5LTEuNDY4LDIuNjM5LTIuMzQ1LDQuNDEyLTIuMzQ1YzEuMDU0LDAsMi4wNzUsMC4zMTIsMi45NTYsMC45MDJjMi40MjQsMS42MzEsMy4wNyw0LjkzNCwxLjQzOSw3LjM2MUw1NC4yNSw2NS45OGMtMC44OTIsMS4zMTYtMi4zMTIsMi4xNjItMy44OTUsMi4zMTRDNTAuMTcsNjguMzE1LDUwLjAxLDY4LjMyNSw0OS44NDQsNjguMzI1eiIvPjwvZz48L3N2Zz4="
             class="checkmark left hidden">
-        <img src="assets/mario.qr.png">
+        <img src="assets/mario.qr.png?{{marioId}}">
         <a href="{{marioURL}}">Mario</a>
     </mario>
     <luigi>
         <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMyNkE5NjQiIGQ9Ik00OS44NDQsNjguMzI1Yy0xLjQxNiwwLTIuNzQ4LTAuNTU0LTMuNzUtMS41NTdMMjcuNTIzLDQ4LjE5MWMtMS4wMDMtMS4wMDItMS41NTUtMi4zMzQtMS41NTUtMy43NXMwLjU1Mi0yLjc0OSwxLjU1NS0zLjc1YzEuMDAxLTEuMDAxLDIuMzMzLTEuNTUyLDMuNzUtMS41NTJzMi43NSwwLjU1MSwzLjc1MywxLjU1M2wxNC4wMTksMTQuMDE3TDgyLjE0LDUuNTA0YzAuOTg5LTEuNDY4LDIuNjM5LTIuMzQ1LDQuNDEyLTIuMzQ1YzEuMDU0LDAsMi4wNzUsMC4zMTIsMi45NTYsMC45MDJjMi40MjQsMS42MzEsMy4wNyw0LjkzNCwxLjQzOSw3LjM2MUw1NC4yNSw2NS45OGMtMC44OTIsMS4zMTYtMi4zMTIsMi4xNjItMy44OTUsMi4zMTRDNTAuMTcsNjguMzE1LDUwLjAxLDY4LjMyNSw0OS44NDQsNjguMzI1eiIvPjwvZz48L3N2Zz4="
             class="checkmark hidden">
-        <img src="assets/luigi.qr.png">
+        <img src="assets/luigi.qr.png?{{luigiId}}">
         <a href="{{luigiURL}}">Luigi</a>
     </luigi>
 </lobby>
@@ -56,7 +58,9 @@
 <game>
     <assets style="display:none;">
         <img id="char_mario" src="/assets/char_mario_x4.png">
+        <img id="char_mario_left" src="/assets/char_mario_x4_left.png">
         <img id="char_luigi" src="/assets/char_luigi_x4.png">
+        <img id="char_luigi_left" src="/assets/char_luigi_x4_left.png">
         <img id="block_dirt" src="/assets/block_dirt_x4.png">
         <img id="block_grass" src="/assets/block_grass_x4.png">
     </assets>
@@ -100,44 +104,65 @@
     let lastBtn;
     socket.on('moveStart_right', type => {
         if (type == 'mario') {
-            player.vel = 3;
+            playerMario.vel = playerMario.speed;
-            lastBtn = 'right';
+            playerMario.lastBtn = 'right';
+        } else if (type == 'luigi') {
+            playerLuigi.vel = playerLuigi.speed;
+            playerLuigi.lastBtn = 'right';
         }
     })
     socket.on('moveEnd_right', type => {
-        if (type == 'mario' && lastBtn == 'right') {
+        if (type == 'mario' && playerMario.lastBtn == 'right') {
-            player.vel = 0;
+            playerMario.vel = 0;
+        } else if (type == 'luigi' && playerLuigi.lastBtn == 'right') {
+            playerLuigi.vel = 0;
         }
     })
     socket.on('moveStart_left', type => {
         if (type == 'mario') {
-            player.vel = -3;
+            playerMario.vel = -playerMario.speed;
-            lastBtn = 'left';
+            playerMario.lastBtn = 'left';
+        } else if (type == 'luigi') {
+            playerLuigi.vel = -playerLuigi.speed;
+            playerLuigi.lastBtn = 'left';
         }
     })
     socket.on('moveEnd_left', type => {
-        if (type == 'mario' && lastBtn == 'left') {
+        if (type == 'mario' && playerMario.lastBtn == 'left') {
-            player.vel = 0;
+            playerMario.vel = 0;
+        } else if (type == 'luigi' && playerLuigi.lastBtn == 'left') {
+            playerLuigi.vel = 0;
         }
     })
     socket.on('moveStart_jump', type => {
         if (type == 'mario') {
-            if (player.velUp == 0)
+            if (playerMario.velUp == 0 && playerMario.onGround)
-                player.velUp = 14;
+                playerMario.velUp = JUMP_HEIGHT;
-            console.log(player.velUp)
+        } else if (type == 'luigi') {
+            if (playerLuigi.velUp == 0 && playerLuigi.onGround)
+                playerLuigi.velUp = JUMP_HEIGHT;
         }
     })
 
     /** CANVAS VARS **/
     const BLOCK_SIZE = 128,
+        GRAVITY = 14,
+        JUMP_HEIGHT = 20,
         canvas = document.getElementById('canvas'),
         ctx = canvas.getContext('2d'),
         right = window.innerWidth,
         bottom = window.innerHeight,
         char_mario = document.getElementById('char_mario'),
+        char_mario_left = document.getElementById('char_mario_left'),
         char_luigi = document.getElementById('char_luigi'),
+        char_luigi_left = document.getElementById('char_luigi_left'),
         block_dirt = document.getElementById('block_dirt'),
         block_grass = document.getElementById('block_grass');
+
+    /*let player = { "mario": new Player('char_mario'), "luigi": new Player('char_luigi') };*/
+    let playerMario = new Player('char_mario');
+    let playerLuigi = new Player('char_luigi');
+    let colliders = [];
     initGame();
     function initGame() {
         canvas.width = window.innerWidth;
@@ -146,9 +171,6 @@
         window.requestAnimationFrame(draw);
     }
 
-    let player = new Player('char_mario');
-    let colliders = [];
-    const grav = 5;
     function draw() {
         colliders = [];
         ctx.clearRect(0, 0, right, bottom);
@@ -164,50 +186,110 @@
             colliders.push({ x: x * BLOCK_SIZE, y: bottom - 3 * BLOCK_SIZE });
         }
 
+        ctx.drawImage(block_grass, 5 * BLOCK_SIZE, bottom - 6 * BLOCK_SIZE);
+        colliders.push({ x: 5 * BLOCK_SIZE, y: bottom - 6 * BLOCK_SIZE });
+        ctx.drawImage(block_grass, 5 * BLOCK_SIZE, bottom - 5 * BLOCK_SIZE);
+        colliders.push({ x: 5 * BLOCK_SIZE, y: bottom - 5 * BLOCK_SIZE });
+        ctx.drawImage(block_grass, 5 * BLOCK_SIZE, bottom - 4 * BLOCK_SIZE);
+        colliders.push({ x: 5 * BLOCK_SIZE, y: bottom - 4 * BLOCK_SIZE });
+
         //   ctx.drawImage(char_mario, 6 * BLOCK_SIZE, bottom - 5 * BLOCK_SIZE + 76); // 76 == offest to full block
         //   ctx.drawImage(char_luigi, 5 * BLOCK_SIZE, bottom - 5 * BLOCK_SIZE + 48); // 48 == offest to full block
-        ctx.drawImage(char_mario, player.x, player.y);
+        ctx.drawImage(playerMario.vel < 0 ? char_mario_left : char_mario, playerMario.x, playerMario.y);
+        ctx.drawImage(playerLuigi.vel < 0 ? char_luigi_left : char_luigi, playerLuigi.x, playerLuigi.y);
+
+        playerMario.move();
+        playerMario.gravity();
+        playerLuigi.move();
+        playerLuigi.gravity();
 
-        player.move();
-        player.gravity();
 
 
         window.requestAnimationFrame(draw);
     }
 
     function Player(type) {
-        this.x = 4 * BLOCK_SIZE;
+        this.x = 0;
-        this.y = 300;
+        this.y = 0;
         this.vel = 0;
-        this.height = 180;
+        this.speed = 6;
-        this.width = 72;
         this.type = type;
+        this.height = (type === 'char_mario') ? 180 : 208;
+        this.width = 72;
         this.velUp = 0;
-
+        this.padding = 5;
-        Player.prototype.gravity = () => {
+        this.lastBtn = '';
-            if (this.y >= bottom - this.height) return;
+        this.onGround = false;
-            if (this.velUp > 0) return;
-            if (this.vel >= 0 && colliders.filter(el => this.y + this.height >= el.y && this.y + this.height <= el.y + BLOCK_SIZE && this.x >= el.x && this.x <= el.x + BLOCK_SIZE).length)
-                return;
-            if (this.vel < 0 && colliders.filter(el => this.y + this.height >= el.y && this.y + this.height <= el.y + BLOCK_SIZE && this.x + this.width >= el.x && this.x + this.width <= el.x + BLOCK_SIZE).length)
-                return;
-            this.y = this.y + grav;
-        };
-
-        Player.prototype.move = () => {
-            if (this.velUp > 5)
-                this.y = this.y - 20;
-            if (this.velUp > 0)
-                this.velUp--;
-            if (this.x <= 0 && this.vel < 0)
-                return;
-            if (this.x >= right - this.width)
-                return;
-            if (this.vel >= 0 && colliders.filter(el => this.x + this.width >= el.x && this.x + this.width <= el.x + BLOCK_SIZE && this.y + this.height - 10 >= el.y && this.y + this.height - 10 <= el.y + BLOCK_SIZE).length)
-                return;
-            if (this.vel < 0 && colliders.filter(el => this.x >= el.x && this.x <= el.x + BLOCK_SIZE && this.y + this.height - 10 >= el.y && this.y + this.height - 10 <= el.y + BLOCK_SIZE).length)
-                return;
-            this.x = this.x + this.vel;
-        }
     }
+
+    Player.prototype.gravity = function () {
+        if (this.y >= bottom - this.height) return;
+        if (this.velUp > 0) return;
+        // right movement and stopped movement
+        if (this.vel >= 0) {
+            let collision = colliders.filter(el => between(this.y + this.height + GRAVITY, el.y, el.y + BLOCK_SIZE) && between(this.x, el.x - this.width + this.padding, el.x + BLOCK_SIZE - this.padding));
+            if (collision.length) {
+                this.y = collision[0].y - this.height;
+                this.onGround = true;
+                return;
+            }
+        }
+        //left movement
+        if (this.vel < 0) {
+            let collision = colliders.filter(el => between(this.y + this.height + GRAVITY, el.y, el.y + BLOCK_SIZE) && between(this.x, el.x - this.width + this.padding, el.x + BLOCK_SIZE - this.padding));
+            if (collision.length) {
+                this.y = collision[0].y - this.height;
+                this.onGround = true;
+                return;
+            }
+        }
+        this.y = this.y + GRAVITY;
+        this.onGround = false;
+    };
+
+    Player.prototype.move = function () {
+        if (this.velUp > 3)
+            this.y = this.y - 27;
+        if (this.velUp > 0)
+            this.velUp--;
+        if (this.x <= 0 && this.vel < 0)
+            return;
+        if (this.x >= right - this.width && this.vel > 0)
+            return;
+        if (this.vel >= 0 && colliders.filter(el => between(this.x + this.width, el.x, el.x + BLOCK_SIZE) && between(this.y + this.height - this.padding, el.y, el.y + BLOCK_SIZE)).length)
+            return;
+        if (this.vel < 0 && colliders.filter(el => between(this.x, el.x, el.x + BLOCK_SIZE) && between(this.y + this.height - this.padding, el.y, el.y + BLOCK_SIZE)).length)
+            return;
+        this.x = this.x + this.vel;
+    }
+
+    function between(val, min, max) {
+        return val >= min && val <= max;
+    }
+</script>
+
+
+<script>
+    /*** ONLY DEBUG ***/
+    let lastCode;
+    document.addEventListener('keydown', (e) => {
+        if (e.keyCode === 37) {
+            playerMario.vel = -playerMario.speed;
+            lastCode = e.keyCode;
+        } else if (e.keyCode === 38) {
+            if (playerMario.onGround)
+                playerMario.velUp = JUMP_HEIGHT;
+            e.preventDefault();
+        } else if (e.keyCode === 39) {
+            playerMario.vel = playerMario.speed;
+            lastCode = e.keyCode;
+        }
+    });
+    document.addEventListener('keyup', (e) => {
+        if (e.keyCode === 37 && lastCode === e.keyCode) {
+            playerMario.vel = 0;
+        } else if (e.keyCode === 39 && lastCode === e.keyCode) {
+            playerMario.vel = 0;
+        }
+    });
 </script>