From ca9ceebd642a7f699d5b3b3fdd3ccaa1de401580 Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Sat, 10 Jan 2026 12:20:00 -0800 Subject: [PATCH] WIP: landing --- html/images/space.svg | 77 +++++++++++++++++++------------------------ 1 file changed, 34 insertions(+), 43 deletions(-) diff --git a/html/images/space.svg b/html/images/space.svg index fb20103..6e724ab 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -6,6 +6,7 @@ font-size: 4pt; font-family: courier; color: white; + display: none; } #info { @@ -81,7 +82,7 @@ } line#acceleration-indicator { - stroke: maroon; + stroke: none; /* stroke-width: 0.5px; */ } @@ -292,8 +293,8 @@ const map = (function(els) { let allStartingEdges; init(); -const b = map.edges.map(({ edge }) => getEdgeCollisionBoundary(edge, shipRadius)); -b.forEach(b => drawLine(b.xa, b.ya, b.xb, b.yb, "orange")); +// const b = map.edges.map(({ edge }) => getEdgeCollisionBoundary(edge, shipRadius)); +// b.forEach(b => drawLine(b.xa, b.ya, b.xb, b.yb, "orange")); function distance(x1, y1, x2, y2) { return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); @@ -554,20 +555,12 @@ function getEdgeCollisionBoundary(edge, dist) { return { xa: xa + riol, ya: ya - ruol, xb: xb + riol, yb: yb - ruol}; } -function detectEdgeCollision([xc, yc], [x, y], radius) { - return ({ edge, wall }) => { +function detectEdgeCollision([xc, yc], [x, y], radius, gearDown) { + return (collision) => { if (xc === x && yc === y) return; - - // const { xa, ya, xb, yb } = edge; - // const length = distance(xa, ya, xb, yb); - // const rise = yb - ya; - // const run = xb - xa; - // - // const riol = rise / length * radius; - // const ruol = run / length * radius; - // - // const edgeSeg = { xa: xa + riol, ya: ya - ruol, xb: xb + riol, yb: yb - ruol}; - const edgeSeg = getEdgeCollisionBoundary(edge, radius); + const { edge, wall } = collision; + const dist = edge.xa < edge.xb && edge.ya === edge.yb && gearDown ? radius + 1.5 : radius; + const edgeSeg = getEdgeCollisionBoundary(edge, dist); const positionSeg = { xa: x, ya: y, xb: xc, yb: yc }; const { xa: x1, ya: y1, xb: x2, yb: y2 } = positionSeg; @@ -580,17 +573,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)); + collision.position = { x: xs, y: ys }; - return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1; + return true; + } + // return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1; + return; }; } @@ -633,12 +624,12 @@ function detectCornerCollision([xc, yc], [x, y], radius) { }; } -function detectCollision(currentPos, intendedPos, velocity, radius, { edges, corners }) { +function detectCollision(currentPos, intendedPos, velocity, radius, { edges, corners }, gearDown) { const { x: xc, y: yc } = intendedPos; const [x, y] = currentPos; // edges oriented clockwise with ship const fwdEdges = getForwardEdges(edges, { x, y }) - const edgeColl = fwdEdges.find(detectEdgeCollision([xc, yc], [x, y], radius)); + const edgeColl = fwdEdges.find(detectEdgeCollision([xc, yc], [x, y], radius, gearDown)); if (edgeColl) return edgeColl; @@ -758,38 +749,38 @@ function updateShip(s, elapsed) { const p = { x: pDelta.x + px, y: pDelta.y + py }; current = s.collision; - const tempRadius = 10; + // const tempRadius = 7; - s.collision = detectCollision([px, py], p, s.velocity, tempRadius, map); + // s.collision = detectCollision([px, py], p, s.velocity, tempRadius, map); + s.collision = detectCollision([px, py], p, s.velocity, shipRadius, map, s.gearDown); if (s.collision) console.log("COLLISION", s.collision); legs.style.display = s.gearDown ? "initial" : "none"; if (!current && s.collision) { - // just check if ya and yb are == ?, but then how do you know if the - // edge is facing up or down? compare xs? - - // const baseSlope = slope(s.collision.edge); - // if (Object.is(baseSlope, 0) && s.gearDown) s.isLanded = true; - // s.isLanded = true; let posP; if (s.collision.corner) { posP = cornerContactPosition(p.x, p.y, px, py, s.collision.corner, shipRadius); } else if (s.collision.edge) { - posP = edgeContactPosition(p.x, p.y, px, py, s.collision.edge, tempRadius); + if (isLandable(s.collision.edge) && s.gearDown) s.isLanded = true; + + posP = s.collision.position; } s.velocity = { x: 0, y: 0 }; s.position = { x: posP.x, y: posP.y } s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`; } else if (current && s.collision) { - s.velocity = { x: 0, y: 0 }; - } else { - if (s.isLanded) { + if (s.isLanded && s.velocity.y < 0) { s.gearDown = false; s.isLanded = false; + s.position = { x: p.x, y: p.y }; + s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`; + s.collision = null; + } else { + s.velocity = { x: 0, y: 0 }; } - + } else { s.position = { x: p.x, y: p.y }; s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`; } @@ -867,9 +858,9 @@ function init() { const mult = 10; s.position = { x: 10, y: 10 }; - // s.velocity = { x: 0, y: 0 }; + s.velocity = { x: 0, y: 0 }; - s. velocity = { x: -5*mult, y: 7*mult }; + // s. velocity = { x: -5*mult, y: 7*mult }; s.acceleration = { x: 0, y: 0 }; s.rotate = 0;