block place / break test (WIP)
This commit is contained in:
parent
1afdddc882
commit
95adfdabdf
4 changed files with 227 additions and 14 deletions
39
assets/ground5.svg
Normal file
39
assets/ground5.svg
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<?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="ground5.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="338.28498"
|
||||||
|
inkscape:cy="1062.1014"
|
||||||
|
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)" /></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
128
assets/ground6.svg
Normal file
128
assets/ground6.svg
Normal file
|
|
@ -0,0 +1,128 @@
|
||||||
|
<?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="ground6.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.7571"
|
||||||
|
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:#6d4b30;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
|
||||||
|
id="g2"><rect
|
||||||
|
style="opacity:1;fill:#302116;fill-opacity:1;stroke:none;stroke-width:9.86287;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect1"
|
||||||
|
width="97.288925"
|
||||||
|
height="459.35626"
|
||||||
|
x="319.17694"
|
||||||
|
y="-808.65692"
|
||||||
|
rx="34.709881"
|
||||||
|
ry="34.709881"
|
||||||
|
transform="rotate(45)" /><rect
|
||||||
|
style="opacity:1;fill:#302116;fill-opacity:1;stroke:none;stroke-width:9.86287;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect2"
|
||||||
|
width="97.288925"
|
||||||
|
height="459.35626"
|
||||||
|
x="-627.62323"
|
||||||
|
y="138.14326"
|
||||||
|
rx="34.709881"
|
||||||
|
ry="34.709881"
|
||||||
|
transform="matrix(-0.70710678,0.70710678,0.70710678,0.70710678,0,0)" /></g><g
|
||||||
|
id="g4"
|
||||||
|
transform="rotate(45,669.48883,-149.31081)"><rect
|
||||||
|
style="opacity:1;fill:#302116;fill-opacity:1;stroke:none;stroke-width:9.86287;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect3"
|
||||||
|
width="97.288925"
|
||||||
|
height="459.35626"
|
||||||
|
x="319.17694"
|
||||||
|
y="-808.65692"
|
||||||
|
rx="34.709881"
|
||||||
|
ry="34.709881"
|
||||||
|
transform="rotate(45)" /><rect
|
||||||
|
style="opacity:1;fill:#302116;fill-opacity:1;stroke:none;stroke-width:9.86287;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4"
|
||||||
|
width="97.288925"
|
||||||
|
height="459.35626"
|
||||||
|
x="-627.62323"
|
||||||
|
y="138.14326"
|
||||||
|
rx="34.709881"
|
||||||
|
ry="34.709881"
|
||||||
|
transform="matrix(-0.70710678,0.70710678,0.70710678,0.70710678,0,0)" /></g><g
|
||||||
|
id="g13"
|
||||||
|
transform="rotate(22.5,669.48884,-149.31082)"
|
||||||
|
style="opacity:0.5"><g
|
||||||
|
id="g10"><rect
|
||||||
|
style="opacity:1;fill:#302116;fill-opacity:1;stroke:none;stroke-width:9.86287;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect9"
|
||||||
|
width="97.288925"
|
||||||
|
height="459.35626"
|
||||||
|
x="319.17694"
|
||||||
|
y="-808.65692"
|
||||||
|
rx="34.709881"
|
||||||
|
ry="34.709881"
|
||||||
|
transform="rotate(45)" /><rect
|
||||||
|
style="opacity:1;fill:#302116;fill-opacity:1;stroke:none;stroke-width:9.86287;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect10"
|
||||||
|
width="97.288925"
|
||||||
|
height="459.35626"
|
||||||
|
x="-627.62323"
|
||||||
|
y="138.14326"
|
||||||
|
rx="34.709881"
|
||||||
|
ry="34.709881"
|
||||||
|
transform="matrix(-0.70710678,0.70710678,0.70710678,0.70710678,0,0)" /></g><g
|
||||||
|
id="g12"
|
||||||
|
transform="rotate(45,669.48883,-149.31081)"><rect
|
||||||
|
style="opacity:1;fill:#302116;fill-opacity:1;stroke:none;stroke-width:9.86287;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect11"
|
||||||
|
width="97.288925"
|
||||||
|
height="459.35626"
|
||||||
|
x="319.17694"
|
||||||
|
y="-808.65692"
|
||||||
|
rx="34.709881"
|
||||||
|
ry="34.709881"
|
||||||
|
transform="rotate(45)" /><rect
|
||||||
|
style="opacity:1;fill:#302116;fill-opacity:1;stroke:none;stroke-width:9.86287;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect12"
|
||||||
|
width="97.288925"
|
||||||
|
height="459.35626"
|
||||||
|
x="-627.62323"
|
||||||
|
y="138.14326"
|
||||||
|
rx="34.709881"
|
||||||
|
ry="34.709881"
|
||||||
|
transform="matrix(-0.70710678,0.70710678,0.70710678,0.70710678,0,0)" /></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 5.1 KiB |
42
js/index.js
42
js/index.js
|
|
@ -1,12 +1,15 @@
|
||||||
//const width = 2048;
|
//const width = 2048;
|
||||||
//const height = 2048;
|
//const height = 2048;
|
||||||
const tileSize = 128;
|
const tileSize = 128;
|
||||||
|
// todo: make names better
|
||||||
const assets = [
|
const assets = [
|
||||||
'assets/ground1.svg',
|
'assets/ground1.svg',
|
||||||
'assets/ground2.svg',
|
'assets/ground2.svg',
|
||||||
'assets/player.svg',
|
'assets/player.svg',
|
||||||
'assets/ground3.svg',
|
'assets/ground3.svg',
|
||||||
'assets/ground4.svg',
|
'assets/ground4.svg',
|
||||||
|
'assets/ground5.svg',
|
||||||
|
'assets/ground6.svg'
|
||||||
];
|
];
|
||||||
|
|
||||||
function getRGBA(data, i) {
|
function getRGBA(data, i) {
|
||||||
|
|
@ -46,6 +49,15 @@ function toPoint(x2, y2, base, fac, exp, inSize) {
|
||||||
return isMask;
|
return isMask;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getChunk(x, y) {
|
||||||
|
let cx = Math.floor(x / 16);
|
||||||
|
let cy = Math.floor(y / 16);
|
||||||
|
|
||||||
|
let id = cx + ',' + cy;
|
||||||
|
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
|
||||||
function Game(inSize, exp, cs) {
|
function Game(inSize, exp, cs) {
|
||||||
this.exp = exp;
|
this.exp = exp;
|
||||||
this.assets = [];
|
this.assets = [];
|
||||||
|
|
@ -57,9 +69,27 @@ function Game(inSize, exp, cs) {
|
||||||
this.frames = 0;
|
this.frames = 0;
|
||||||
this.camera = [0, 0];
|
this.camera = [0, 0];
|
||||||
|
|
||||||
|
this.modChunks = {};
|
||||||
|
|
||||||
this.dead = false;
|
this.dead = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Game.prototype.placeBlock = function (block) {
|
||||||
|
let {camera} = this;
|
||||||
|
|
||||||
|
let x = Math.round(camera[0] / tileSize);
|
||||||
|
let y = Math.round(camera[1] / tileSize);
|
||||||
|
|
||||||
|
let bx = x % 16;
|
||||||
|
let by = y % 16;
|
||||||
|
|
||||||
|
let id = getChunk(x, y);
|
||||||
|
|
||||||
|
let chunk = this.modChunks[id] = this.modChunks[id] || new Uint8Array(16 * 16);
|
||||||
|
|
||||||
|
chunk[by * 16 + bx] = block + 1;
|
||||||
|
}
|
||||||
|
|
||||||
Game.prototype.player = function () {
|
Game.prototype.player = function () {
|
||||||
let { ctx, fac, base, exp, inSize, camera, cs, assets } = this;
|
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);
|
ctx.drawImage(assets[2], cs / 2 - tileSize / 1.8, cs / 2 - tileSize / 1.8, tileSize / 0.9, tileSize / 0.9);
|
||||||
|
|
@ -109,6 +139,18 @@ Game.prototype.main = function () {
|
||||||
let x2 = x - camera[0] + cs / 2;
|
let x2 = x - camera[0] + cs / 2;
|
||||||
let y2 = y - camera[1] + cs / 2;
|
let y2 = y - camera[1] + cs / 2;
|
||||||
|
|
||||||
|
let id = getChunk(x / tileSize, y / tileSize);
|
||||||
|
|
||||||
|
let chunk = this.modChunks[id];
|
||||||
|
|
||||||
|
let bx = Math.round(x / tileSize) % 16;
|
||||||
|
let by = Math.round(y / tileSize)% 16;
|
||||||
|
|
||||||
|
if (chunk && chunk[by * 16 + bx] != 0) {
|
||||||
|
ctx.drawImage(this.assets[chunk[by * 16 + bx] - 1], x2, y2, tileSize, tileSize);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
let isMask = toPoint(x, y, base, this.fac, exp, inSize);
|
let isMask = toPoint(x, y, base, this.fac, exp, inSize);
|
||||||
if (x < 0 || y < 0) {
|
if (x < 0 || y < 0) {
|
||||||
continue;
|
continue;
|
||||||
|
|
|
||||||
10
js/motion.js
10
js/motion.js
|
|
@ -4,7 +4,11 @@ let vel = [0, 0];
|
||||||
let id = '';
|
let id = '';
|
||||||
|
|
||||||
function down(e) {
|
function down(e) {
|
||||||
keys[e.key.toLowerCase()] = true;
|
let k = e.key.toLowerCase();
|
||||||
|
keys[k] = true;
|
||||||
|
|
||||||
|
if (k == 'r') game.placeBlock(6);
|
||||||
|
if (k == 'f') game.placeBlock(5);
|
||||||
};
|
};
|
||||||
|
|
||||||
function up(e) {
|
function up(e) {
|
||||||
|
|
@ -13,8 +17,8 @@ function up(e) {
|
||||||
|
|
||||||
function move() {
|
function move() {
|
||||||
var isShift = keys['q'];
|
var isShift = keys['q'];
|
||||||
vel[0] += ((keys['a'] ? 1 : 0) - (keys['d'] ? 1 : 0)) * (isShift ? 5 : 1);
|
vel[0] += ((keys['a'] ? 1 : 0) - (keys['d'] ? 1 : 0)) * (isShift ? 2.3 : 1);
|
||||||
vel[1] += ((keys['w'] ? 1 : 0) - (keys['s'] ? 1 : 0)) * (isShift ? 5 : 1);
|
vel[1] += ((keys['w'] ? 1 : 0) - (keys['s'] ? 1 : 0)) * (isShift ? 2.3 : 1);
|
||||||
|
|
||||||
vel[0] *= 0.8;
|
vel[0] *= 0.8;
|
||||||
vel[1] *= 0.8;
|
vel[1] *= 0.8;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue