From d278da060bb8ecb4540ebd966ec6b8f5fea353d3 Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Thu, 5 Feb 2026 11:48:11 -0800 Subject: [PATCH] Move shooting into a system --- html/images/space.svg | 143 +++++++++++++++--------------------------- 1 file changed, 52 insertions(+), 91 deletions(-) diff --git a/html/images/space.svg b/html/images/space.svg index 2cf23ae..6c87419 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -235,6 +235,56 @@ const Degrees = {}; // }; // systems +const Shoot = (() => { + const cannonLength = 8; + const scalar = 50; + + return { + update: ({ entity_id }) => { + const radians = Degrees[entity_id] * Math.PI / 180; // toFixed(15)? + const { x, y } = Position[entity_id]; + const rise = Math.sin(radians) * cannonLength; + const run = Math.cos(radians) * cannonLength; + + const bulletOrigin = { + x: x + run, + y: y + rise + } + + const bulletDestination = { + x: bulletOrigin.x + run * scalar, + y: bulletOrigin.y + rise * scalar + } + + const lineEl = document.createElementNS(namespaceURIsvg, 'line'); + + lineEl.classList.add('bullet'); + lineEl.setAttribute('x1', bulletOrigin.x); + lineEl.setAttribute('y1', bulletOrigin.y); + lineEl.setAttribute('x2', bulletDestination.x); + lineEl.setAttribute('y2', bulletDestination.y); + lineEl.addEventListener('transitionend', e => e.target.remove()); + + let pt, hit; + for (let i = 0; i <= lineEl.getTotalLength(); i++) { + pt = lineEl.getPointAtLength(i); + hit = [...wallElements].find(el => el.isPointInFill(pt)); + if (hit) break; + } + + if (hit) { + lineEl.setAttribute('x2', pt.x); + lineEl.setAttribute('y2', pt.y); + } + + const appended = bulletsContainer.appendChild(lineEl); + + // I don't know why I have to delay it + setTimeout(() => appended.classList.add('fade'), 1000); + } + }; +})(); + const Rotate = (() => { const metersPerMillisecond = 0.001; @@ -957,7 +1007,6 @@ const map = (function(els) { })(wallElements); let allStartingEdges; -let rotationSpeed = 0.25; let started = false; let restart = false; let isReadingKeys = true; @@ -1053,90 +1102,6 @@ function wrapPos(positionX, positionY) { return [x, y]; } -function fireBullet(position, degrees) { - const cannonLength = 8; - const radians = degrees * Math.PI / 180; // toFixed(15)? - const rise = Math.sin(radians) * cannonLength; - const run = Math.cos(radians) * cannonLength; - - const bulletOrigin = { - x: position.x + run, - y: position.y + rise - } - - const bulletDestination = { - x: bulletOrigin.x + run * 50, - y: bulletOrigin.y + rise * 50 - } - - // Options for the observer (which mutations to observe) - const config = { attributes: false, childList: true, subtree: true }; - // Callback function to execute when mutations are observed - const callback = (mutationList, observer) => { - for (const mutation of mutationList) { - if (mutation.type === "childList") { - // [...mutation.addedNodes].forEach(b => b.classList.add('fade')); - // mutation.addedNodes.forEach(bullet => bullet.classList.add('fade')); - } else if (mutation.type === "attributes") { - } - } - }; - - // Create an observer instance linked to the callback function - const observer = new MutationObserver(callback); - - // Start observing the target node for configured mutations - // observer.observe(bulletsContainer, config); - - const lineEl = document.createElementNS(namespaceURIsvg, 'line'); - - lineEl.classList.add('bullet'); - lineEl.setAttribute('x1', bulletOrigin.x); - lineEl.setAttribute('y1', bulletOrigin.y); - lineEl.setAttribute('x2', bulletDestination.x); - lineEl.setAttribute('y2', bulletDestination.y); - // lineEl.addEventListener('transitionrun', e => console.log('transitionrun', e)); - // lineEl.addEventListener('transitionstart', e => console.log('transitionstart', e)); - lineEl.addEventListener('transitionend', e => e.target.remove()); - - const startTime = performance.now() - - let pt, hit; - for (let i = 0; i <= lineEl.getTotalLength(); i++) { - pt = lineEl.getPointAtLength(i); - hit = [...wallElements].find(el => el.isPointInFill(pt)); - if (hit) break; - } - - const endTime = performance.now() - // console.log(`Took ${endTime - startTime} milliseconds`) - - // const screenCTM = svg.getScreenCTM(); - // const startTime = performance.now() - // - // let pt, hit; - // for (let i = 0; i <= lineEl.getTotalLength(); i++) { - // pt = lineEl.getPointAtLength(i); - // const domPt = pt.matrixTransform(screenCTM); - // const elements = document.elementsFromPoint(domPt.x, domPt.y); - // hit = elements.find(el => el.classList.contains('wall')); - // - // if (hit) break; - // } - // - // const endTime = performance.now() - - if (hit) { - lineEl.setAttribute('x2', pt.x); - lineEl.setAttribute('y2', pt.y); - } - - const appended = bulletsContainer.appendChild(lineEl); - - // I don't know why I have to delay it - setTimeout(() => appended.classList.add('fade'), 1000); -} - function drawLine(xa, ya, xb, yb, color = "black") { const el = document.createElementNS(namespaceURIsvg, 'line'); el.setAttribute('x1', xa); @@ -1374,22 +1339,18 @@ function animate(timestamp) { frameCount++; } - // s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`; - - // Move.update(Ships[0], elapsed); Ships.forEach(({ entity_id }) => { Move.update({ entity_id }, elapsed); Rotate.update({ entity_id }, elapsed); }); - let newPos = updateShip(s, elapsed); + // let newPos = updateShip(s, elapsed); newPos = Position[Ships[0].entity_id]; let newVel = Velocity[Ships[0].entity_id]; s.node.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`; positionEl.innerText = `${newPos.x},${newPos.y}`; velocityEl.innerText = `${newVel.x},${newVel.y}`; - gun.style.transform = `rotate(${Degrees[Ships[0].entity_id]}deg)`; // updateEdges(position); @@ -1444,7 +1405,7 @@ document.addEventListener("keydown", function(e) { case "Space": if (!spacePressed) { spacePressed = true; - fireBullet(s.position, s.degrees); + Shoot.update(Ships[0]); } break; case "KeyW":