add death

This commit is contained in:
biglyderv 2024-11-25 14:14:20 -05:00
parent b6ffe5cf32
commit b88d04a556
4 changed files with 44 additions and 16 deletions

View file

@ -34,10 +34,8 @@ p {
.message { .message {
position: relative; position: relative;
margin-bottom: -1024px; margin-bottom: -768px;
bottom: 1024px; bottom: 768px;
width: 1024px;
height: 1024px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -61,7 +59,7 @@ p {
padding: 10px; padding: 10px;
} }
#canvas { #canvas, .message {
width: 768px; width: 768px;
height: 768px; height: 768px;
/*image-rendering: pixelated;*/ /*image-rendering: pixelated;*/
@ -73,8 +71,13 @@ section#main {
} }
@media (max-width: 1920px) { @media (max-width: 1920px) {
#canvas { #canvas, .message {
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);
}
} }

View file

@ -9,9 +9,12 @@
<body> <body>
<section id='main'> <section id='main'>
<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><i>By <a href='https://zenoverse.net/'>Onez</a>, more games at <a
href='https://discord.gg/mZDzJ6HD9N'>Discord</a></i></p>
<div> <div>
<canvas id='canvas'></canvas> <canvas id='canvas'></canvas>
<div class='message' style='display: none;'><span>You died in the Void...</span></div> <div class='message' style='display: none;'><span>You are dead.</span></div>
</div> </div>
<div class='ui-text'> <div class='ui-text'>
placeholder placeholder

View file

@ -30,14 +30,21 @@ function Game() {
} }
Game.prototype.main = function () { Game.prototype.main = function () {
let { entities, player } = this; let { entities, player } = this;
if (player.health <= 0) {
document.querySelector('.message').style.display = 'flex';
return;
} else {
}
for (let ent of entities) { for (let ent of entities) {
ent.pos.x += ent.vel.x; ent.pos.x += ent.vel.x;
ent.pos.y += ent.vel.y; ent.pos.y += ent.vel.y;
ent.vel.x *= 0.8; ent.vel.x *= 0.9;
ent.vel.y *= 0.8; ent.vel.y *= 0.9;
ent.rot += 0.03 * ent.dir; ent.rot += 0.03 * ent.dir;
ent.rot = ent.rot % (Math.PI * 10); ent.rot = ent.rot % (Math.PI * 10);
@ -47,16 +54,24 @@ Game.prototype.main = function () {
ent.ticks++; ent.ticks++;
let dist = ((ent.pos.x - player.pos.x) ** 2) + ((ent.pos.y - player.pos.y) ** 2);
let dp = (Math.sin(ent.rot) * (ent.pos.x - player.pos.x)) let dp = (Math.sin(ent.rot) * (ent.pos.x - player.pos.x))
- (Math.cos(ent.rot) * (ent.pos.y - player.pos.y)); - (Math.cos(ent.rot) * (ent.pos.y - player.pos.y));
dp /= ((ent.pos.x - player.pos.x) ** 2) + ((ent.pos.y - player.pos.y) ** 2); dp /= dist;
dp *= 30; dp *= 10;
if (Math.random() < -dp && Math.random() > 5 / (ent.ticks+2)) { if (ent == player) continue;
if (Math.random() < -dp && Math.random() > 3 / (ent.ticks+2)) {
ent.bump(); ent.bump();
} }
if (Math.sqrt(dist) < 96 / 2) {
player.health --;
}
} }
} }
@ -85,6 +100,10 @@ Game.prototype.render = function () {
ctx.restore(); ctx.restore();
} }
Game.prototype.ui = function() {
document.querySelector('.ui-text').textContent = `HP: ${this.player.health}`
}
Game.prototype.click = function () { Game.prototype.click = function () {
let { player } = this; let { player } = this;
@ -95,5 +114,6 @@ var game = new Game();
setInterval(function () { game.main() }, 1000 / 60); setInterval(function () { game.main() }, 1000 / 60);
setInterval(function () { game.render() }, 1000 / 60); setInterval(function () { game.render() }, 1000 / 60);
setInterval(function () { game.ui() }, 1000 / 10);
game.canvas.onclick = () => game.click(); game.canvas.onclick = () => game.click();

View file

@ -9,6 +9,8 @@ function Player() {
this.rot = 0; this.rot = 0;
this.dir = 1; this.dir = 1;
this.ticks = 0; this.ticks = 0;
this.health = 100;
} }
Player.prototype.bump = function () { Player.prototype.bump = function () {
@ -18,11 +20,11 @@ Player.prototype.bump = function () {
player.dir *= -1; player.dir *= -1;
} }
player.vel.x *= 0.6; player.vel.x *= 0.9;
player.vel.y *= 0.6; player.vel.y *= 0.9;
player.vel.x += Math.sin(player.rot) * 25; player.vel.x += Math.sin(player.rot) * 8;
player.vel.y -= Math.cos(player.rot) * 25; player.vel.y -= Math.cos(player.rot) * 8;
player.ticks = 0; player.ticks = 0;
} }