From d732fe0bf12e5737a64cd664896b471eba74df0c Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Thu, 25 Dec 2025 10:01:48 -0800 Subject: [PATCH] WIP: landing --- html/images/space.svg | 128 ++++++++++++++++++++++++++---------------- 1 file changed, 79 insertions(+), 49 deletions(-) diff --git a/html/images/space.svg b/html/images/space.svg index 63725ed..d57e1fa 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -149,6 +149,15 @@ let acceleration; // meters per second per second let rotate = 0; + const s = { + position: { x: 0, y: 0 }, + velocity: { x: 0, y: 0 }, + acceleration: { x: 0, y: 0 }, + rotate: 0, + collision: null, + node: null + }; + let friction = 0; let rotationSpeed = 0.25; let started = false; @@ -161,6 +170,7 @@ const time = document.querySelector("#time"); const debug = document.querySelector("#debug"); const ship = document.querySelector(".ship"); + s.node = ship; const gun = ship.querySelector('#cannon'); const shipBody = ship.querySelector("#body"); // const walls = document.querySelectorAll('.wall:not(.inverse)'); @@ -187,7 +197,7 @@ // 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") }); + // console.log("coords", { xa: +x, ya: +y, xb: +xb, yb: +yb, inverse: wall.classList.contains("inverse") }); // return `${+x},${+y} ${+xb},${+yb}`; return { @@ -203,14 +213,14 @@ }); - console.log("edgeszz", edgeszz); + // 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); + // console.log("all edge points", allEdgePts); let allStartingEdges; init(allEdgePts); @@ -406,11 +416,16 @@ }); } - function slope(edge) { - const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n)); + function slope({ xa, ya, xb, yb }) { + // const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n)); return (yb - ya) / (xb - xa); } + function isLandable(edge) { + console.log("edge", edge, "slope", slope(edge)); + return Object.is(slope(edge), +0); + } + // i need to know which edge function detectEdgeCollision([xc, yc], edge, edgee) { // console.log("edge", edge, "edgee", edgee); @@ -439,7 +454,7 @@ function detectCollisions(position, walls, edges, z) { // console.log("edges to test for collision", edgesToCheck); - console.log("walls", walls); + // console.log("walls", walls); // this returns the wall with the corner, no the corner let actualCorner; const corner = walls.find(wall => { @@ -460,7 +475,6 @@ } ); - console.log("collision detected", "edge", edge, "corner", actualCorner); // if (found) console.log("found", found.node, found.node.node.classList.contains("inverse")); @@ -476,37 +490,60 @@ return edge || actualCorner; } - function updateShip(elapsed) { + function updateShip(s, elapsed) { const degrees = getRotate(gun); if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`; else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`; - let [velocityX, velocityY] = restart ? [0, 0] : velocity; - let [accelerationX, accelerationY] = restart ? [0, 0] : acceleration; + // let [velocityX, velocityY] = restart ? [0, 0] : velocity; + let { x: velocityX, y: velocityY } = s.velocity; + // let [accelerationX, accelerationY] = restart ? [0, 0] : acceleration; + let { x: accelerationX, y: accelerationY } = s.acceleration; - if (velocityX > 0) accelerationX += -friction; - else if (velocityX < 0) accelerationX += friction; - - if (velocityY > 0) accelerationY += -friction; - else if (velocityY < 0) accelerationY += friction; + // if (velocityX > 0) accelerationX += -friction; + // else if (velocityX < 0) accelerationX += friction; + // + // if (velocityY > 0) accelerationY += -friction; + // else if (velocityY < 0) accelerationY += friction; velocityX = velocityX > 0 && velocityX + accelerationX < 0 ? 0 : velocityX + accelerationX; velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY; - velocity = [velocityX, velocityY]; - if (velocity[0] > maxSpeed) velocity[0] = maxSpeed; - else if (velocity[0] < -maxSpeed) velocity[0] = -maxSpeed - - if (velocity[1] > maxSpeed) velocity[1] = maxSpeed; - else if (velocity[1] < -maxSpeed) velocity[1] = -maxSpeed + s.velocity = { x: velocityX, y: velocityY }; + // if (velocity[0] > maxSpeed) velocity[0] = maxSpeed; + // else if (velocity[0] < -maxSpeed) velocity[0] = -maxSpeed + // + // if (velocity[1] > maxSpeed) velocity[1] = maxSpeed; + // else if (velocity[1] < -maxSpeed) velocity[1] = -maxSpeed const changeX = 0.001 * elapsed * velocityX; const changeY = 0.001 * elapsed * velocityY; - let [x, y] = getTranslate(ship); + let { x, y } = s.position; let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y); - ship.style.transform = `translate(${positionX}px, ${positionY}px)`; - return position; + s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position)); + + if (s.collision && !isLandable(s.collision.edge)) { + // console.log("collision detected", s.collision, "slope", Object.is(slope(s.collision.edge), +0)); + // console.log("isLandable()", isLandable(s.collision.edge)); + s.velocity = { x: 0, y: 0 }; + // s.position = { x: 0, y: 0 } + // s.node.style.transform = `translate(${0}px, ${0}px)`; + // s.position = { x: positionX, y: positionY } + + console.log("ship", s); + } else if (s.collision) { + console.log("ship landed", s); + s.velocity = { x: 0, y: 0 }; + + s.collision = null; + s.position = { x: positionX, y: positionY } + // ship.style.transform = `translate(${positionX}px, ${positionY}px)`; + s.node.style.transform = `translate(${positionX}px, ${positionY}px)`; + } else { + s.position = { x: positionX, y: positionY } + s.node.style.transform = `translate(${positionX}px, ${positionY}px)`; + } } function updateEdges(position) { @@ -528,10 +565,6 @@ }); } - function isLandable(edge) { - return true; - } - function init(edgePts) { started = false; position = [0, 0]; // meters @@ -576,26 +609,23 @@ frameCount++; } - position = updateShip(elapsed); + // position = updateShip(s, elapsed); + updateShip(s, elapsed); updateBullets(elapsed); updateEdges(position); if (drawCollisionLines) updateTriangles(position); - const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position)); + // const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position)); - console.log("collision", collision && collision.hasOwnProperty("edge")); + // console.log("collision", collision && collision.hasOwnProperty("edge")); // console.log("landable?", isLandable(collision)); - if (collision) { - 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'; - } + console.log("collision", s.collision); + if (s.collision) { + started = false; + isReadingKeys = false; + walls.forEach(w => w.setAttribute('fill', 'red')); + // bg.style.fill = 'red'; } if (restart) { @@ -646,28 +676,28 @@ case "ArrowUp": if (!upPressed) { upPressed = true; - acceleration[1] += -force; + s.acceleration.y += -force; } break; case "KeyS": case "ArrowDown": if (!downPressed) { downPressed = true; - acceleration[1] += force; + s.acceleration.y += force; } break; case "KeyA": case "ArrowLeft": if (!leftPressed) { leftPressed = true; - acceleration[0] += -force; + s.acceleration.x += -force; } break; case "KeyD": case "ArrowRight": if (!rightPressed) { rightPressed = true; - acceleration[0] += force; + s.acceleration.x += force; } break; case "KeyQ": @@ -700,28 +730,28 @@ case "ArrowUp": if (upPressed) { upPressed = false; - acceleration[1] -= -force; + s.acceleration.y -= -force; } break; case "KeyS": case "ArrowDown": if (downPressed) { downPressed = false; - acceleration[1] -= force; + s.acceleration.y -= force; } break; case "KeyA": case "ArrowLeft": if (leftPressed) { leftPressed = false; - acceleration[0] -= -force; + s.acceleration.x -= -force; } break; case "KeyD": case "ArrowRight": if (rightPressed) { rightPressed = false; - acceleration[0] -= force; + s.acceleration.x -= force; } break; case "KeyQ":