diff --git a/html/images/space.svg b/html/images/space.svg
index d7ca187..a26616d 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -85,17 +85,20 @@
const regex = /(-?\d*\.{0,1}\d+)px/g;
const bullets = [];
const halfPi = Math.PI / 2;
+ const maxSpeed = 100;
+
+ const drawCollisionLines = true;
let previous, zero, frameCount = 0;
let position = [0, 0]; // meters
let velocity = [0, 0]; // meters per second
let acceleration = [0, 0]; // meters per second per second
- // let friction = 7.5;
let friction = 0;
let rotate = 0;
let rotationSpeed = 0.25;
- const maxSpeed = 100;
let started = false;
+ let restart = false;
+ let isReadingKeys = true;
const svg = document.querySelector('svg');
const fps = document.querySelector("#fps");
@@ -106,6 +109,8 @@
const shipBody = ship.querySelector("circle");
const bulletsContainer = document.querySelector("#bullets");
const wall = document.querySelector('#wall');
+ const triangleContainer = document.querySelector('#triangles');
+ const lineContainer = document.querySelector('#edges');
const bulletPt = svg.createSVGPoint();
const cornerPt = svg.createSVGPoint();
@@ -115,10 +120,8 @@
return [+x, +y];
});
- const triangleContainer = document.querySelector('#triangles');
- const lineContainer = document.querySelector('#edges');
- const edgePts = wallCorners.map((pt, i) => [pt, wallCorners[(i + 1) % wallCorners.length]]);
- const drawCollisionLines = true;
+ const edgePts = wallCorners.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]]);
+ const collisionEdges = findEdges(edgePts, position);
function distance(x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
@@ -141,8 +144,6 @@
});
}
- drawEdges(edgePts);
-
function drawTriangles(container, pts, [positionX, positionY]) {
pts.forEach(([[x1, y1], [x2, y2]]) => {
const el = document.createElementNS(namespaceURIsvg, 'polygon');
@@ -152,9 +153,6 @@
});
}
- drawTriangles(triangleContainer, edgePts, 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
@@ -183,12 +181,15 @@
}, []);
}
- const collisionEdges = findEdges(edgePts, position);
-
function updateTriangles([positionX, positionY]) {
const delim = ' ';
const className = 'clockwise-orientation';
+ if (!triangleContainer.childElementCount)
+ drawTriangles(triangleContainer, edgePts, position);
+
+ const triangles = triangleContainer.querySelectorAll('polygon');
+
triangles.forEach(t => {
const attr = t.getAttribute('points').split(delim);
const [a, b,] = attr.map(t => t.split(','));
@@ -368,8 +369,6 @@
});
}
- let start;
- let restart = false;
function firstFrame(timestamp) {
zero = timestamp;
zeroForTimer = timestamp;
@@ -377,8 +376,6 @@
animate(timestamp);
}
- let isReadingKeys = true;
-
function animate(timestamp) {
const elapsed = timestamp - previous;
const delta = timestamp - zero;
@@ -430,8 +427,9 @@
requestAnimationFrame(t => animate(t));
}
- let force = 1;
+ drawEdges(edgePts);
+ let force = 1;
let spacePressed = false;
let upPressed = false;
let downPressed = false;