Cliffbreak/Mario
Archived
4
1
Fork 0
Code Releases Activity

Add more features

Browse source
This commit is contained in:
Simon Giesel 2018-04-26 20:18:34 +02:00
parent a6ec9bfa6e
commit add6d625b1
11 changed files with 201 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
TODO.md
View file

@ -1,2 +1,2 @@
* Fix collision while in air * Detect duplicate connection
* Fix jumping while in air (disallow) * (add trampoline)

2
assets/NoSleep.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

BIN
assets/block_dirt_x2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/block_grass_x2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
assets/char_luigi_x2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 930 B

BIN
assets/char_luigi_x2_left.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 933 B

BIN
assets/char_mario_x2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 983 B

BIN
assets/char_mario_x2_left.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 969 B

13
server.js
View file

@ -15,12 +15,12 @@ const players = [
{ {
type: 'mario', type: 'mario',
id: guid(), id: guid(),
points: 0 score: 0
}, },
{ {
type: 'luigi', type: 'luigi',
id: guid(), id: guid(),
points: 0 score: 0
}, },
] ]
console.log(players); console.log(players);
@ -77,19 +77,22 @@ app.get('/client/:id', (req, res) => {
type: getPlayerFromId(req.params.id).type, type: getPlayerFromId(req.params.id).type,
}); });
else else
res.render('client', { layout: false }); //TODO change to error res.render('error', { layout: false });
}); });
const monitorNSP = io.of('/monitor'); const monitorNSP = io.of('/monitor');
const clientNSP = io.of('/client'); const clientNSP = io.of('/client');
let count = 0;
clientNSP.on('connection', socket => { clientNSP.on('connection', socket => {
let id = socket.request.headers.referer.split('/').slice(-1)[0]; let id = socket.request.headers.referer.split('/').slice(-1)[0];
if (!getPlayerFromId(id)) { console.error('Wrong ID'); return; } if (!getPlayerFromId(id)) { console.error('Wrong ID'); return; }
console.log('Client connected.'); console.log('Client connected.');
monitorNSP.emit('clientConnect', getPlayerFromId(id).type); monitorNSP.emit('clientConnect', getPlayerFromId(id).type);
count++;
// monitorNSP.emit('updateGameState', 1); if (count === 2)
setTimeout(() => monitorNSP.emit('updateGameState', 1), 2000);
let pl = getPlayerFromId(socket.request.headers.referer.split('/').slice(-1)[0]); let pl = getPlayerFromId(socket.request.headers.referer.split('/').slice(-1)[0]);
socket.on('moveStart_left', () => { socket.on('moveStart_left', () => {

34
src/views/client.hbs
View file

@ -1,6 +1,7 @@
<head> <head>
<title>MARIO Controller</title> <title>MARIO Controller</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/assets/NoSleep.min.js"></script>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<style> <style>
* { * {
@ -16,7 +17,7 @@
html, html,
body { body {
height: 100%; height: 89%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
@ -25,16 +26,26 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
bottom: 35%; bottom: 35%;
width: 20%; width: 25%;
height: 30%; height: 30%;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 200%;
border-radius: 50%;
box-shadow: 5px 5px 2px 0px rgba(0, 0, 0, 0.75);
} }
button#left { button#left {
left: 5%; left: 5%;
background-color: #FFC107;
} }
button#right { button#right {
left: 30%; left: 35%;
background-color: #2196F3;
} }
button#crouch, button#crouch,
@ -44,10 +55,12 @@
button#jump { button#jump {
top: calc(40% / 3); top: calc(40% / 3);
background-color: #4CAF50;
} }
button#crouch { button#crouch {
bottom: calc(40% / 3); bottom: calc(40% / 3);
background-color: #E53935;
} }
warning { warning {
@ -84,23 +97,30 @@
<warning> <warning>
<span>Bitte das Smartphone drehen!</span> <span>Bitte das Smartphone drehen!</span>
</warning> </warning>
<button id="left">Left</button> <button id="left" disabled>Left</button>
<button id="right">Right</button> <button id="right" disabled>Right</button>
<button id="jump">Jump</button> <button id="jump" disabled>Jump</button>
<button id="crouch" disabled>Crouch</button> <button id="crouch" disabled>Crouch</button>
<script> <script>
document.body.addEventListener("contextmenu", e => e.preventDefault()); window.onscroll = e => e.preventDefault();
var noSleep = new NoSleep();
document.body.addEventListener("contextmenu", e => {
e.preventDefault()
});
var socket = io('/client'); var socket = io('/client');
Array.from(document.querySelectorAll('button')).forEach(el => { Array.from(document.querySelectorAll('button')).forEach(el => {
console.log(el.id); console.log(el.id);
el.addEventListener('touchstart', event => { el.addEventListener('touchstart', event => {
noSleep.enable();
console.log('moveStart_' + el.id); console.log('moveStart_' + el.id);
socket.emit('moveStart_' + el.id); socket.emit('moveStart_' + el.id);
el.style.boxShadow = "2px 2px 5px 0px rgba(0, 0, 0, 0.75)";
}); });
el.addEventListener('touchend', event => { el.addEventListener('touchend', event => {
console.log('moveEnd_' + el.id); console.log('moveEnd_' + el.id);
socket.emit('moveEnd_' + el.id); socket.emit('moveEnd_' + el.id);
el.style.boxShadow = "";
}); });
}); });
</script> </script>

200
src/views/server.hbs
View file

@ -57,12 +57,12 @@
<game> <game>
<assets style="display:none;"> <assets style="display:none;">
<img id="char_mario" src="/assets/char_mario_x4.png"> <img id="char_mario" src="/assets/char_mario_x2.png">
<img id="char_mario_left" src="/assets/char_mario_x4_left.png"> <img id="char_mario_left" src="/assets/char_mario_x2_left.png">
<img id="char_luigi" src="/assets/char_luigi_x4.png"> <img id="char_luigi" src="/assets/char_luigi_x2.png">
<img id="char_luigi_left" src="/assets/char_luigi_x4_left.png"> <img id="char_luigi_left" src="/assets/char_luigi_x2_left.png">
<img id="block_dirt" src="/assets/block_dirt_x4.png"> <img id="block_dirt" src="/assets/block_dirt_x2.png">
<img id="block_grass" src="/assets/block_grass_x4.png"> <img id="block_grass" src="/assets/block_grass_x2.png">
</assets> </assets>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</game> </game>
@ -137,17 +137,18 @@
socket.on('moveStart_jump', type => { socket.on('moveStart_jump', type => {
if (type == 'mario') { if (type == 'mario') {
if (playerMario.velUp == 0 && playerMario.onGround) if (playerMario.velUp == 0 && playerMario.onGround)
playerMario.velUp = JUMP_HEIGHT; playerMario.velUp = JUMP_TIME;
} else if (type == 'luigi') { } else if (type == 'luigi') {
if (playerLuigi.velUp == 0 && playerLuigi.onGround) if (playerLuigi.velUp == 0 && playerLuigi.onGround)
playerLuigi.velUp = JUMP_HEIGHT; playerLuigi.velUp = JUMP_TIME;
} }
}) })
/** CANVAS VARS **/ /** CANVAS VARS **/
const BLOCK_SIZE = 128, const BLOCK_SIZE = 128 / 2,
GRAVITY = 14, GRAVITY = 14,
JUMP_HEIGHT = 20, JUMP_HEIGHT = 20,
JUMP_TIME = 14,
canvas = document.getElementById('canvas'), canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'), ctx = canvas.getContext('2d'),
right = window.innerWidth, right = window.innerWidth,
@ -159,7 +160,6 @@
block_dirt = document.getElementById('block_dirt'), block_dirt = document.getElementById('block_dirt'),
block_grass = document.getElementById('block_grass'); 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 playerMario = new Player('char_mario');
let playerLuigi = new Player('char_luigi'); let playerLuigi = new Player('char_luigi');
let colliders = []; let colliders = [];
@ -171,59 +171,154 @@
window.requestAnimationFrame(draw); window.requestAnimationFrame(draw);
} }
let offset = 0;
function draw() { function draw() {
colliders = []; colliders = [];
ctx.clearRect(0, 0, right, bottom); ctx.fillStyle = "#B3E5FC";
ctx.fillRect(0, 0, right, bottom);
ctx.fillStyle = "black";
ctx.font = "30px monospace";
ctx.textAlign = "left";
ctx.fillText("Mario: " + playerMario.score, right - 50 - 200, 50);
ctx.fillText("Luigi: " + playerLuigi.score, right - 50 - 200, 100);
if (playerMario.dead) {
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.moveTo(right - 50 - 210, 40);
ctx.lineTo(right - 50 - 190 + ctx.measureText("Mario: " + playerMario.score).width, 40);
ctx.stroke();
}
if (playerLuigi.dead) {
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.moveTo(right - 50 - 210, 90);
ctx.lineTo(right - 50 - 190 + ctx.measureText("Luigi: " + playerLuigi.score).width, 90);
ctx.stroke();
}
/*
for (let y = bottom / BLOCK_SIZE - 2; y < bottom / BLOCK_SIZE; y++) for (let y = bottom / BLOCK_SIZE - 2; y < bottom / BLOCK_SIZE; y++)
for (let x = 0; x < right / BLOCK_SIZE; x++) { for (let x = 0; x < right / BLOCK_SIZE; x++)
ctx.drawImage(block_dirt, x * BLOCK_SIZE, y * BLOCK_SIZE); addBlock(block_dirt, x * BLOCK_SIZE, y * BLOCK_SIZE, true);
colliders.push({ x: x * BLOCK_SIZE, y: y * BLOCK_SIZE }); for (let x = 0; x < 2 * right / BLOCK_SIZE; x++) {
//if (x % 3) continue;
addBlock(block_grass, x * BLOCK_SIZE, bottom - 3 * BLOCK_SIZE, true);
} }
for (let x = 0; x < right / BLOCK_SIZE; x++) { for (let x = 0; x < .5 * right / BLOCK_SIZE; x++) {
if (x === 4 || x === 5) continue; if (x % 3) continue;
ctx.drawImage(block_grass, x * BLOCK_SIZE, bottom - 3 * BLOCK_SIZE); addBlock(block_dirt, x * BLOCK_SIZE, bottom - 6 * BLOCK_SIZE, true);
colliders.push({ x: x * BLOCK_SIZE, y: bottom - 3 * BLOCK_SIZE }); addBlock(block_grass, x * BLOCK_SIZE, bottom - 7 * BLOCK_SIZE, true);
} }
addBlock(block_dirt, 5 * BLOCK_SIZE, bottom - 4 * BLOCK_SIZE, true);
addBlock(block_dirt, 5 * BLOCK_SIZE, bottom - 5 * BLOCK_SIZE, true);
addBlock(block_grass, 5 * BLOCK_SIZE, bottom - 6 * BLOCK_SIZE, true);
*/
ctx.drawImage(block_grass, 5 * BLOCK_SIZE, bottom - 6 * BLOCK_SIZE); addBlockRow(block_grass, 0, 0, 10, true);
colliders.push({ x: 5 * BLOCK_SIZE, y: bottom - 6 * BLOCK_SIZE }); addBlock(block_grass, 4, 1, true);
ctx.drawImage(block_grass, 5 * BLOCK_SIZE, bottom - 5 * BLOCK_SIZE); addBlock(block_dirt, 4, 0, true);
colliders.push({ x: 5 * BLOCK_SIZE, y: bottom - 5 * BLOCK_SIZE }); addBlock(block_grass, 7, 2, true);
ctx.drawImage(block_grass, 5 * BLOCK_SIZE, bottom - 4 * BLOCK_SIZE); addBlock(block_dirt, 7, 1, true);
colliders.push({ x: 5 * BLOCK_SIZE, y: bottom - 4 * BLOCK_SIZE }); addBlock(block_dirt, 7, 0, true);
addBlockRow(block_grass, 10, 1, 5, true);
addBlockRow(block_dirt, 10, 0, 5, true);
addBlockRow(block_grass, 16, 4, 3, true);
addBlockRow(block_grass, 16, 0, 8, true);
addBlockRect(block_dirt, 19, 3, 3, 5, true);
addBlockRow(block_grass, 20, 8, 2, true);
addBlock(block_dirt, 19, 8, true);
addBlock(block_grass, 22, 3, true);
addBlock(block_grass, 24, 6, true);
addBlock(block_grass, 22, 9, true);
addBlock(block_dirt, 19, 9, true);
addBlock(block_grass, 19, 10, true);
addBlockRow(block_grass, 21, 12, 4, true);
addBlockRow(block_grass, 33, 0, 4, true);
// 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 if (!playerMario.dead)
ctx.drawImage(playerMario.vel < 0 ? char_mario_left : char_mario, playerMario.x, playerMario.y); ctx.drawImage(playerMario.vel < 0 ? char_mario_left : char_mario, playerMario.x, playerMario.y);
if (!playerLuigi.dead)
ctx.drawImage(playerLuigi.vel < 0 ? char_luigi_left : char_luigi, playerLuigi.x, playerLuigi.y); ctx.drawImage(playerLuigi.vel < 0 ? char_luigi_left : char_luigi, playerLuigi.x, playerLuigi.y);
playerMario.move();
playerMario.gravity(); playerMario.gravity();
playerLuigi.move();
playerLuigi.gravity(); playerLuigi.gravity();
// Scroll screen
const playerMove = playerMario.x > playerLuigi.x ? playerMario : playerLuigi;
const player = playerMario.x > playerLuigi.x ? playerLuigi : playerMario;
let actualOffset = 0;
if (playerMove.x + actualOffset >= right / 2 && playerMove.vel > 0 && playerMove.isMovePossible()) {
let newOffset = offset + playerMove.vel;
if (newOffset > offset) {
actualOffset = newOffset;
playerMove.score += playerMove.vel;
if (playerMove.vel === player.vel) {
player.score += player.vel;
player.isMovePossible();
}
if (playerMove.vel !== player.vel)
player.x -= playerMove.vel;
if (player.x <= 0)
player.dead = true;
if (playerMove.x <= 0)
playerMove.dead = true;
offset = newOffset;
}
console.log(offset + ' : ' + player.vel);
} else {
playerMario.move();
playerLuigi.move();
if (playerMove.vel < 0)
actualOffset -= playerMove.vel;
}
window.requestAnimationFrame(draw); window.requestAnimationFrame(draw);
} }
function addBlockRect(texture, x, y, length, height, collide = false) {
for (let i = y; i < y + height; i++) {
addBlockRow(texture, x, i, length, collide);
}
}
function addBlockRow(texture, x, y, length, collide = false) {
for (let i = x; i < x + length; i++) {
addBlock(texture, i, y, collide);
}
}
function addBlock(texture, x, y, collide = false) {
ctx.drawImage(texture, x * BLOCK_SIZE - offset, bottom - (y + 1) * BLOCK_SIZE);
if (collide)
colliders.push({ x: x * BLOCK_SIZE - offset, y: bottom - (y + 1) * BLOCK_SIZE });
}
function Player(type) { function Player(type) {
/*this.x = 20 * BLOCK_SIZE;
this.y = bottom - 16 * BLOCK_SIZE;*/
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
this.vel = 0; this.vel = 0;
this.speed = 6; this.speed = 6;
this.type = type; this.type = type;
this.height = (type === 'char_mario') ? 180 : 208; this.height = (type === 'char_mario') ? 180 / 2 : 208 / 2;
this.width = 72; this.width = 72 / 2;
this.velUp = 0; this.velUp = 0;
this.padding = 5; this.padding = 5;
this.lastBtn = ''; this.lastBtn = '';
this.onGround = false; this.onGround = false;
this.dead = false;
this.score = 0;
} }
Player.prototype.gravity = function () { Player.prototype.gravity = function () {
if (this.y >= bottom - this.height) return; if (this.y >= bottom) {
this.dead = true;
return;
}
if (this.velUp > 0) return; if (this.velUp > 0) return;
// right movement and stopped movement // right movement and stopped movement
if (this.vel >= 0) { if (this.vel >= 0) {
@ -247,20 +342,34 @@
this.onGround = false; this.onGround = false;
}; };
Player.prototype.move = function () { Player.prototype.isMovePossible = function () {
// colliding with bottom of block
if (colliders.filter(el => between(this.x, el.x - this.width + this.padding, el.x + BLOCK_SIZE - this.padding) && between(this.y, el.y, el.y + BLOCK_SIZE)).length)
if (this.velUp > 3) if (this.velUp > 3)
this.y = this.y - 27; this.velUp = 3;
if (this.velUp > 3) {
this.onGround = false;
this.y = this.y - JUMP_HEIGHT;
}
if (this.velUp > 0) if (this.velUp > 0)
this.velUp--; this.velUp--;
if (this.dead)
return false;
if (this.x <= 0 && this.vel < 0) if (this.x <= 0 && this.vel < 0)
return; return false;
if (this.x >= right - this.width && this.vel > 0) if (this.x >= right - this.width && this.vel > 0)
return; return false;
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) if (this.vel >= 0 && colliders.filter(el => between(this.x + this.width, el.x, el.x + BLOCK_SIZE) && between(this.y - this.padding, el.y - this.height, el.y + BLOCK_SIZE)).length)
return; return false;
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) if (this.vel < 0 && colliders.filter(el => between(this.x, el.x, el.x + BLOCK_SIZE) && between(this.y - this.padding, el.y - this.height, el.y + BLOCK_SIZE)).length)
return; return false;
return true;
}
Player.prototype.move = function () {
if (!this.isMovePossible()) return;
this.x = this.x + this.vel; this.x = this.x + this.vel;
this.score += this.vel;
} }
function between(val, min, max) { function between(val, min, max) {
@ -272,13 +381,16 @@
<script> <script>
/*** ONLY DEBUG ***/ /*** ONLY DEBUG ***/
let lastCode; let lastCode;
let jumpPressed = false;
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.keyCode === 37) { if (e.keyCode === 37) {
playerMario.vel = -playerMario.speed; playerMario.vel = -playerMario.speed;
lastCode = e.keyCode; lastCode = e.keyCode;
} else if (e.keyCode === 38) { } else if (e.keyCode === 38) {
if (playerMario.onGround) if (playerMario.onGround && !jumpPressed) {
playerMario.velUp = JUMP_HEIGHT; playerMario.velUp = JUMP_TIME;
jumpPressed = true;
}
e.preventDefault(); e.preventDefault();
} else if (e.keyCode === 39) { } else if (e.keyCode === 39) {
playerMario.vel = playerMario.speed; playerMario.vel = playerMario.speed;
@ -288,6 +400,8 @@
document.addEventListener('keyup', (e) => { document.addEventListener('keyup', (e) => {
if (e.keyCode === 37 && lastCode === e.keyCode) { if (e.keyCode === 37 && lastCode === e.keyCode) {
playerMario.vel = 0; playerMario.vel = 0;
} else if (e.keyCode === 38 && jumpPressed) {
jumpPressed = false;
} else if (e.keyCode === 39 && lastCode === e.keyCode) { } else if (e.keyCode === 39 && lastCode === e.keyCode) {
playerMario.vel = 0; playerMario.vel = 0;
} }