a ton of cool stuff
This commit is contained in:
parent
ed57dc9d94
commit
a53e7d5884
7 changed files with 2654 additions and 22 deletions
47
assets/ground1.svg
Normal file
47
assets/ground1.svg
Normal file
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="459.35626mm"
|
||||
height="459.35626mm"
|
||||
viewBox="0 0 459.35627 459.35628"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="ground1.svg"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.18707912"
|
||||
inkscape:cx="1079.757"
|
||||
inkscape:cy="1325.6423"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-439.81067,378.98895)"><rect
|
||||
style="opacity:1;fill:#adadad;fill-opacity:1;stroke:none;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect164"
|
||||
width="459.35626"
|
||||
height="459.35626"
|
||||
x="439.81067"
|
||||
y="-378.98895"
|
||||
rx="34.709881"
|
||||
ry="34.709881" /></g></svg>
|
After Width: | Height: | Size: 1.6 KiB |
47
assets/ground2.svg
Normal file
47
assets/ground2.svg
Normal file
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="459.35626mm"
|
||||
height="459.35626mm"
|
||||
viewBox="0 0 459.35627 459.35628"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="ground2.svg"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.18707912"
|
||||
inkscape:cx="1079.757"
|
||||
inkscape:cy="1325.6423"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-439.81067,378.98895)"><rect
|
||||
style="opacity:1;fill:#d2d2d2;fill-opacity:1;stroke:none;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect164"
|
||||
width="459.35626"
|
||||
height="459.35626"
|
||||
x="439.81067"
|
||||
y="-378.98895"
|
||||
rx="34.709881"
|
||||
ry="34.709881" /></g></svg>
|
After Width: | Height: | Size: 1.6 KiB |
64
assets/ground3.svg
Normal file
64
assets/ground3.svg
Normal file
|
@ -0,0 +1,64 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="459.35626mm"
|
||||
height="459.35626mm"
|
||||
viewBox="0 0 459.35627 459.35628"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="ground3.svg"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.26456983"
|
||||
inkscape:cx="340.17484"
|
||||
inkscape:cy="1065.8812"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-439.81067,378.98895)"><rect
|
||||
style="opacity:1;fill:#913d3d;fill-opacity:1;stroke:none;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect164"
|
||||
width="459.35626"
|
||||
height="459.35626"
|
||||
x="439.81067"
|
||||
y="-378.98895"
|
||||
rx="34.709881"
|
||||
ry="34.709881" /><text
|
||||
xml:space="preserve"
|
||||
style="font-size:7.9375px;line-height:1;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans';fill:#d2d2d2;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round"
|
||||
x="362.15561"
|
||||
y="-111.13891"
|
||||
id="text1"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan1"
|
||||
style="stroke-width:21.4312"></tspan></text><path
|
||||
id="rect3"
|
||||
style="fill:#390000;fill-opacity:1;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round"
|
||||
d="m 629.38261,-337.23314 h 80.21238 c 19.22927,0 34.70988,15.4806 34.70988,34.70988 L 669.4888,-77.702467 594.67273,-302.52326 c 0,-19.22928 15.48061,-34.70988 34.70988,-34.70988 z"
|
||||
sodipodi:nodetypes="sscccs" /><circle
|
||||
style="fill:#390000;fill-opacity:1;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="path3"
|
||||
cx="667.52039"
|
||||
cy="-13.106801"
|
||||
r="51.7183" /></g></svg>
|
After Width: | Height: | Size: 2.5 KiB |
82
assets/ground4.svg
Normal file
82
assets/ground4.svg
Normal file
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="459.35626mm"
|
||||
height="459.35626mm"
|
||||
viewBox="0 0 459.35627 459.35628"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="ground4.svg"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.26456983"
|
||||
inkscape:cx="340.17484"
|
||||
inkscape:cy="1062.1015"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-439.81067,378.98895)"><rect
|
||||
style="opacity:1;fill:#331515;fill-opacity:1;stroke:none;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect164"
|
||||
width="459.35626"
|
||||
height="459.35626"
|
||||
x="439.81067"
|
||||
y="-378.98895"
|
||||
rx="34.709881"
|
||||
ry="34.709881" /><text
|
||||
xml:space="preserve"
|
||||
style="font-size:7.9375px;line-height:1;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans';fill:#d2d2d2;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round"
|
||||
x="362.15561"
|
||||
y="-111.13891"
|
||||
id="text1"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan1"
|
||||
style="stroke-width:21.4312"></tspan></text><path
|
||||
id="rect3"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round"
|
||||
d="m 629.38261,-337.23314 h 80.21238 c 19.22927,0 34.70988,15.4806 34.70988,34.70988 L 669.4888,-77.702467 594.67273,-302.52326 c 0,-19.22928 15.48061,-34.70988 34.70988,-34.70988 z"
|
||||
sodipodi:nodetypes="sscccs" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:21.4312;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="path3"
|
||||
cx="667.52039"
|
||||
cy="-13.106801"
|
||||
r="51.7183" /><path
|
||||
id="path4"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:14.7593;stroke-linecap:round;stroke-linejoin:round"
|
||||
d="m 768.20897,-258.83774 h 55.24088 c 13.24286,0 23.90409,10.66122 23.90409,23.9041 L 795.82941,-80.103448 744.30487,-234.93364 c 0,-13.24288 10.66123,-23.9041 23.9041,-23.9041 z"
|
||||
sodipodi:nodetypes="sscccs" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:14.7593;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="circle4"
|
||||
cx="794.47382"
|
||||
cy="-35.617531"
|
||||
r="35.6175" /><path
|
||||
id="path5"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:14.7593;stroke-linecap:round;stroke-linejoin:round"
|
||||
d="m 521.63248,-258.83774 h 55.24088 c 13.24286,0 23.90409,10.66122 23.90409,23.9041 L 549.25292,-80.103448 497.72838,-234.93364 c 0,-13.24288 10.66123,-23.9041 23.9041,-23.9041 z"
|
||||
sodipodi:nodetypes="sscccs" /><circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:14.7593;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="circle5"
|
||||
cx="547.89734"
|
||||
cy="-35.617531"
|
||||
r="35.6175" /></g></svg>
|
After Width: | Height: | Size: 3.6 KiB |
2370
assets/player.svg
Normal file
2370
assets/player.svg
Normal file
File diff suppressed because it is too large
Load diff
After Width: | Height: | Size: 111 KiB |
62
js/index.js
62
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();
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue