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":