diff --git a/html/images/space.svg b/html/images/space.svg index 02ae9cf..63725ed 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -21,7 +21,7 @@ } rect#bg { - fill: black; + fill: gray; } .ship circle { @@ -69,7 +69,7 @@ - + @@ -80,7 +80,7 @@ - + @@ -147,9 +147,9 @@ let position; // meters let velocity; // meters per second let acceleration; // meters per second per second + let rotate = 0; let friction = 0; - let rotate = 0; let rotationSpeed = 0.25; let started = false; let restart = false; @@ -181,10 +181,37 @@ return wall.classList.contains("inverse") ? cs.reverse() : cs; }); + const edgeszz = [...walls].map(wall => { + const es = wall.getAttribute('points').split(' ').map((coords, i, arr) => { + const [x, y] = coords.split(','); + // return [+x, +y]; + // const [xb, yb] = arr[i]++; + const [xb, yb] = arr[(i + 1) % arr.length].split(','); + console.log("coords", { xa: +x, ya: +y, xb: +xb, yb: +yb, inverse: wall.classList.contains("inverse") }); + + // return `${+x},${+y} ${+xb},${+yb}`; + return { + xa: +x, + ya: +y, + xb: +xb, + yb: +yb, + }; + }); + + // return wall.classList.contains("inverse") ? cs.reverse() : cs; + return { node: wall, edges: es }; + }); + + + console.log("edgeszz", edgeszz); + // console.log("wall corners", allWallCorners); + const allEdgePts = allWallCorners.map(w => w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]]) ); + console.log("all edge points", allEdgePts); + let allStartingEdges; init(allEdgePts); @@ -264,6 +291,14 @@ }, []); } + function getCollisionEdges(walls, [xc, yc]) { + return walls.reduce((acc, wall) => { + return [...acc, ...wall.edges.filter(({ xa, ya, xb, yb }) => { + return [isClockwise, isAcute].every(c => c([xa, ya], [xb, yb], [xc, yc])); + }).map(e => { return { edge: e, node: wall }; })]; + }, []); + } + function updateTriangles([positionX, positionY]) { const delim = ' '; const className = 'clockwise-orientation'; @@ -371,7 +406,14 @@ }); } - function detectEdgeCollision([xc, yc], edge) { + function slope(edge) { + const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n)); + return (yb - ya) / (xb - xa); + } + + // i need to know which edge + function detectEdgeCollision([xc, yc], edge, edgee) { + // console.log("edge", edge, "edgee", edgee); const shipRadius = 5; const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n)); @@ -395,11 +437,43 @@ return shipBody.isPointInFill(cornerPt); } - function detectCollisions(position, walls, edges) { - return [ - [walls, wall => wall.some(corner => detectCornerCollision(position, corner))], - [edges, edge => detectEdgeCollision(position, edge)] - ].some(([t, f]) => t.some(f)) + function detectCollisions(position, walls, edges, z) { + // console.log("edges to test for collision", edgesToCheck); + console.log("walls", walls); + // this returns the wall with the corner, no the corner + let actualCorner; + const corner = walls.find(wall => { + // console.log("checking corners on wall", wall); + const c = wall.find(corner => detectCornerCollision(position, corner)); + // console.log("corner", c); + actualCorner = c; + // console.log("c", c); + return c; + }); + + // console.log("actual corner", actualCorner); + // if (corner) console.log("corner collision", corner); + + const edge = z.find(({ edge: e, node: ee }) => { + const str = `${e.xa},${e.ya} ${e.xb},${e.yb}`; + return detectEdgeCollision(position, str, e); + } + ); + + console.log("collision detected", "edge", edge, "corner", actualCorner); + + // if (found) console.log("found", found.node, found.node.node.classList.contains("inverse")); + + // return [ + // [walls, wall => wall.some(corner => detectCornerCollision(position, corner))], + // [edges, edge => { + // const coll = detectEdgeCollision(position, edge); + // if (coll) console.log(edge, slope(edge) == -0); + // return coll; + // }] + // ].some(([t, f]) => t.some(f)) + + return edge || actualCorner; } function updateShip(elapsed) { @@ -454,6 +528,10 @@ }); } + function isLandable(edge) { + return true; + } + function init(edgePts) { started = false; position = [0, 0]; // meters @@ -466,7 +544,7 @@ allStartingEdges = findAllEdges(edgePts, position); ship.style.transform = ""; walls.forEach(w => w.setAttribute('fill', 'black')); - bg.style.fill = 'black'; + // bg.style.fill = 'black'; time.innerText = "0"; } @@ -503,13 +581,21 @@ updateEdges(position); if (drawCollisionLines) updateTriangles(position); - const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position)); + const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position)); + + console.log("collision", collision && collision.hasOwnProperty("edge")); + // console.log("landable?", isLandable(collision)); if (collision) { - started = false; - isReadingKeys = false; - walls.forEach(w => w.setAttribute('fill', 'red')); - bg.style.fill = 'red'; + if (collision.hasOwnProperty("edge") && isLandable(collision)) { + // stop velocity in all directions + velocity = [0, 0]; + } else { + started = false; + isReadingKeys = false; + walls.forEach(w => w.setAttribute('fill', 'red')); + bg.style.fill = 'red'; + } } if (restart) {