diff --git a/assets/char_luigi_x4_left.png b/assets/char_luigi_x4_left.png
new file mode 100644
index 0000000..428adbb
Binary files /dev/null and b/assets/char_luigi_x4_left.png differ
diff --git a/assets/char_mario_x4_box.png b/assets/char_mario_x4_box.png
new file mode 100644
index 0000000..a930d82
Binary files /dev/null and b/assets/char_mario_x4_box.png differ
diff --git a/assets/char_mario_x4_left.png b/assets/char_mario_x4_left.png
new file mode 100644
index 0000000..33cdef4
Binary files /dev/null and b/assets/char_mario_x4_left.png differ
diff --git a/server.js b/server.js
index 18f6812..47ee38f 100644
--- a/server.js
+++ b/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];
-}
\ No newline at end of file
diff --git a/src/views/server.hbs b/src/views/server.hbs
index 9fb06ec..5c275d6 100644
--- a/src/views/server.hbs
+++ b/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
- 
+ 
Luigi
@@ -56,7 +58,9 @@
+ 
+ 
@@ -100,44 +104,65 @@
let lastBtn;
socket.on('moveStart_right', type => {
if (type == 'mario') {
- player.vel = 3;
- lastBtn = 'right';
+ playerMario.vel = playerMario.speed;
+ playerMario.lastBtn = 'right';
+ } else if (type == 'luigi') {
+ playerLuigi.vel = playerLuigi.speed;
+ playerLuigi.lastBtn = 'right';
}
})
socket.on('moveEnd_right', type => {
- if (type == 'mario' && lastBtn == 'right') {
- player.vel = 0;
+ if (type == 'mario' && playerMario.lastBtn == 'right') {
+ playerMario.vel = 0;
+ } else if (type == 'luigi' && playerLuigi.lastBtn == 'right') {
+ playerLuigi.vel = 0;
}
})
socket.on('moveStart_left', type => {
if (type == 'mario') {
- player.vel = -3;
- lastBtn = 'left';
+ playerMario.vel = -playerMario.speed;
+ playerMario.lastBtn = 'left';
+ } else if (type == 'luigi') {
+ playerLuigi.vel = -playerLuigi.speed;
+ playerLuigi.lastBtn = 'left';
}
})
socket.on('moveEnd_left', type => {
- if (type == 'mario' && lastBtn == 'left') {
- player.vel = 0;
+ if (type == 'mario' && playerMario.lastBtn == 'left') {
+ 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)
- player.velUp = 14;
- console.log(player.velUp)
+ if (playerMario.velUp == 0 && playerMario.onGround)
+ playerMario.velUp = JUMP_HEIGHT;
+ } 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.y = 300;
+ this.x = 0;
+ this.y = 0;
this.vel = 0;
- this.height = 180;
- this.width = 72;
+ this.speed = 6;
this.type = type;
+ this.height = (type === 'char_mario') ? 180 : 208;
+ this.width = 72;
this.velUp = 0;
-
- Player.prototype.gravity = () => {
- if (this.y >= bottom - this.height) return;
- 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;
- }
+ this.padding = 5;
+ this.lastBtn = '';
+ this.onGround = false;
}
+
+ 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;
+ }
+
+
+
+
\ No newline at end of file