respawn, better death message
This commit is contained in:
parent
969e30f263
commit
a5b1436769
3 changed files with 18 additions and 26 deletions
23
index.css
23
index.css
|
@ -31,20 +31,6 @@ p {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.message {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: -768px;
|
|
||||||
bottom: 768px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.message span {
|
.message span {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -59,7 +45,7 @@ p {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#canvas, .message {
|
#canvas {
|
||||||
width: 768px;
|
width: 768px;
|
||||||
height: 768px;
|
height: 768px;
|
||||||
/*image-rendering: pixelated;*/
|
/*image-rendering: pixelated;*/
|
||||||
|
@ -71,13 +57,8 @@ section#main {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1920px) {
|
@media (max-width: 1920px) {
|
||||||
#canvas, .message {
|
#canvas {
|
||||||
width: min(512px, 90vw);
|
width: min(512px, 90vw);
|
||||||
height: min(512px, 90vw);
|
height: min(512px, 90vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
|
||||||
margin-bottom: min(512px, 90vw);
|
|
||||||
bottom: min(512px, 90vw);
|
|
||||||
}
|
|
||||||
}
|
}
|
|
@ -11,10 +11,9 @@
|
||||||
<h1>UniButton</h1>
|
<h1>UniButton</h1>
|
||||||
<p>The <b>left mouse</b> is the only button. Click to launch... figure out the rest of the combos yourself.</p>
|
<p>The <b>left mouse</b> is the only button. Click to launch... figure out the rest of the combos yourself.</p>
|
||||||
<p><i>By <a href='https://zenoverse.net/'>Onez</a>, more games at <a
|
<p><i>By <a href='https://zenoverse.net/'>Onez</a>, more games at <a
|
||||||
href='https://discord.gg/EpsRZrHswB'>Discord</a></i></p>
|
href='https://discord.gg/EpsRZrHswBu'>Discord</a></i></p>
|
||||||
<div>
|
<div>
|
||||||
<canvas id='canvas'></canvas>
|
<canvas id='canvas'></canvas>
|
||||||
<div class='message' style='display: none;'><span>You are dead.</span></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class='ui-text'>
|
<div class='ui-text'>
|
||||||
placeholder
|
placeholder
|
||||||
|
|
18
js/index.js
18
js/index.js
|
@ -34,9 +34,7 @@ Game.prototype.main = function () {
|
||||||
let { entities, player } = this;
|
let { entities, player } = this;
|
||||||
|
|
||||||
if (player.health <= 0) {
|
if (player.health <= 0) {
|
||||||
document.querySelector('.message').style.display = 'flex';
|
|
||||||
return;
|
return;
|
||||||
} else {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let ent of entities) {
|
for (let ent of entities) {
|
||||||
|
@ -98,6 +96,16 @@ Game.prototype.render = function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
|
|
||||||
|
if (player.health <= 0) {
|
||||||
|
ctx.fillStyle = 'rgba(0,0,0,0.5)';
|
||||||
|
ctx.fillRect(0,0,cs,cs);
|
||||||
|
ctx.fillStyle = 'rgb(255,255,255)';
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.textBaseline = "middle";
|
||||||
|
ctx.font = "bold 48px sans-serif";
|
||||||
|
ctx.fillText('You died! Click to respawn',cs/2,cs/2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Game.prototype.ui = function() {
|
Game.prototype.ui = function() {
|
||||||
|
@ -107,7 +115,11 @@ Game.prototype.ui = function() {
|
||||||
Game.prototype.click = function () {
|
Game.prototype.click = function () {
|
||||||
let { player } = this;
|
let { player } = this;
|
||||||
|
|
||||||
player.bump(game);
|
if (player.health <= 0) {
|
||||||
|
game = new Game();
|
||||||
|
} else {
|
||||||
|
player.bump(game);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var game = new Game();
|
var game = new Game();
|
||||||
|
|
Loading…
Reference in a new issue