Add Scoreboard and splashscreen
This commit is contained in:
parent
add6d625b1
commit
6269c3abc5
5 changed files with 241 additions and 74 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -1 +1,2 @@
|
||||||
node_modules/
|
node_modules/
|
||||||
|
scores.json
|
BIN
assets/SuperMario256.ttf
Normal file
BIN
assets/SuperMario256.ttf
Normal file
Binary file not shown.
33
server.js
33
server.js
|
@ -6,7 +6,10 @@ const express = require('express'),
|
||||||
// wsEngine: 'ws'
|
// wsEngine: 'ws'
|
||||||
}),
|
}),
|
||||||
exphbs = require('express-handlebars'),
|
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 */
|
/** CONSTANTS */
|
||||||
const HOST = 'http://100.119.37.224:8080/client/';
|
const HOST = 'http://100.119.37.224:8080/client/';
|
||||||
|
@ -14,11 +17,13 @@ const HOST = 'http://100.119.37.224:8080/client/';
|
||||||
const players = [
|
const players = [
|
||||||
{
|
{
|
||||||
type: 'mario',
|
type: 'mario',
|
||||||
|
name: 'Mario',
|
||||||
id: guid(),
|
id: guid(),
|
||||||
score: 0
|
score: 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'luigi',
|
type: 'luigi',
|
||||||
|
name: 'Luigi',
|
||||||
id: guid(),
|
id: guid(),
|
||||||
score: 0
|
score: 0
|
||||||
},
|
},
|
||||||
|
@ -95,6 +100,8 @@ clientNSP.on('connection', socket => {
|
||||||
setTimeout(() => monitorNSP.emit('updateGameState', 1), 2000);
|
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('changeName', name => pl.name = name);
|
||||||
|
|
||||||
socket.on('moveStart_left', () => {
|
socket.on('moveStart_left', () => {
|
||||||
console.log('moveStart_left: ' + pl.type);
|
console.log('moveStart_left: ' + pl.type);
|
||||||
monitorNSP.emit('moveStart_left', pl.type);
|
monitorNSP.emit('moveStart_left', pl.type);
|
||||||
|
@ -125,17 +132,37 @@ clientNSP.on('connection', socket => {
|
||||||
console.log('moveEnd_crouch: ' + pl.type);
|
console.log('moveEnd_crouch: ' + pl.type);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
socket.on('disconnect', () => {
|
socket.on('disconnect', () => {
|
||||||
console.log('Client disconnected.');
|
console.log('Client disconnected.');
|
||||||
|
count--;
|
||||||
monitorNSP.emit('clientDisconnect', getPlayerFromId(id).type);
|
monitorNSP.emit('clientDisconnect', getPlayerFromId(id).type);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let playerDeaths = 0;
|
||||||
monitorNSP.on('connection', socket => {
|
monitorNSP.on('connection', socket => {
|
||||||
console.log('Monitor connected.');
|
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', () => {
|
socket.on('disconnect', () => {
|
||||||
console.log('Monitor disconnected.');
|
console.log('Monitor disconnected.');
|
||||||
});
|
});
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
background-color: #2196F3;
|
background-color: #2196F3;
|
||||||
}
|
}
|
||||||
|
|
||||||
button#crouch,
|
button#name,
|
||||||
button#jump {
|
button#jump {
|
||||||
right: 5%;
|
right: 5%;
|
||||||
}
|
}
|
||||||
|
@ -58,7 +58,7 @@
|
||||||
background-color: #4CAF50;
|
background-color: #4CAF50;
|
||||||
}
|
}
|
||||||
|
|
||||||
button#crouch {
|
button#name {
|
||||||
bottom: calc(40% / 3);
|
bottom: calc(40% / 3);
|
||||||
background-color: #E53935;
|
background-color: #E53935;
|
||||||
}
|
}
|
||||||
|
@ -100,7 +100,7 @@
|
||||||
<button id="left" disabled>Left</button>
|
<button id="left" disabled>Left</button>
|
||||||
<button id="right" disabled>Right</button>
|
<button id="right" disabled>Right</button>
|
||||||
<button id="jump" disabled>Jump</button>
|
<button id="jump" disabled>Jump</button>
|
||||||
<button id="crouch" disabled>Crouch</button>
|
<button id="name" disabled>Name ändern</button>
|
||||||
<script>
|
<script>
|
||||||
window.onscroll = e => e.preventDefault();
|
window.onscroll = e => e.preventDefault();
|
||||||
var noSleep = new NoSleep();
|
var noSleep = new NoSleep();
|
||||||
|
@ -114,6 +114,10 @@
|
||||||
el.addEventListener('touchstart', event => {
|
el.addEventListener('touchstart', event => {
|
||||||
noSleep.enable();
|
noSleep.enable();
|
||||||
console.log('moveStart_' + el.id);
|
console.log('moveStart_' + el.id);
|
||||||
|
if (el.id === 'name') {
|
||||||
|
changeName();
|
||||||
|
return;
|
||||||
|
}
|
||||||
socket.emit('moveStart_' + el.id);
|
socket.emit('moveStart_' + el.id);
|
||||||
el.style.boxShadow = "2px 2px 5px 0px rgba(0, 0, 0, 0.75)";
|
el.style.boxShadow = "2px 2px 5px 0px rgba(0, 0, 0, 0.75)";
|
||||||
});
|
});
|
||||||
|
@ -123,5 +127,15 @@
|
||||||
el.style.boxShadow = "";
|
el.style.boxShadow = "";
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let name;
|
||||||
|
changeName();
|
||||||
|
function changeName() {
|
||||||
|
while (true) {
|
||||||
|
name = prompt("Bitte Name eingeben");
|
||||||
|
if (name != "") break;
|
||||||
|
}
|
||||||
|
socket.emit('changeName', name);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
|
@ -7,8 +7,67 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Mario;
|
||||||
|
src: url('/assets/SuperMario256.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
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 {
|
img.check {
|
||||||
|
@ -16,20 +75,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
img.checkmark {
|
img.checkmark {
|
||||||
content: "";
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
top: 180px;
|
margin-top: 180px;
|
||||||
left: 680px;
|
margin-left: 130px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.checkmark.left {
|
|
||||||
left: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.checkmark.hidden {
|
img.checkmark.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -41,18 +95,31 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<lobby>
|
<lobby>
|
||||||
<mario>
|
<h1>Super
|
||||||
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMyNkE5NjQiIGQ9Ik00OS44NDQsNjguMzI1Yy0xLjQxNiwwLTIuNzQ4LTAuNTU0LTMuNzUtMS41NTdMMjcuNTIzLDQ4LjE5MWMtMS4wMDMtMS4wMDItMS41NTUtMi4zMzQtMS41NTUtMy43NXMwLjU1Mi0yLjc0OSwxLjU1NS0zLjc1YzEuMDAxLTEuMDAxLDIuMzMzLTEuNTUyLDMuNzUtMS41NTJzMi43NSwwLjU1MSwzLjc1MywxLjU1M2wxNC4wMTksMTQuMDE3TDgyLjE0LDUuNTA0YzAuOTg5LTEuNDY4LDIuNjM5LTIuMzQ1LDQuNDEyLTIuMzQ1YzEuMDU0LDAsMi4wNzUsMC4zMTIsMi45NTYsMC45MDJjMi40MjQsMS42MzEsMy4wNyw0LjkzNCwxLjQzOSw3LjM2MUw1NC4yNSw2NS45OGMtMC44OTIsMS4zMTYtMi4zMTIsMi4xNjItMy44OTUsMi4zMTRDNTAuMTcsNjguMzE1LDUwLjAxLDY4LjMyNSw0OS44NDQsNjguMzI1eiIvPjwvZz48L3N2Zz4="
|
<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>
|
||||||
class="checkmark left hidden">
|
<h2 style="opacity:1;">QR-Code scannen um zu spielen</h2>
|
||||||
<img src="assets/mario.qr.png?{{marioId}}">
|
<flexbox>
|
||||||
<a href="{{marioURL}}">Mario</a>
|
<mario>
|
||||||
</mario>
|
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMyNkE5NjQiIGQ9Ik00OS44NDQsNjguMzI1Yy0xLjQxNiwwLTIuNzQ4LTAuNTU0LTMuNzUtMS41NTdMMjcuNTIzLDQ4LjE5MWMtMS4wMDMtMS4wMDItMS41NTUtMi4zMzQtMS41NTUtMy43NXMwLjU1Mi0yLjc0OSwxLjU1NS0zLjc1YzEuMDAxLTEuMDAxLDIuMzMzLTEuNTUyLDMuNzUtMS41NTJzMi43NSwwLjU1MSwzLjc1MywxLjU1M2wxNC4wMTksMTQuMDE3TDgyLjE0LDUuNTA0YzAuOTg5LTEuNDY4LDIuNjM5LTIuMzQ1LDQuNDEyLTIuMzQ1YzEuMDU0LDAsMi4wNzUsMC4zMTIsMi45NTYsMC45MDJjMi40MjQsMS42MzEsMy4wNyw0LjkzNCwxLjQzOSw3LjM2MUw1NC4yNSw2NS45OGMtMC44OTIsMS4zMTYtMi4zMTIsMi4xNjItMy44OTUsMi4zMTRDNTAuMTcsNjguMzE1LDUwLjAxLDY4LjMyNSw0OS44NDQsNjguMzI1eiIvPjwvZz48L3N2Zz4="
|
||||||
<luigi>
|
class="checkmark hidden">
|
||||||
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMyNkE5NjQiIGQ9Ik00OS44NDQsNjguMzI1Yy0xLjQxNiwwLTIuNzQ4LTAuNTU0LTMuNzUtMS41NTdMMjcuNTIzLDQ4LjE5MWMtMS4wMDMtMS4wMDItMS41NTUtMi4zMzQtMS41NTUtMy43NXMwLjU1Mi0yLjc0OSwxLjU1NS0zLjc1YzEuMDAxLTEuMDAxLDIuMzMzLTEuNTUyLDMuNzUtMS41NTJzMi43NSwwLjU1MSwzLjc1MywxLjU1M2wxNC4wMTksMTQuMDE3TDgyLjE0LDUuNTA0YzAuOTg5LTEuNDY4LDIuNjM5LTIuMzQ1LDQuNDEyLTIuMzQ1YzEuMDU0LDAsMi4wNzUsMC4zMTIsMi45NTYsMC45MDJjMi40MjQsMS42MzEsMy4wNyw0LjkzNCwxLjQzOSw3LjM2MUw1NC4yNSw2NS45OGMtMC44OTIsMS4zMTYtMi4zMTIsMi4xNjItMy44OTUsMi4zMTRDNTAuMTcsNjguMzE1LDUwLjAxLDY4LjMyNSw0OS44NDQsNjguMzI1eiIvPjwvZz48L3N2Zz4="
|
<a href="{{marioURL}}" target="_blank">
|
||||||
class="checkmark hidden">
|
<img>
|
||||||
<img src="assets/luigi.qr.png?{{luigiId}}">
|
</a>
|
||||||
<a href="{{luigiURL}}">Luigi</a>
|
</mario>
|
||||||
</luigi>
|
<luigi>
|
||||||
|
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMyNkE5NjQiIGQ9Ik00OS44NDQsNjguMzI1Yy0xLjQxNiwwLTIuNzQ4LTAuNTU0LTMuNzUtMS41NTdMMjcuNTIzLDQ4LjE5MWMtMS4wMDMtMS4wMDItMS41NTUtMi4zMzQtMS41NTUtMy43NXMwLjU1Mi0yLjc0OSwxLjU1NS0zLjc1YzEuMDAxLTEuMDAxLDIuMzMzLTEuNTUyLDMuNzUtMS41NTJzMi43NSwwLjU1MSwzLjc1MywxLjU1M2wxNC4wMTksMTQuMDE3TDgyLjE0LDUuNTA0YzAuOTg5LTEuNDY4LDIuNjM5LTIuMzQ1LDQuNDEyLTIuMzQ1YzEuMDU0LDAsMi4wNzUsMC4zMTIsMi45NTYsMC45MDJjMi40MjQsMS42MzEsMy4wNyw0LjkzNCwxLjQzOSw3LjM2MUw1NC4yNSw2NS45OGMtMC44OTIsMS4zMTYtMi4zMTIsMi4xNjItMy44OTUsMi4zMTRDNTAuMTcsNjguMzE1LDUwLjAxLDY4LjMyNSw0OS44NDQsNjguMzI1eiIvPjwvZz48L3N2Zz4="
|
||||||
|
class="checkmark hidden">
|
||||||
|
<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>
|
</lobby>
|
||||||
|
|
||||||
<game>
|
<game>
|
||||||
|
@ -68,18 +135,17 @@
|
||||||
</game>
|
</game>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// flash h2
|
||||||
|
setInterval(() => {
|
||||||
|
document.querySelector('h2').style.opacity = document.querySelector('h2').style.opacity == 1 ? 0 : 1;
|
||||||
|
}, 750);
|
||||||
|
|
||||||
const lobbyDOM = document.querySelector('lobby'),
|
const lobbyDOM = document.querySelector('lobby'),
|
||||||
gameDOM = document.querySelector('game');
|
gameDOM = document.querySelector('game');
|
||||||
let gameState = 0;
|
let gameState = 0;
|
||||||
var socket = io('/monitor');
|
var socket = io('/monitor');
|
||||||
|
|
||||||
socket.on('updateGameState', gs => {
|
socket.on('updateGameState', updateGameState);
|
||||||
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('clientConnect', type => {
|
socket.on('clientConnect', type => {
|
||||||
if (type == 'mario') {
|
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;
|
let lastBtn;
|
||||||
socket.on('moveStart_right', type => {
|
socket.on('moveStart_right', type => {
|
||||||
if (type == 'mario') {
|
if (type == 'mario') {
|
||||||
|
@ -169,6 +284,7 @@
|
||||||
canvas.height = window.innerHeight;
|
canvas.height = window.innerHeight;
|
||||||
|
|
||||||
window.requestAnimationFrame(draw);
|
window.requestAnimationFrame(draw);
|
||||||
|
gameDOM.style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
let offset = 0;
|
let offset = 0;
|
||||||
|
@ -198,44 +314,44 @@
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
addBlockRow(block_dirt, 0, 0, 36, false);
|
||||||
for (let y = bottom / BLOCK_SIZE - 2; y < bottom / BLOCK_SIZE; y++)
|
addBlockRow(block_dirt, 0, 1, 36, false);
|
||||||
for (let x = 0; x < right / BLOCK_SIZE; x++)
|
addBlockRow(block_grass, 0, 2, 4, true);
|
||||||
addBlock(block_dirt, x * BLOCK_SIZE, y * BLOCK_SIZE, true);
|
addBlockRow(block_dirt, 4, 2, 32, false);
|
||||||
for (let x = 0; x < 2 * right / BLOCK_SIZE; x++) {
|
addBlock(block_dirt, 4, 3, true);
|
||||||
//if (x % 3) continue;
|
addBlockRow(block_dirt, 5, 3, 8, false);
|
||||||
addBlock(block_grass, x * BLOCK_SIZE, bottom - 3 * BLOCK_SIZE, true);
|
addBlockRow(block_grass, 4, 4, 4, true);
|
||||||
}
|
addBlockRow(block_dirt, 8, 4, 4, false);
|
||||||
for (let x = 0; x < .5 * right / BLOCK_SIZE; x++) {
|
addBlockRow(block_dirt, 9, 5, 3, false);
|
||||||
if (x % 3) continue;
|
addBlockRow(block_dirt, 10, 6, 2, false);
|
||||||
addBlock(block_dirt, x * BLOCK_SIZE, bottom - 6 * BLOCK_SIZE, true);
|
addBlockRect(block_dirt, 12, 4, 1, 5, true);
|
||||||
addBlock(block_grass, x * BLOCK_SIZE, bottom - 7 * BLOCK_SIZE, true);
|
addBlock(block_dirt, 11, 7, false);
|
||||||
}
|
addBlock(block_grass, 8, 5, true);
|
||||||
addBlock(block_dirt, 5 * BLOCK_SIZE, bottom - 4 * BLOCK_SIZE, true);
|
addBlock(block_grass, 9, 6, true);
|
||||||
addBlock(block_dirt, 5 * BLOCK_SIZE, bottom - 5 * BLOCK_SIZE, true);
|
addBlock(block_grass, 10, 7, true);
|
||||||
addBlock(block_grass, 5 * BLOCK_SIZE, bottom - 6 * BLOCK_SIZE, true);
|
addBlock(block_grass, 11, 8, true);
|
||||||
*/
|
addBlock(block_grass, 12, 9, true);
|
||||||
|
addBlockRow(block_grass, 13, 3, 23, true);
|
||||||
addBlockRow(block_grass, 0, 0, 10, true);
|
addBlockRow(block_grass, 40, 0, 10, true);
|
||||||
addBlock(block_grass, 4, 1, true);
|
addBlock(block_grass, 44, 1, true);
|
||||||
addBlock(block_dirt, 4, 0, true);
|
addBlock(block_dirt, 44, 0, true);
|
||||||
addBlock(block_grass, 7, 2, true);
|
addBlock(block_grass, 47, 2, true);
|
||||||
addBlock(block_dirt, 7, 1, true);
|
addBlock(block_dirt, 47, 1, true);
|
||||||
addBlock(block_dirt, 7, 0, true);
|
addBlock(block_dirt, 47, 0, true);
|
||||||
addBlockRow(block_grass, 10, 1, 5, true);
|
addBlockRow(block_grass, 50, 1, 5, true);
|
||||||
addBlockRow(block_dirt, 10, 0, 5, true);
|
addBlockRow(block_dirt, 50, 0, 5, true);
|
||||||
addBlockRow(block_grass, 16, 4, 3, true);
|
addBlockRow(block_grass, 56, 4, 3, true);
|
||||||
addBlockRow(block_grass, 16, 0, 8, true);
|
addBlockRow(block_grass, 56, 0, 8, true);
|
||||||
addBlockRect(block_dirt, 19, 3, 3, 5, true);
|
addBlockRect(block_dirt, 59, 3, 3, 5, true);
|
||||||
addBlockRow(block_grass, 20, 8, 2, true);
|
addBlockRow(block_grass, 60, 8, 2, true);
|
||||||
addBlock(block_dirt, 19, 8, true);
|
addBlock(block_dirt, 59, 8, true);
|
||||||
addBlock(block_grass, 22, 3, true);
|
addBlock(block_grass, 62, 3, true);
|
||||||
addBlock(block_grass, 24, 6, true);
|
addBlock(block_grass, 64, 6, true);
|
||||||
addBlock(block_grass, 22, 9, true);
|
addBlock(block_grass, 62, 9, true);
|
||||||
addBlock(block_dirt, 19, 9, true);
|
addBlock(block_dirt, 59, 9, true);
|
||||||
addBlock(block_grass, 19, 10, true);
|
addBlock(block_grass, 59, 10, true);
|
||||||
addBlockRow(block_grass, 21, 12, 4, true);
|
addBlockRow(block_grass, 61, 12, 4, true);
|
||||||
addBlockRow(block_grass, 33, 0, 4, true);
|
addBlockRow(block_grass, 73, 0, 4, true);
|
||||||
|
|
||||||
|
|
||||||
if (!playerMario.dead)
|
if (!playerMario.dead)
|
||||||
|
@ -262,9 +378,9 @@
|
||||||
if (playerMove.vel !== player.vel)
|
if (playerMove.vel !== player.vel)
|
||||||
player.x -= playerMove.vel;
|
player.x -= playerMove.vel;
|
||||||
if (player.x <= 0)
|
if (player.x <= 0)
|
||||||
player.dead = true;
|
player.die();
|
||||||
if (playerMove.x <= 0)
|
if (playerMove.x <= 0)
|
||||||
playerMove.dead = true;
|
playerMove.die();
|
||||||
offset = newOffset;
|
offset = newOffset;
|
||||||
}
|
}
|
||||||
console.log(offset + ' : ' + player.vel);
|
console.log(offset + ' : ' + player.vel);
|
||||||
|
@ -316,7 +432,7 @@
|
||||||
|
|
||||||
Player.prototype.gravity = function () {
|
Player.prototype.gravity = function () {
|
||||||
if (this.y >= bottom) {
|
if (this.y >= bottom) {
|
||||||
this.dead = true;
|
this.die();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (this.velUp > 0) return;
|
if (this.velUp > 0) return;
|
||||||
|
@ -372,6 +488,15 @@
|
||||||
this.score += this.vel;
|
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) {
|
function between(val, min, max) {
|
||||||
return val >= min && val <= max;
|
return val >= min && val <= max;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue