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); - // }); //]]>