archive/fractal-hell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve UI

Browse source
This commit is contained in:
biglyderv 2024-09-13 06:11:07 -04:00
parent 5ab4e05afe
commit cae503167f
No known key found for this signature in database
GPG key ID: 33AC87E9ACE66954
4 changed files with 132 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
game.css
View file

@ -1,5 +1,6 @@
.message {
position: relative;
margin-bottom: -800px;
bottom: 800px;
width: 800px;
height: 800px;
@ -20,6 +21,11 @@
font-size: 50px;
}
.ui-text {
white-space: pre-wrap;
font-weight: bold;
padding: 10px;
}
#canvas {
width: 800px;
height: 800px;

9
index.html
View file

@ -10,8 +10,13 @@
<body>
<section id='main'>
<h1>Fractal Hell</h1>
<canvas id='canvas'></canvas>
<div class='message' style='display: none;'><span>You died in the Void...</span></div>
<div>
<canvas id='canvas'></canvas>
<div class='message' style='display: none;'><span>You died in the Void...</span></div>
</div>
<div class='ui-text'>
placeholder
</div>
</section>
<script src='js/perlin.js'></script>
<script src='js/index.js'></script>

34
js/index.js
View file

@ -52,6 +52,32 @@ function Game(inSize, exp, cs) {
this.dead = false;
}
Game.prototype.player = function () {
let { ctx, fac, base, exp, inSize, camera, cs } = this;
ctx.fillStyle = 'red';
ctx.rect(cs / 2 - 2, cs / 2 - 2, 4, 4);
ctx.fill();
if (toPoint(camera[0], camera[1], base, fac, exp, inSize) == 0) {
this.dead = true;
}
let cx = Math.floor(camera[0]) / tileSize;
let cy = Math.floor(camera[1]) / tileSize;
let sum = 0;
for (let i in base) {
sum += base[i]
}
sum *= fac;
let dim = Math.log(sum) / (Math.log(base.length) / 2);
document.querySelector('.ui-text').textContent = `Coordinates: ${cx},${cy}\nDimensionality: ${dim}`
}
Game.prototype.main = function () {
var { base, inSize, ctx, cs, frames, exp, camera, dat } = this;
if (this.dead) {
@ -82,13 +108,7 @@ Game.prototype.main = function () {
ctx.putImageData(dat, 0, 0, 0, 0, cs, cs);
ctx.fillStyle = 'red';
ctx.rect(cs / 2 - 2, cs / 2 - 2,4,4);
ctx.fill();
if (toPoint(camera[0], camera[1], base, this.fac, exp, inSize) == 0 ){
this.dead = true;
}
this.player();
}
Game.prototype.map = function () {

92
motion.js Normal file
View file

@ -0,0 +1,92 @@
let area2 = document.querySelector('#area-out');
let pos = [];
let mpos = [0, 0];
let keys = [];
let vel = [0, 0];
let translate = '';
let width = 0;
let height = 0;
let center = [0, 0];
let lastPos = [0, 0];
let isMouse = false;
let zoom = 0.8;
let id = '';
let gen = (async () => {
pos = await genTree(id);
});
if (area) {
gen();
}
function down(e) {
keys[e.key.toLowerCase()] = true;
};
function up(e) {
keys[e.key.toLowerCase()] = false;
};
function mouseMove(e) {
lastPos = [e.clientX, e.clientY];
if (!isMouse) return;
mpos[0] += e.clientX - center[0];
mpos[1] += e.clientY - center[1];
center = lastPos;
}
function mouseUp(e) {
isMouse = false;
}
function mouseDown(e) {
if (e.button == '2') return;
isMouse = true;
center = [e.clientX, e.clientY];
}
function wheel(e) {
mpos[0] -= lastPos[0];
mpos[1] -= lastPos[1];
mpos[0] *= (1.005 ** -e.deltaY)
mpos[1] *= (1.005 ** -e.deltaY)
mpos[0] += lastPos[0];
mpos[1] += lastPos[1];
zoom *= (1.005 ** -e.deltaY)
}
function move() {
width = area2.clientWidth;
height = area.clientHeight;
var isShift = keys['q'];
vel[0] += ((keys['a'] ? 1 : 0) - (keys['d'] ? 1 : 0)) * (isShift ? 5 : 1);
vel[1] += ((keys['w'] ? 1 : 0) - (keys['s'] ? 1 : 0)) * (isShift ? 5 : 1);
vel[0] *= 0.9;
vel[1] *= 0.9;
mpos[0] += vel[0];
mpos[1] += vel[1];
translate = `translate(${mpos[0]}px,${mpos[1]}px) scale(${zoom},${zoom})`;
area.style.transform = translate;
}
setInterval(move, 10);
window.addEventListener('keydown', down);
window.addEventListener('keyup', up);
window.addEventListener('wheel', wheel);
window.addEventListener('mousemove', mouseMove);
window.addEventListener('mousedown', mouseDown);
window.addEventListener('mouseup', mouseUp);