diff --git a/html/images/space.svg b/html/images/space.svg
index fdcacac..4034ac5 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -91,13 +91,11 @@
-
-
-
-
-
-
+
+
+
+
@@ -107,13 +105,6 @@
0 fps
-
-
-
-
-
-
-
@@ -135,30 +126,19 @@
const maxSpeed = 100;
let started = false;
+ const svg = document.querySelector('svg');
const fps = document.querySelector("#fps");
const time = document.querySelector("#time");
const info = document.querySelector("#debug");
const ship = document.querySelector(".ship");
const gun = ship.querySelector('#cannon');
const shipBody = ship.querySelector("circle");
-
const hitbox = document.querySelector(".hitbox");
const bulletsContainer = document.querySelector("#bullets");
-
- const leftTurnButton = document.querySelector("#turn-left");
- const rightTurnButton = document.querySelector("#turn-right");
- const reverseMoveButton = document.querySelector("#move-backward");
- const forwardMoveButton = document.querySelector("#move-forward");
-
- const rotateCWButton = document.querySelector("#rotate-cw");
- const rotateCCWButton = document.querySelector("#rotate-ccw");
-
- const fireButton = document.querySelector("#fire");
- const pt = document.querySelector('svg').createSVGPoint();
- 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 pt = svg.createSVGPoint();
+ const cornerPt = svg.createSVGPoint();
const points = wall.getAttribute('points').split(' ').map(coords => {
const [x, y] = coords.split(',');
@@ -198,9 +178,39 @@
});
}
- drawTriangles(triangleContainer, trianglePts, [0, 0]);
+ drawTriangles(triangleContainer, trianglePts, position);
const triangles = triangleContainer.querySelectorAll('polygon');
+ // Triangle has a clockwise orientation
+ function isClockwise([xa, ya], [xb, yb], [xc, yc]) {
+ // https://en.wikipedia.org/wiki/Curve_orientation#Practical_considerations
+ // Determinant for a convex polygon
+ const det = (+xb - +xa) * (+yc - +ya) - (+xc - +xa) * (+yb - +ya);
+ return det < 0;
+ }
+
+ function isAcute([xa, ya], [xb, yb], [xc, yc]) {
+ const da = distance(xa, ya, xc, yc);
+ const db = distance(xb, yb, xc, yc);
+ const dc = distance(xa, ya, xb, yb);
+
+ // https://en.wikipedia.org/wiki/Law_of_cosines
+ // 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));
+ return alpha < halfPi && beta < halfPi;
+ }
+
+ function findEdges(verts, [xc, yc]) {
+ return verts.reduce((acc, [a, b]) => {
+ const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc]));
+ // return isFound ? [...acc, `${xa},${ya} ${xb},${yb}`] : acc;
+ return isFound ? [...acc, `${a[0]},${a[1]} ${b[0]},${b[1]}`] : acc;
+ }, []);
+ }
+
+ const collisionEdges = findEdges(trianglePts, position);
+
function updateTriangles([positionX, positionY]) {
const delim = ' ';
const className = 'clockwise-orientation';
@@ -455,7 +465,7 @@
const x2 = l.getAttribute('x2');
const y2 = l.getAttribute('y2');
const str = `${x1},${y1} ${x2},${y2}`;
- if (mappedEdges.includes(str) && (lineContainer.childElementCount < 4 || !startingTrianglePts.includes(str))) {
+ if (mappedEdges.includes(str) && (lineContainer.childElementCount < 4 || !collisionEdges.includes(str))) {
l.remove();
}
});