Cliffbreak/Mario
Archived
4
1
Fork 0
Code Releases Activity

Fix physics

Browse source
This commit is contained in:
Simon Giesel 2018-04-25 23:38:04 +02:00
parent 74e6a11bce
commit 7e5d0b93a9
5 changed files with 139 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/char_luigi_x4_left.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/char_mario_x4_box.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/char_mario_x4_left.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

12
server.js
View file

@ -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];
}

150
src/views/server.hbs
View file

@ -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;
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;
this.padding = 5;
this.lastBtn = '';
this.onGround = false;
}
Player.prototype.gravity = () => {
Player.prototype.gravity = function () {
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)
// 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;
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)
}
}
//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 + grav;
}
}
this.y = this.y + GRAVITY;
this.onGround = false;
};
Player.prototype.move = () => {
if (this.velUp > 5)
this.y = this.y - 20;
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)
if (this.x >= right - this.width && this.vel > 0)
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)
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 => 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)
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>