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);