From a53e7d5884a63b462ecaa8ee19bbaf7d5d9f11d6 Mon Sep 17 00:00:00 2001 From: onezDerv Date: Fri, 13 Sep 2024 07:19:07 -0400 Subject: [PATCH] a ton of cool stuff --- assets/ground1.svg | 47 + assets/ground2.svg | 47 + assets/ground3.svg | 64 ++ assets/ground4.svg | 82 ++ assets/player.svg | 2370 ++++++++++++++++++++++++++++++++++++++++++++ js/index.js | 62 +- js/motion.js | 4 +- 7 files changed, 2654 insertions(+), 22 deletions(-) create mode 100644 assets/ground1.svg create mode 100644 assets/ground2.svg create mode 100644 assets/ground3.svg create mode 100644 assets/ground4.svg create mode 100644 assets/player.svg diff --git a/assets/ground1.svg b/assets/ground1.svg new file mode 100644 index 0000000..326a881 --- /dev/null +++ b/assets/ground1.svg @@ -0,0 +1,47 @@ + + + + diff --git a/assets/ground2.svg b/assets/ground2.svg new file mode 100644 index 0000000..3ef2dc7 --- /dev/null +++ b/assets/ground2.svg @@ -0,0 +1,47 @@ + + + + diff --git a/assets/ground3.svg b/assets/ground3.svg new file mode 100644 index 0000000..6d8ce27 --- /dev/null +++ b/assets/ground3.svg @@ -0,0 +1,64 @@ + + + + diff --git a/assets/ground4.svg b/assets/ground4.svg new file mode 100644 index 0000000..1a4e682 --- /dev/null +++ b/assets/ground4.svg @@ -0,0 +1,82 @@ + + + + diff --git a/assets/player.svg b/assets/player.svg new file mode 100644 index 0000000..e9a7e8e --- /dev/null +++ b/assets/player.svg @@ -0,0 +1,2370 @@ + + + + diff --git a/js/index.js b/js/index.js index 2152ddb..19614ca 100644 --- a/js/index.js +++ b/js/index.js @@ -1,6 +1,13 @@ //const width = 2048; //const height = 2048; -const tileSize = 8; +const tileSize = 128; +const assets = [ + 'assets/ground1.svg', + 'assets/ground2.svg', + 'assets/player.svg', + 'assets/ground3.svg', + 'assets/ground4.svg', +]; function getRGBA(data, i) { let out = new Uint8Array(4); @@ -33,7 +40,7 @@ function toPoint(x2, y2, base, fac, exp, inSize) { isMask *= fac; - isMask = (isMask - 0.5) * 25 + 0.5; + isMask = (isMask - 0.5) + 0.5; isMask = Math.max(isMask, 0); isMask = Math.min(isMask, 1); return isMask; @@ -41,6 +48,7 @@ function toPoint(x2, y2, base, fac, exp, inSize) { function Game(inSize, exp, cs) { this.exp = exp; + this.assets = []; this.inSize = inSize; this.cs = cs; @@ -53,12 +61,10 @@ function Game(inSize, exp, cs) { } 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(); + let { ctx, fac, base, exp, inSize, camera, cs, assets } = this; + ctx.drawImage(assets[2],cs / 2 - tileSize / 1.8, cs / 2 - tileSize / 1.8, tileSize / 0.9, tileSize / 0.9); - if (toPoint(camera[0], camera[1], base, fac, exp, inSize) == 0) { + if (toPoint(camera[0], camera[1], base, fac, exp, inSize) < 0.5) { this.dead = true; } @@ -86,27 +92,38 @@ Game.prototype.main = function () { } else { } + ctx.clearRect(0,0,cs,cs); + this.frames++; - this.fac = 0.9999 ** frames; - for (let i = 0; i < cs * cs; i++) { - let x = i % cs - let y = Math.floor(i / cs); + this.fac = 0.99999 ** frames; + for (let i = 0; i < (cs/tileSize) * (cs/tileSize); i++) { + let x = i % (cs/tileSize) + x *= tileSize; + let y = Math.floor(i / (cs/tileSize)); + y *= tileSize; - x = x + Math.round(camera[0] - cs / 2); - y = y + Math.round(camera[1] - cs / 2); + x = x + Math.round((camera[0] - cs / 2) / tileSize)*tileSize; + y = y + Math.round((camera[1] - cs / 2) / tileSize)*tileSize; + + let x2 = x - camera[0] + cs/2; + let y2 = y - camera[1] + cs/2; 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]; - setRGBA(dat.data, i, [rgb[0] * isMask, rgb[1] * isMask, rgb[2] * isMask, 255]) + let assetI = ((Math.round(x / tileSize) - Math.round(y / tileSize)) % 2) == 0 ? 0 : 1; + + if (isMask < 0.51) assetI = 3; + if (isMask < 0.501) assetI = 4; + + if (isMask < 0.5) continue; + + ctx.drawImage(this.assets[assetI],x2,y2,tileSize,tileSize); } - ctx.putImageData(dat, 0, 0, 0, 0, cs, cs); this.player(); } @@ -125,7 +142,7 @@ Game.prototype.map = function () { 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] = base[i] * 0.5 + 0.5; //base[i] = (Math.random() > 0.5) ? 0 : 1; } @@ -133,7 +150,7 @@ Game.prototype.map = function () { let x2 = 0, y2 = 0; - while (true) { + for (let i = 0; i < 100000; i++) { x2 = Math.random() * 1e5; y2 = Math.random() * 1e5; let mask = toPoint(x2, y2, base, this.fac, exp, inSize); @@ -156,6 +173,11 @@ Game.prototype.startGame = function () { ctx.imageSmoothingEnabled = false; + for (let asset in assets) { + this.assets[asset] = new Image(); + this.assets[asset].src = assets[asset]; + } + this.dat = ctx.getImageData(0, 0, this.cs, this.cs); this.map(); @@ -167,6 +189,6 @@ Game.prototype.init = function () { that.startGame(); } -let game = new Game(8, 4, 32 * tileSize) +let game = new Game(8, 8, 20 * tileSize) game.init(); diff --git a/js/motion.js b/js/motion.js index 97f6580..4b4fd14 100644 --- a/js/motion.js +++ b/js/motion.js @@ -19,8 +19,8 @@ function move() { vel[0] *= 0.8; vel[1] *= 0.8; - game.camera[0] -= vel[0] * 0.2; - game.camera[1] -= vel[1] * 0.2; + game.camera[0] -= vel[0] * 0.9; + game.camera[1] -= vel[1] * 0.9; } setInterval(move, 10);