ccm/miti.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: landing

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-12-25 10:01:48 -08:00
parent 63e9c45490
commit d732fe0bf1
1 changed files with 79 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
html/images/space.svg
View File

@@ -149,6 +149,15 @@
let acceleration; // meters per second per second let acceleration; // meters per second per second
let rotate = 0; 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 friction = 0;
let rotationSpeed = 0.25; let rotationSpeed = 0.25;
let started = false; let started = false;
@@ -161,6 +170,7 @@
const time = document.querySelector("#time"); const time = document.querySelector("#time");
const debug = document.querySelector("#debug"); const debug = document.querySelector("#debug");
const ship = document.querySelector(".ship"); const ship = document.querySelector(".ship");
s.node = ship;
const gun = ship.querySelector('#cannon'); const gun = ship.querySelector('#cannon');
const shipBody = ship.querySelector("#body"); const shipBody = ship.querySelector("#body");
// const walls = document.querySelectorAll('.wall:not(.inverse)'); // const walls = document.querySelectorAll('.wall:not(.inverse)');
@@ -187,7 +197,7 @@
// return [+x, +y]; // return [+x, +y];
// const [xb, yb] = arr[i]++; // const [xb, yb] = arr[i]++;
const [xb, yb] = arr[(i + 1) % arr.length].split(','); 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 `${+x},${+y} ${+xb},${+yb}`;
return { return {
@@ -203,14 +213,14 @@
}); });
console.log("edgeszz", edgeszz); // console.log("edgeszz", edgeszz);
// console.log("wall corners", allWallCorners); // console.log("wall corners", allWallCorners);
const allEdgePts = allWallCorners.map(w => const allEdgePts = allWallCorners.map(w =>
w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]]) 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; let allStartingEdges;
init(allEdgePts); init(allEdgePts);
@@ -406,11 +416,16 @@
}); });
} }
function slope(edge) { function slope({ xa, ya, xb, yb }) {
const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n)); // const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n));
return (yb - ya) / (xb - xa); 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 // i need to know which edge
function detectEdgeCollision([xc, yc], edge, edgee) { function detectEdgeCollision([xc, yc], edge, edgee) {
// console.log("edge", edge, "edgee", edgee); // console.log("edge", edge, "edgee", edgee);
@@ -439,7 +454,7 @@
function detectCollisions(position, walls, edges, z) { function detectCollisions(position, walls, edges, z) {
// console.log("edges to test for collision", edgesToCheck); // 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 // this returns the wall with the corner, no the corner
let actualCorner; let actualCorner;
const corner = walls.find(wall => { 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")); // if (found) console.log("found", found.node, found.node.node.classList.contains("inverse"));
@@ -476,37 +490,60 @@
return edge || actualCorner; return edge || actualCorner;
} }
function updateShip(elapsed) { function updateShip(s, elapsed) {
const degrees = getRotate(gun); const degrees = getRotate(gun);
if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`; 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)`; else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;
let [velocityX, velocityY] = restart ? [0, 0] : velocity; // let [velocityX, velocityY] = restart ? [0, 0] : velocity;
let [accelerationX, accelerationY] = restart ? [0, 0] : acceleration; 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; // if (velocityX > 0) accelerationX += -friction;
else if (velocityX < 0) accelerationX += friction; // else if (velocityX < 0) accelerationX += friction;
//
if (velocityY > 0) accelerationY += -friction; // if (velocityY > 0) accelerationY += -friction;
else if (velocityY < 0) accelerationY += friction; // else if (velocityY < 0) accelerationY += friction;
velocityX = velocityX > 0 && velocityX + accelerationX < 0 ? 0 : velocityX + accelerationX; velocityX = velocityX > 0 && velocityX + accelerationX < 0 ? 0 : velocityX + accelerationX;
velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY; velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY;
velocity = [velocityX, velocityY];
if (velocity[0] > maxSpeed) velocity[0] = maxSpeed; s.velocity = { x: velocityX, y: velocityY };
else if (velocity[0] < -maxSpeed) velocity[0] = -maxSpeed // 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 // if (velocity[1] > maxSpeed) velocity[1] = maxSpeed;
// else if (velocity[1] < -maxSpeed) velocity[1] = -maxSpeed
const changeX = 0.001 * elapsed * velocityX; const changeX = 0.001 * elapsed * velocityX;
const changeY = 0.001 * elapsed * velocityY; 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); let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
ship.style.transform = `translate(${positionX}px, ${positionY}px)`; s.collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position), getCollisionEdges(edgeszz, position));
return 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) { function updateEdges(position) {
@@ -528,10 +565,6 @@
}); });
} }
function isLandable(edge) {
return true;
}
function init(edgePts) { function init(edgePts) {
started = false; started = false;
position = [0, 0]; // meters position = [0, 0]; // meters
@@ -576,26 +609,23 @@
frameCount++; frameCount++;
} }
position = updateShip(elapsed); // position = updateShip(s, elapsed);
updateShip(s, elapsed);
updateBullets(elapsed); updateBullets(elapsed);
updateEdges(position); updateEdges(position);
if (drawCollisionLines) updateTriangles(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)); // console.log("landable?", isLandable(collision));
if (collision) { console.log("collision", s.collision);
if (collision.hasOwnProperty("edge") && isLandable(collision)) { if (s.collision) {
// stop velocity in all directions
velocity = [0, 0];
} else {
started = false; started = false;
isReadingKeys = false; isReadingKeys = false;
walls.forEach(w => w.setAttribute('fill', 'red')); walls.forEach(w => w.setAttribute('fill', 'red'));
bg.style.fill = 'red'; // bg.style.fill = 'red';
}
} }
if (restart) { if (restart) {
@@ -646,28 +676,28 @@
case "ArrowUp": case "ArrowUp":
if (!upPressed) { if (!upPressed) {
upPressed = true; upPressed = true;
acceleration[1] += -force; s.acceleration.y += -force;
} }
break; break;
case "KeyS": case "KeyS":
case "ArrowDown": case "ArrowDown":
if (!downPressed) { if (!downPressed) {
downPressed = true; downPressed = true;
acceleration[1] += force; s.acceleration.y += force;
} }
break; break;
case "KeyA": case "KeyA":
case "ArrowLeft": case "ArrowLeft":
if (!leftPressed) { if (!leftPressed) {
leftPressed = true; leftPressed = true;
acceleration[0] += -force; s.acceleration.x += -force;
} }
break; break;
case "KeyD": case "KeyD":
case "ArrowRight": case "ArrowRight":
if (!rightPressed) { if (!rightPressed) {
rightPressed = true; rightPressed = true;
acceleration[0] += force; s.acceleration.x += force;
} }
break; break;
case "KeyQ": case "KeyQ":
@@ -700,28 +730,28 @@
case "ArrowUp": case "ArrowUp":
if (upPressed) { if (upPressed) {
upPressed = false; upPressed = false;
acceleration[1] -= -force; s.acceleration.y -= -force;
} }
break; break;
case "KeyS": case "KeyS":
case "ArrowDown": case "ArrowDown":
if (downPressed) { if (downPressed) {
downPressed = false; downPressed = false;
acceleration[1] -= force; s.acceleration.y -= force;
} }
break; break;
case "KeyA": case "KeyA":
case "ArrowLeft": case "ArrowLeft":
if (leftPressed) { if (leftPressed) {
leftPressed = false; leftPressed = false;
acceleration[0] -= -force; s.acceleration.x -= -force;
} }
break; break;
case "KeyD": case "KeyD":
case "ArrowRight": case "ArrowRight":
if (rightPressed) { if (rightPressed) {
rightPressed = false; rightPressed = false;
acceleration[0] -= force; s.acceleration.x -= force;
} }
break; break;
case "KeyQ": case "KeyQ":
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 25 KiB