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

128
html/images/space.svg
View File

@@ -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":
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 25 KiB