diff --git a/html/images/space.svg b/html/images/space.svg index 597e254..d412ece 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -31,6 +31,11 @@ circle.bullet { fill: yellow; } + + #lines line { + stroke: limegreen; + stroke-width: 0.5px; + } @@ -44,6 +49,12 @@ + + + + + + @@ -98,6 +109,8 @@ const rotateCCWButton = document.querySelector("#rotate-ccw"); const fireButton = document.querySelector("#fire"); + const pt = document.querySelector('svg').createSVGPoint(); + const lines = document.querySelectorAll('#lines line'); gun.style.transform = "rotate(0deg)"; @@ -206,7 +219,6 @@ velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY; velocity = [velocityX, velocityY]; - if (velocity[0] > maxSpeed) velocity[0] = maxSpeed; else if (velocity[0] < -maxSpeed) velocity[0] = -maxSpeed @@ -244,9 +256,16 @@ if (positionX > 200) positionX += -400; else if (positionX < -200) positionX += 400; - const radius = 5; + lines.forEach(line => { + line.setAttribute('x2', positionX); + line.setAttribute('y2', positionY); + const firstP = line.getPointAtLength(1); + if (r1.isPointInFill(firstP)) { + line.setAttribute('x2', line.getAttribute('x1')); + line.setAttribute('y2', line.getAttribute('y1')); + } + }); - const pt = document.querySelector('svg').createSVGPoint(); pt.x = positionX; pt.y = positionY;