diff --git a/html/images/space.svg b/html/images/space.svg
index fc595c9..0071be3 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -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);
- // });
//]]>