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;