diff --git a/html/images/space.svg b/html/images/space.svg index 4f493b2..1a714e3 100644 --- a/html/images/space.svg +++ b/html/images/space.svg @@ -448,20 +448,21 @@ function wrapPos(positionX, positionY) { return [x, y]; } -function fireBullet(position, velocity) { - const speed = 200; // meters per second - const degrees = getRotate(gun); - const radians = degrees * Math.PI / 180; // toFixed(15)? - const vx = -Math.sin(radians); - const vy = Math.cos(radians); - const bulletTimeout = 5000; // miliseconds +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 el = document.createElementNS(namespaceURIsvg, 'circle'); - el.classList.add('bullet'); - el.setAttribute('r', 1); - el.setAttribute('cx', 0); - el.setAttribute('cy', 0); + 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 }; @@ -484,37 +485,18 @@ function fireBullet(position, velocity) { const observer = new MutationObserver(callback); // Start observing the target node for configured mutations - observer.observe(bulletsContainer, config); + // observer.observe(bulletsContainer, config); const lineEl = document.createElementNS(namespaceURIsvg, 'line'); - // bulletsContainer.addEventListener("DOMContentLoaded", (event) => { - // console.log("bulletsContainer fully loaded and parsed"); - // }); - lineEl.classList.add('bullet'); - // lineEl.setAttribute('x1', position.x + vx * cannonLength); - // x: position.x + vx * cannonLength, - // y: position.y + vy * cannonLength, - const rad = s.degrees * Math.PI / 180; // toFixed(15)? - - const rise = Math.sin(rad) * cannonLength; - const run = Math.cos(rad) * cannonLength; - - const bulletOrigin = { - x: position.x + run, - y: position.y + rise - } - - const bulletDestination = { - x: bulletOrigin.x + run * 50, - y: bulletOrigin.y + rise * 50 - } - 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() // console.time('bulletCollision'); @@ -530,38 +512,15 @@ function fireBullet(position, velocity) { // console.timeEnd('bulletCollision'); console.log(`Took ${endTime - startTime} milliseconds`) - // lineEl.addEventListener('transitionrun', e => console.log('transitionrun', e)); - // lineEl.addEventListener('transitionstart', e => console.log('transitionstart', e)); - lineEl.addEventListener('transitionend', e => e.target.remove()); - if (hit) { lineEl.setAttribute('x2', pt.x); lineEl.setAttribute('y2', pt.y); } const appended = bulletsContainer.appendChild(lineEl); - // [...bulletsContainer.children][0].classList.add('fade'); + // I don't know why I have to delay it - // console.log("path length", lineEl.getTotalLength()); - - setTimeout(() => appended.classList.add('fade'), 1000); - - // const bullet = { - // x: position.x + vx * cannonLength, - // y: position.y + vy * cannonLength, - // vx: vx * speed + velocity.x, - // vy: vy * speed + velocity.y, - // time: bulletTimeout, - // node: bulletsContainer.appendChild(el) - // } - - // bullets.push(bullet); -} - -function getRotate(el) { - let [[, degrees] = ["0deg", "0"]] = [...el.style.transform.matchAll(degsRegex)]; - return +degrees; } function updateBullets(elapsed) { @@ -985,7 +944,6 @@ function firstFrame(timestamp) { function animate(timestamp) { const elapsed = timestamp - previous; const delta = timestamp - zero; - let degrees = getRotate(gun); previous = timestamp; if (delta >= 1000) { @@ -1064,7 +1022,7 @@ document.addEventListener("keydown", function(e) { case "Space": if (!spacePressed) { spacePressed = true; - fireBullet(s.position, s.velocity); + fireBullet(s.position, s.degrees); } break; case "KeyW":