diff --git a/game.css b/game.css new file mode 100644 index 0000000..2328f59 --- /dev/null +++ b/game.css @@ -0,0 +1,27 @@ +.message { + position: relative; + bottom: 800px; + width: 800px; + height: 800px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background: rgba(0,0,0,0.5); +} + +.message span { + display: block; + text-align: center; + color: rgb(255,255,255); + font-weight: bold; + font-size: 50px; +} + +#canvas { + width: 800px; + height: 800px; + image-rendering: pixelated +} \ No newline at end of file diff --git a/index.html b/index.html index 79e967a..0bfa1f5 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,21 @@ - - - - - -
-

Fractal Hell

- -
- - - - + + + + + + + +
+

Fractal Hell

+ + +
+ + + + + + \ No newline at end of file diff --git a/js/index.js b/js/index.js index 176ad6d..dc2f1dc 100644 --- a/js/index.js +++ b/js/index.js @@ -1,16 +1,11 @@ -const width = 8 ** 3; -const height = 8 ** 3; - -function validXY(x, y) { - if (x < 0 || x >= width) return false; - if (y < 0 || y >= height) return false; - return true; -} +//const width = 2048; +//const height = 2048; +const tileSize = 8; function getRGBA(data, i) { let out = new Uint8Array(4); for (let j = i * 4; j < i * 4 + 4; j++) { - out[j - i*4] = data[j]; + out[j - i * 4] = data[j]; } return out; } @@ -21,55 +16,83 @@ function setRGBA(data, i, input) { } } -function Game(inSize) { - this.img = new Image(); +function toPoint(x2, y2, base, fac, exp, inSize) { + let isMask = 1; + x2 = Math.round(x2 / tileSize); + y2 = Math.round(y2 / tileSize); + for (let j = 0; j < exp; j++) { + isMask *= base[(y2 % inSize) * inSize + (x2 % inSize)]; + + x2 /= inSize; + y2 /= inSize; + + x2 = Math.floor(x2); + y2 = Math.floor(y2); + + } + + isMask *= fac; + + isMask = (isMask - 0.5) * 25 + 0.5; + isMask = Math.max(isMask, 0); + isMask = Math.min(isMask, 1); + return isMask; +} + +function Game(inSize, exp, cs) { + this.exp = exp; this.inSize = inSize; + this.cs = cs; + + this.img = new Image(); this.base = new Float32Array(inSize * inSize); + this.frames = 0; + this.camera = [0, 0]; + + this.dead = false; } -Game.prototype.main = function() { - var {base, inSize, ctx} = this; - - var dat = ctx.getImageData(0,0,width,height); - - for (let i = 0; i < base.length; i++) { - base[i] = Math.max(base[i] * 0.99999,0); +Game.prototype.main = function () { + var { base, inSize, ctx, cs, frames, exp, camera, dat } = this; + if (this.dead) { + document.querySelector('.message').style.display = 'flex'; + return; + } else { } - let exp = Math.ceil(Math.log(width) - Math.log(inSize)); + this.frames++; - for (let i = 0; i < dat.data.length / 4; i++) { - let x = i % width; - let y = Math.floor(i / width); + this.fac = 0.9999 ** frames; + for (let i = 0; i < cs * cs; i++) { + let x = i % cs + let y = Math.floor(i / cs); - let x2 = x; - let y2 = y; + x = x + Math.round(camera[0] - cs / 2); + y = y + Math.round(camera[1] - cs / 2); - let isMask = 1; - - for (let j = 0; j < exp; j++) { - isMask *= base[(y2 % inSize) * inSize + (x2 % inSize)]; - - x2 /= inSize; - y2 /= inSize; - - x2 = Math.floor(x2); - y2 = Math.floor(y2); + let isMask = toPoint(x, y, base, this.fac, exp, inSize); + if (x < 0 || y < 0) { + setRGBA(dat.data, i, [0, 0, 0, 255]) + continue; } + let rgb = [(Math.round(x / tileSize) % 2) ? 255 : 235, (Math.round(y / tileSize) % 2) ? 255 : 235, 255]; - isMask = (isMask - 0.5) * 100 + 0.5; - isMask = Math.max(isMask,0); - isMask = Math.min(isMask,1); - isMask *= 255; - - setRGBA(dat.data,i,[isMask,isMask,isMask,255]) + setRGBA(dat.data, i, [rgb[0] * isMask, rgb[1] * isMask, rgb[2] * isMask, 255]) } - ctx.putImageData(dat,0,0,0,0,width,height); + 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; + } } -Game.prototype.map = function() { - var {base, inSize} = this; +Game.prototype.map = function () { + var { base, inSize, exp } = this; //noise.seed(Math.random() * 1000); @@ -79,35 +102,51 @@ Game.prototype.map = function() { base[i] = Math.random(); - base[i] = Math.max(base[i],0); - base[i] = Math.min(base[i],1); - base[i] = Math.pow(base[i],0.3); + base[i] = Math.max(base[i], 0); + base[i] = Math.min(base[i], 1); + base[i] = Math.pow(base[i], 0.3); base[i] = base[i] * 0.4 + 0.6; //base[i] = (Math.random() > 0.5) ? 0 : 1; } + + this.fac = 1; + + let x2 = 0, y2 = 0; + + while (true) { + x2 = Math.random() * 1e5; + y2 = Math.random() * 1e5; + let mask = toPoint(x2, y2, base, this.fac, exp, inSize); + if (mask == 1) break; + } + this.camera = [x2, y2]; } -Game.prototype.loop = function() { +Game.prototype.loop = function () { let that = this; - setInterval(function() { that.main() } ,1000 / 60); + setInterval(function () { that.main() }, 1000 / 60); } -Game.prototype.startGame = function() { +Game.prototype.startGame = function () { var canvas = document.querySelector("#canvas"); - canvas.width = width; - canvas.height = height; + canvas.width = this.cs; + canvas.height = this.cs; - var ctx = this.ctx = canvas.getContext("2d",{ willReadFrequently: true }); + var ctx = this.ctx = canvas.getContext("2d"); ctx.imageSmoothingEnabled = false; + this.dat = ctx.getImageData(0, 0, this.cs, this.cs); + this.map(); this.loop(); } -Game.prototype.init = function() { +Game.prototype.init = function () { let that = this; that.startGame(); } -new Game(8).init(); +let game = new Game(8, 4, 32 * tileSize) + +game.init(); diff --git a/js/motion.js b/js/motion.js new file mode 100644 index 0000000..97f6580 --- /dev/null +++ b/js/motion.js @@ -0,0 +1,29 @@ +let keys = []; +let vel = [0, 0]; + +let id = ''; + +function down(e) { + keys[e.key.toLowerCase()] = true; +}; + +function up(e) { + keys[e.key.toLowerCase()] = false; +}; + +function move() { + 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.8; + vel[1] *= 0.8; + + game.camera[0] -= vel[0] * 0.2; + game.camera[1] -= vel[1] * 0.2; +} + +setInterval(move, 10); + +window.addEventListener('keydown', down); +window.addEventListener('keyup', up); \ No newline at end of file