diff --git a/html/images/space.svg b/html/images/space.svg index 203c940..a90fe49 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -258,45 +258,42 @@ const acclIndic = document.querySelector('#acceleration-indicator'); const bulletPt = svg.createSVGPoint(); const cornerPt = svg.createSVGPoint(); -const allWallCorners = [...wallElements].map(wall => { - const cs = wall.getAttribute('points').split(' ').map(coords => { - const [x, y] = coords.split(','); - return [+x, +y]; - }); +const map = (function(els) { + let corners, edges; - return wall.classList.contains("inverse") ? cs.reverse() : cs; -}); + return { + walls: [...els].map(node => { + const corners = node.getAttribute('points').split(' ').map(coords => { + const [x, y] = coords.split(','); + const pt = svg.createSVGPoint(); + pt.x = +x; + pt.y = +y; + return pt; + }); -const mapWalls = [...wallElements].map(node => { - const corners = node.getAttribute('points').split(' ').map(coords => { - const [x, y] = coords.split(','); - const pt = svg.createSVGPoint(); - pt.x = +x; - pt.y = +y; - return pt; - }); + const edges = corners.map(({ x: xa, y: ya }, i, arr) => { + const { x: xb, y: yb } = arr[(i + 1) % arr.length]; + return { xa: xa, ya: ya, xb: xb, yb: yb }; + }); - const edges = corners.map(({ x: xa, y: ya }, i, arr) => { - const { x: xb, y: yb } = arr[(i + 1) % arr.length]; - return { xa: xa, ya: ya, xb: xb, yb: yb }; - }); + return { node, corners, edges }; + }), - return { node, corners, edges }; -}); + get corners() { + if (corners) return corners; -const mapCorners = mapWalls.reduce( - (acc, wall) => [...acc, ...wall.corners.map(c => ({ corner: c, wall: wall }))], - [] -); + return this.walls.reduce((acc, wall) => + [...acc, ...wall.corners.map(c => ({ corner: c, wall: wall }))], []); + }, -const mapEdges = mapWalls.reduce( - (acc, wall) => [...acc, ...wall.edges.map(e => ({ edge: e, wall: wall }))], - [] -); + get edges() { + if (edges) return edges; -console.log("walls on map", mapWalls); -console.log("corners on map", mapCorners); -console.log("edges on map", mapEdges); + return this.walls.reduce((acc, wall) => + [...acc, ...wall.edges.map(e => ({ edge: e, wall: wall }))], []); + } + }; +})(wallElements); let allStartingEdges; init(); @@ -305,27 +302,6 @@ function distance(x1, y1, x2, y2) { return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); } -function drawAllEdges(walls) { - walls.forEach(edges => drawEdges(edges)); -} - -function drawEdges(pts) { - let edges = pts.map(e => e.join(' ')); - - edges.forEach(e => { - const [x, y] = e.split(' '); - const [x1, y1] = x.split(','); - const [x2, y2] = y.split(','); - const el = document.createElementNS(namespaceURIsvg, 'line'); - - el.setAttribute('x1', x1); - el.setAttribute('y1', y1); - el.setAttribute('x2', x2); - el.setAttribute('y2', y2); - edgeContainer.appendChild(el) - }); -} - function drawTriangles(container, walls, [positionX, positionY]) { walls.forEach(pts => pts.forEach(([[x1, y1], [x2, y2]]) => { @@ -566,7 +542,8 @@ function slope({ xa, ya, xb, yb }) { function isLandable(edge) { // console.log("edge", edge, "slope", slope(edge)); - return Object.is(slope(edge), +0); + return edge.xa < edge.xb && edge.ya === edge.yb; + // return Object.is(slope(edge), +0); } function detectEdgeCollision([xc, yc], [x, y], radius) { @@ -594,15 +571,15 @@ function detectEdgeCollision([xc, yc], [x, y], radius) { const roundedT = +t.toFixed(2); const roundedS = +s.toFixed(2); - if (roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1) { - const xs = (x1 + s * (x2 - x1)); - const ys = (y1 + s * (y2 - y1)); - const xt = (x3 + t * (x4 - x3)); - const yt = (y3 + t * (y4 - y3)); - const collisionPt = [xs, ys]; - // [xs, ys] === [xt, yt]; - drawCircle(...collisionPt, "red"); // collision position - } + // if (roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1) { + // const xs = (x1 + s * (x2 - x1)); + // const ys = (y1 + s * (y2 - y1)); + // const xt = (x3 + t * (x4 - x3)); + // const yt = (y3 + t * (y4 - y3)); + // const collisionPt = [xs, ys]; + // // [xs, ys] === [xt, yt]; + // drawCircle(...collisionPt, "red"); // collision position + // } return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1; }; @@ -647,7 +624,7 @@ function detectCornerCollision([xc, yc], [x, y], radius) { }; } -function detectCollision(currentPos, intendedPos, velocity, radius, edges, corners) { +function detectCollision(currentPos, intendedPos, velocity, radius, { edges, corners }) { const { x: xc, y: yc } = intendedPos; const [x, y] = currentPos; // edges oriented clockwise with ship @@ -763,7 +740,7 @@ function updateShip(s, elapsed) { const p = { x: pDelta.x + px, y: pDelta.y + py }; current = s.collision; - s.collision = detectCollision([px, py], p, s.velocity, shipRadius, mapEdges, mapCorners); + s.collision = detectCollision([px, py], p, s.velocity, shipRadius, map); if (s.collision) console.log("COLLISION", s.collision); legs.style.display = s.gearDown ? "initial" : "none";