Cliffbreak/Mario
Archived
4
1
Fork 0
Code Releases Activity

Add Scoreboard and splashscreen

Browse source
This commit is contained in:
Simon Giesel 2018-04-27 14:24:19 +02:00
parent add6d625b1
commit 6269c3abc5
5 changed files with 241 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1 +1,2 @@
node_modules/
scores.json

BIN
assets/SuperMario256.ttf Normal file
View file

Binary file not shown.

33
server.js
View file

@ -6,7 +6,10 @@ const express = require('express'),
// wsEngine: 'ws'
}),
exphbs = require('express-handlebars'),
qrCode = require('branded-qr-code');
qrCode = require('branded-qr-code'),
fs = require('fs');
const scores = JSON.parse(fs.readFileSync('scores.json', 'utf8'));
/** CONSTANTS */
const HOST = 'http://100.119.37.224:8080/client/';
@ -14,11 +17,13 @@ const HOST = 'http://100.119.37.224:8080/client/';
const players = [
{
type: 'mario',
name: 'Mario',
id: guid(),
score: 0
},
{
type: 'luigi',
name: 'Luigi',
id: guid(),
score: 0
},
@ -95,6 +100,8 @@ clientNSP.on('connection', socket => {
setTimeout(() => monitorNSP.emit('updateGameState', 1), 2000);
let pl = getPlayerFromId(socket.request.headers.referer.split('/').slice(-1)[0]);
socket.on('changeName', name => pl.name = name);
socket.on('moveStart_left', () => {
console.log('moveStart_left: ' + pl.type);
monitorNSP.emit('moveStart_left', pl.type);
@ -125,17 +132,37 @@ clientNSP.on('connection', socket => {
console.log('moveEnd_crouch: ' + pl.type);
});
socket.on('disconnect', () => {
console.log('Client disconnected.');
count--;
monitorNSP.emit('clientDisconnect', getPlayerFromId(id).type);
});
});
let playerDeaths = 0;
monitorNSP.on('connection', socket => {
console.log('Monitor connected.');
socket.emit('handshake', {
scores,
marioId: players[0].id,
luigiId: players[1].id,
});
socket.on('playerDie', options => {
console.log(options.score)
playerDeaths++;
let pl = players.filter(el => el.type == options.player)[0];
pl.score = options.score;
if (pl.score > 0) {
scores.push({ name: pl.name, score: pl.score });
fs.writeFile('scores.json', JSON.stringify(scores));
}
if (playerDeaths === 2) {
setTimeout(() => {
monitorNSP.emit('handshake', { scores, marioId: players[0].id, luigiId: players[1].id, });
}, 4000);
}
});
socket.on('disconnect', () => {
console.log('Monitor disconnected.');
});

20
src/views/client.hbs
View file

@ -48,7 +48,7 @@
background-color: #2196F3;
}
button#crouch,
button#name,
button#jump {
right: 5%;
}
@ -58,7 +58,7 @@
background-color: #4CAF50;
}
button#crouch {
button#name {
bottom: calc(40% / 3);
background-color: #E53935;
}
@ -100,7 +100,7 @@
<button id="left" disabled>Left</button>
<button id="right" disabled>Right</button>
<button id="jump" disabled>Jump</button>
<button id="crouch" disabled>Crouch</button>
<button id="name" disabled>Name ändern</button>
<script>
window.onscroll = e => e.preventDefault();
var noSleep = new NoSleep();
@ -114,6 +114,10 @@
el.addEventListener('touchstart', event => {
noSleep.enable();
console.log('moveStart_' + el.id);
if (el.id === 'name') {
changeName();
return;
}
socket.emit('moveStart_' + el.id);
el.style.boxShadow = "2px 2px 5px 0px rgba(0, 0, 0, 0.75)";
});
@ -123,5 +127,15 @@
el.style.boxShadow = "";
});
});
let name;
changeName();
function changeName() {
while (true) {
name = prompt("Bitte Name eingeben");
if (name != "") break;
}
socket.emit('changeName', name);
}
</script>
</body>

245
src/views/server.hbs
View file

@ -7,8 +7,67 @@
padding: 0;
}
@font-face {
font-family: Mario;
src: url('/assets/SuperMario256.ttf');
}
body {
overflow-x: hidden;
font-family: Mario;
cursor: none;
}
h1,
h2,
h3 {
color: #FFC107;
padding: 5%;
text-align: center;
opacity: 1;
transition: opacity .1s ease-in;
text-shadow: -3px -3px #FAFAFA,
1px 1px #757575,
2px 2px #757575,
3px 3px #757575,
4px 4px #757575,
5px 5px #757575,
6px 6px #757575;
}
h1 {
font-size: 600%;
padding-bottom: 0;
}
h2 {
padding-top: .5%;
padding-bottom: 0;
font-size: 400%;
}
h3 {
font-size: 300%;
text-shadow: none;
padding-top: 0;
padding-bottom: 1%;
}
ol {
padding: 0 5%;
list-style-type: decimal-leading-zero;
width: 90%;
padding-bottom: 2%;
}
ol li {
font-size: 140%;
text-align: center;
}
flexbox {
display: flex;
justify-content: space-around;
}
img.check {
@ -16,20 +75,15 @@
}
img.checkmark {
content: "";
display: block;
position: absolute;
width: 200px;
top: 180px;
left: 680px;
margin-top: 180px;
margin-left: 130px;
height: 200px;
z-index: 1;
}
img.checkmark.left {
left: 140px;
}
img.checkmark.hidden {
display: none;
}
@ -41,18 +95,31 @@
</style>
</head>
<lobby>
<h1>Super
<span style="color:#E53935;">M</span><span style="color:#4CAF50;">A</span><span style="color:#FFC107;">R</span><span style="color:#3F51B5;">I</span><span style="color:#4CAF50;">O</span></h1>
<h2 style="opacity:1;">QR-Code scannen um zu spielen</h2>
<flexbox>
<mario>
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMyNkE5NjQiIGQ9Ik00OS44NDQsNjguMzI1Yy0xLjQxNiwwLTIuNzQ4LTAuNTU0LTMuNzUtMS41NTdMMjcuNTIzLDQ4LjE5MWMtMS4wMDMtMS4wMDItMS41NTUtMi4zMzQtMS41NTUtMy43NXMwLjU1Mi0yLjc0OSwxLjU1NS0zLjc1YzEuMDAxLTEuMDAxLDIuMzMzLTEuNTUyLDMuNzUtMS41NTJzMi43NSwwLjU1MSwzLjc1MywxLjU1M2wxNC4wMTksMTQuMDE3TDgyLjE0LDUuNTA0YzAuOTg5LTEuNDY4LDIuNjM5LTIuMzQ1LDQuNDEyLTIuMzQ1YzEuMDU0LDAsMi4wNzUsMC4zMTIsMi45NTYsMC45MDJjMi40MjQsMS42MzEsMy4wNyw0LjkzNCwxLjQzOSw3LjM2MUw1NC4yNSw2NS45OGMtMC44OTIsMS4zMTYtMi4zMTIsMi4xNjItMy44OTUsMi4zMTRDNTAuMTcsNjguMzE1LDUwLjAxLDY4LjMyNSw0OS44NDQsNjguMzI1eiIvPjwvZz48L3N2Zz4="
class="checkmark left hidden">
<img src="assets/mario.qr.png?{{marioId}}">
<a href="{{marioURL}}">Mario</a>
class="checkmark hidden">
<a href="{{marioURL}}" target="_blank">
<img>
</a>
</mario>
<luigi>
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMyNkE5NjQiIGQ9Ik00OS44NDQsNjguMzI1Yy0xLjQxNiwwLTIuNzQ4LTAuNTU0LTMuNzUtMS41NTdMMjcuNTIzLDQ4LjE5MWMtMS4wMDMtMS4wMDItMS41NTUtMi4zMzQtMS41NTUtMy43NXMwLjU1Mi0yLjc0OSwxLjU1NS0zLjc1YzEuMDAxLTEuMDAxLDIuMzMzLTEuNTUyLDMuNzUtMS41NTJzMi43NSwwLjU1MSwzLjc1MywxLjU1M2wxNC4wMTksMTQuMDE3TDgyLjE0LDUuNTA0YzAuOTg5LTEuNDY4LDIuNjM5LTIuMzQ1LDQuNDEyLTIuMzQ1YzEuMDU0LDAsMi4wNzUsMC4zMTIsMi45NTYsMC45MDJjMi40MjQsMS42MzEsMy4wNyw0LjkzNCwxLjQzOSw3LjM2MUw1NC4yNSw2NS45OGMtMC44OTIsMS4zMTYtMi4zMTIsMi4xNjItMy44OTUsMi4zMTRDNTAuMTcsNjguMzE1LDUwLjAxLDY4LjMyNSw0OS44NDQsNjguMzI1eiIvPjwvZz48L3N2Zz4="
class="checkmark hidden">
<img src="assets/luigi.qr.png?{{luigiId}}">
<a href="{{luigiURL}}">Luigi</a>
<a href="{{luigiURL}}" target="_blank">
<img>
</a>
</luigi>
</flexbox>
<h3>Highscores</h3>
<flexbox>
<ol start="1"></ol>
<ol start="6"></ol>
<ol start="11"></ol>
</flexbox>
</lobby>
<game>
@ -68,18 +135,17 @@
</game>
<script>
// flash h2
setInterval(() => {
document.querySelector('h2').style.opacity = document.querySelector('h2').style.opacity == 1 ? 0 : 1;
}, 750);
const lobbyDOM = document.querySelector('lobby'),
gameDOM = document.querySelector('game');
let gameState = 0;
var socket = io('/monitor');
socket.on('updateGameState', gs => {
gameState = gs;
switch (gameState) {
case 0: lobbyDOM.style.display = 'inline'; gameDOM.style.display = 'none'; break;
case 1: lobbyDOM.style.display = 'none'; gameDOM.style.display = 'inline'; initGame(); break;
}
});
socket.on('updateGameState', updateGameState);
socket.on('clientConnect', type => {
if (type == 'mario') {
@ -101,6 +167,55 @@
}
});
function updateGameState(gs) {
gameState = gs;
switch (gameState) {
case 0: lobbyDOM.style.display = 'inline'; gameDOM.style.display = 'none'; break;
case 1:
lobbyDOM.style.display = 'none';
gameDOM.style.display = 'inline';
playerMario = new Player('char_mario');
playerLuigi = new Player('char_luigi');
break;
}
}
let scores;
socket.on('handshake', options => {
function sortHighToLow(a, b) {
if (a.score < b.score)
return -1;
if (a.score > b.score)
return 1;
return 0;
}
updateGameState(0);
document.querySelector('mario img.checkmark').classList.add('hidden');
document.querySelector('mario img:not(.checkmark)').classList.remove('check');
document.querySelector('luigi img.checkmark').classList.add('hidden');
document.querySelector('luigi img:not(.checkmark)').classList.remove('check');
document.querySelector('ol[start="11"]').innerHTML = '';
document.querySelector('ol[start="6"]').innerHTML = '';
document.querySelector('ol[start="1"]').innerHTML = '';
document.querySelector('mario a img').src = 'assets/mario.qr.png?' + options.marioId;
document.querySelector('luigi a img').src = 'assets/luigi.qr.png?' + options.luigiId;
scores = options.scores.sort(sortHighToLow).reverse();
console.log(scores);
for (let i in scores) {
if (!scores[i].name)
scores[i].name = "Player";
if (i > 14)
return;
else if (i > 9)
document.querySelector('ol[start="11"]').innerHTML += '<li>' + scores[i].name + ': ' + scores[i].score + '</li>';
else if (i > 4)
document.querySelector('ol[start="6"]').innerHTML += '<li>' + scores[i].name + ': ' + scores[i].score + '</li>';
else
document.querySelector('ol[start="1"]').innerHTML += '<li>' + scores[i].name + ': ' + scores[i].score + '</li>';
}
});
let lastBtn;
socket.on('moveStart_right', type => {
if (type == 'mario') {
@ -169,6 +284,7 @@
canvas.height = window.innerHeight;
window.requestAnimationFrame(draw);
gameDOM.style.display = 'none';
}
let offset = 0;
@ -198,44 +314,44 @@
ctx.stroke();
}
/*
for (let y = bottom / BLOCK_SIZE - 2; y < bottom / BLOCK_SIZE; y++)
for (let x = 0; x < right / BLOCK_SIZE; x++)
addBlock(block_dirt, x * BLOCK_SIZE, y * BLOCK_SIZE, true);
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 < .5 * right / BLOCK_SIZE; x++) {
if (x % 3) continue;
addBlock(block_dirt, x * BLOCK_SIZE, bottom - 6 * BLOCK_SIZE, true);
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);
*/
addBlockRow(block_grass, 0, 0, 10, true);
addBlock(block_grass, 4, 1, true);
addBlock(block_dirt, 4, 0, true);
addBlock(block_grass, 7, 2, true);
addBlock(block_dirt, 7, 1, true);
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);
addBlockRow(block_dirt, 0, 0, 36, false);
addBlockRow(block_dirt, 0, 1, 36, false);
addBlockRow(block_grass, 0, 2, 4, true);
addBlockRow(block_dirt, 4, 2, 32, false);
addBlock(block_dirt, 4, 3, true);
addBlockRow(block_dirt, 5, 3, 8, false);
addBlockRow(block_grass, 4, 4, 4, true);
addBlockRow(block_dirt, 8, 4, 4, false);
addBlockRow(block_dirt, 9, 5, 3, false);
addBlockRow(block_dirt, 10, 6, 2, false);
addBlockRect(block_dirt, 12, 4, 1, 5, true);
addBlock(block_dirt, 11, 7, false);
addBlock(block_grass, 8, 5, true);
addBlock(block_grass, 9, 6, true);
addBlock(block_grass, 10, 7, true);
addBlock(block_grass, 11, 8, true);
addBlock(block_grass, 12, 9, true);
addBlockRow(block_grass, 13, 3, 23, true);
addBlockRow(block_grass, 40, 0, 10, true);
addBlock(block_grass, 44, 1, true);
addBlock(block_dirt, 44, 0, true);
addBlock(block_grass, 47, 2, true);
addBlock(block_dirt, 47, 1, true);
addBlock(block_dirt, 47, 0, true);
addBlockRow(block_grass, 50, 1, 5, true);
addBlockRow(block_dirt, 50, 0, 5, true);
addBlockRow(block_grass, 56, 4, 3, true);
addBlockRow(block_grass, 56, 0, 8, true);
addBlockRect(block_dirt, 59, 3, 3, 5, true);
addBlockRow(block_grass, 60, 8, 2, true);
addBlock(block_dirt, 59, 8, true);
addBlock(block_grass, 62, 3, true);
addBlock(block_grass, 64, 6, true);
addBlock(block_grass, 62, 9, true);
addBlock(block_dirt, 59, 9, true);
addBlock(block_grass, 59, 10, true);
addBlockRow(block_grass, 61, 12, 4, true);
addBlockRow(block_grass, 73, 0, 4, true);
if (!playerMario.dead)
@ -262,9 +378,9 @@
if (playerMove.vel !== player.vel)
player.x -= playerMove.vel;
if (player.x <= 0)
player.dead = true;
player.die();
if (playerMove.x <= 0)
playerMove.dead = true;
playerMove.die();
offset = newOffset;
}
console.log(offset + ' : ' + player.vel);
@ -316,7 +432,7 @@
Player.prototype.gravity = function () {
if (this.y >= bottom) {
this.dead = true;
this.die();
return;
}
if (this.velUp > 0) return;
@ -372,6 +488,15 @@
this.score += this.vel;
}
Player.prototype.die = function () {
if (this.dead) return;
this.dead = true;
if (this.type === 'char_mario')
socket.emit('playerDie', { score: this.score, player: 'mario' });
else
socket.emit('playerDie', { score: this.score, player: 'luigi' });
}
function between(val, min, max) {
return val >= min && val <= max;
}