improve UI
This commit is contained in:
parent
5ab4e05afe
commit
cae503167f
4 changed files with 132 additions and 9 deletions
6
game.css
6
game.css
|
|
@ -1,5 +1,6 @@
|
||||||
.message {
|
.message {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin-bottom: -800px;
|
||||||
bottom: 800px;
|
bottom: 800px;
|
||||||
width: 800px;
|
width: 800px;
|
||||||
height: 800px;
|
height: 800px;
|
||||||
|
|
@ -20,6 +21,11 @@
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui-text {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
#canvas {
|
#canvas {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
height: 800px;
|
height: 800px;
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,13 @@
|
||||||
<body>
|
<body>
|
||||||
<section id='main'>
|
<section id='main'>
|
||||||
<h1>Fractal Hell</h1>
|
<h1>Fractal Hell</h1>
|
||||||
<canvas id='canvas'></canvas>
|
<div>
|
||||||
<div class='message' style='display: none;'><span>You died in the Void...</span></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>
|
</section>
|
||||||
<script src='js/perlin.js'></script>
|
<script src='js/perlin.js'></script>
|
||||||
<script src='js/index.js'></script>
|
<script src='js/index.js'></script>
|
||||||
|
|
|
||||||
34
js/index.js
34
js/index.js
|
|
@ -52,6 +52,32 @@ function Game(inSize, exp, cs) {
|
||||||
this.dead = false;
|
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 () {
|
Game.prototype.main = function () {
|
||||||
var { base, inSize, ctx, cs, frames, exp, camera, dat } = this;
|
var { base, inSize, ctx, cs, frames, exp, camera, dat } = this;
|
||||||
if (this.dead) {
|
if (this.dead) {
|
||||||
|
|
@ -82,13 +108,7 @@ Game.prototype.main = function () {
|
||||||
|
|
||||||
ctx.putImageData(dat, 0, 0, 0, 0, cs, cs);
|
ctx.putImageData(dat, 0, 0, 0, 0, cs, cs);
|
||||||
|
|
||||||
ctx.fillStyle = 'red';
|
this.player();
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Game.prototype.map = function () {
|
Game.prototype.map = function () {
|
||||||
|
|
|
||||||
92
motion.js
Normal file
92
motion.js
Normal 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);
|
||||||
Loading…
Reference in a new issue