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

Clean up some code

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-12-20 08:25:02 -08:00
parent f9a191048a
commit 1f782f75aa
1 changed files with 19 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
html/images/space.svg
View File

@@ -112,6 +112,7 @@
const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
const regex = /(-?\d*\.{0,1}\d+)px/g;
const bullets = [];
const halfPi = Math.PI / 2;
let previous, zero, frameCount = 0;
let position = [0, 0]; // meters
@@ -146,6 +147,8 @@
const cornerPt = document.querySelector('svg').createSVGPoint();
const wall = document.querySelector('#wall');
const startingTrianglePts = ["-20,20 20,20", "20,20 20,-20", "20,-20 -10,-30"];
const points = wall.getAttribute('points').split(' ').map(coords => {
const [x, y] = coords.split(',');
return [+x, +y];
@@ -155,19 +158,15 @@
const lineContainer = document.querySelector('#lines');
const trianglePts = points.map((pt, i) => [pt, points[(i + 1) % points.length]]);
function drawEdges() {
const lpts = wall.getAttribute('points').split(' ');
let edges = lpts.map((pt, i) => [pt, lpts[(i + 1) % lpts.length]]).map(e => e.join(' '));
// console.log(edges);
function drawEdges(lpts) {
let edges = lpts.map(e => e.join(' '));
edges.forEach(e => {
const [x, y] = e.split(' ');
const [x1, y1] = x.split(',');
const [x2, y2] = y.split(',');
const el = document.createElementNS(namespaceURIsvg, 'line');
// const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
// const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
el.setAttribute('x1', x1);
el.setAttribute('y1', y1);
el.setAttribute('x2', x2);
@@ -175,9 +174,8 @@
lineContainer.appendChild(el)
});
}
// const edges = lpts.map((pt, i) => [pt.split(','), lpts[(i + 1) % lpts.length].split(',')]);
drawEdges();
drawEdges(trianglePts);
function drawTriangles(container, pts, [positionX, positionY]) {
pts.forEach(([[x1, y1], [x2, y2]]) => {
@@ -195,7 +193,6 @@
const delim = ' ';
const className = 'clockwise-orientation';
const visible = [];
const PI = Math.PI / 2;
triangles.forEach(t => {
const attr = t.getAttribute('points').split(delim);
@@ -219,10 +216,10 @@
const dc = distance(ax, ay, bx, by);
// https://en.wikipedia.org/wiki/Law_of_cosines
// Solve for angles α and β with inverse cosine (arccosine)
const α = Math.acos((db ** 2 + dc ** 2 - da ** 2) / (2 * db * dc));
const β = Math.acos((da ** 2 + dc ** 2 - db ** 2) / (2 * da * dc));
isAcute = α < PI && β < PI;
// Solve for angles alpha and beta with inverse cosine (arccosine)
const alpha = Math.acos((db ** 2 + dc ** 2 - da ** 2) / (2 * db * dc));
const beta = Math.acos((da ** 2 + dc ** 2 - db ** 2) / (2 * da * dc));
isAcute = alpha < halfPi && beta < halfPi;
}
if (pos !== attr.pop()) {
@@ -252,9 +249,9 @@
}
function fireBullet(x, y, velocity) {
const speed = 200; // meters per second
const degrees = getRotate(gun);
const radians = degrees * Math.PI / 180; // toFixed(15)?
const speed = 200; // meters per second
const vx = -Math.sin(radians);
const vy = Math.cos(radians);
const bulletTimeout = 5000; // miliseconds
@@ -317,26 +314,8 @@
});
}
function updateLines([positionX, positionY]) {
lines.forEach(line => {
line.setAttribute('x2', positionX);
line.setAttribute('y2', positionY);
// let slope = (+line.getAttribute('y2') - +line.getAttribute('y1')) / (+line.getAttribute('x2') - +line.getAttribute('x1'));
// slope = +slope.toFixed(15);
// console.log('slope', slope);
const firstP = line.getPointAtLength(1);
if (polygon.isPointInFill(firstP)) {
line.setAttribute('x2', line.getAttribute('x1'));
line.setAttribute('y2', line.getAttribute('y1'));
}
});
}
requestAnimationFrame(firstFrame);
let start;
let restart = false;
function firstFrame(timestamp) {
@@ -350,14 +329,13 @@
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}
const startingTrianglePts = ["-20,20 20,20", "20,20 20,-20", "20,-20 -10,-30"];
function animate(timestamp) {
const delta = timestamp - zero;
time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
// time.innerText = time.inner
const elapsed = timestamp - previous;
const delta = timestamp - zero;
let degrees = getRotate(gun);
previous = timestamp;
time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
if (delta >= 1000) {
fps.innerText = frameCount;
@@ -374,8 +352,6 @@
frameCount++;
}
let 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)`;
@@ -404,18 +380,17 @@
let [x, y] = getTranslate(hitbox);
let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
updateBullets(elapsed);
const visibleTriangles = updateTriangles(position);
const visibleTrianglePoints = [...visibleTriangles].map(p => p.getAttribute("points"));
const mappedEdges = visibleTrianglePoints.map(vt => {
vt = vt.split(' ');
vt.pop();
return vt.join(' ');
});
// console.log(mappedEdges);
[...lineContainer.children].forEach(l => {
const x1 = l.getAttribute('x1');
const y1 = l.getAttribute('y1');
@@ -427,16 +402,12 @@
}
});
if (restart) {
restart = false;
[...lineContainer.children].forEach(c => c.remove());;
drawEdges();
drawEdges(trianglePts);
}
// edges = [...edges.filter(e => !mappedEdges.includes(e))]
// console.log(edges)
// info.innerText = [...visibleTriangles].map(t => {
// const [[ax, ay], [bx, by], [shipx, shipy]] =
// t.getAttribute('points').split(' ').map(n => n.split(',').map(n => +n));
@@ -475,7 +446,6 @@
return shipBody.isPointInFill(cornerPt);
});
const PI = Math.PI / 2;
const shipRadius = 5;
const sideCollision = [...visibleTriangles].reduce((acc, t) => {
const [[ax, ay], [bx, by], [shipx, shipy]] =
@@ -488,7 +458,7 @@
const hc = (2 / dc) * Math.sqrt(s * (s - da) * (s - db) * (s - dc));
const alpha = Math.acos((db**2 + dc**2 - da**2) / (2 * db * dc));
const beta = Math.acos((da**2 + dc**2 - db**2) / (2 * da * dc));
const acute = alpha < PI && beta < PI;
const acute = alpha < halfPi && beta < halfPi;
return acute ? [...acc, hc] : acc;
}, []).some(h => h <= shipRadius);
@@ -500,8 +470,6 @@
// restart game
zeroForTimer = timestamp;
restart = true;
// position = [0, 0];
// acceleration = [0, 0];
}
// if (+y < 200)
@@ -623,59 +591,6 @@
break;
}
});
// leftTurnButton.addEventListener("mousedown", function (e) {
// acceleration[0] = -force;
// });
//
// leftTurnButton.addEventListener("mouseup", function (e) {
// acceleration[0] = 0;
// });
//
// rightTurnButton.addEventListener("mousedown", function (e) {
// acceleration[0] = force;
// });
//
// rightTurnButton.addEventListener("mouseup", function (e) {
// acceleration[0] = 0;
// });
//
// reverseMoveButton.addEventListener("mousedown", function (e) {
// acceleration[1] = -force;
// });
//
// reverseMoveButton.addEventListener("mouseup", function (e) {
// acceleration[1] = 0;
// });
//
// forwardMoveButton.addEventListener("mousedown", function (e) {
// acceleration[1] = force;
// });
//
// forwardMoveButton.addEventListener("mouseup", function (e) {
// acceleration[1] = 0;
// });
//
// rotateCWButton.addEventListener("mousedown", function (e) {
// rotate = 1;
// });
//
// rotateCWButton.addEventListener("mouseup", function (e) {
// rotate = 0;
// });
//
// rotateCCWButton.addEventListener("mousedown", function (e) {
// rotate = -1;
// });
//
// rotateCCWButton.addEventListener("mouseup", function (e) {
// rotate = 0;
// });
//
// fireButton.addEventListener("click", function (e) {
// const [x, y] = getTranslate(hitbox);
// fireBullet(x, y, velocity);
// });
//]]></script>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 18 KiB