diff --git a/html/images/space.svg b/html/images/space.svg
index d412ece..403c62f 100644
--- a/html/images/space.svg
+++ b/html/images/space.svg
@@ -48,13 +48,11 @@
-
+
+
-
-
-
-
+
@@ -77,28 +75,24 @@
const namespaceURIsvg = 'http://www.w3.org/2000/svg';
const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
const regex = /(-?\d*\.{0,1}\d+)px/g;
- const def = ["0px", "0"];
- let bullets = [];
+ const bullets = [];
+ let previous, zero, frameCount = 0;
let position = [0, 0]; // meters
let velocity = [0, 0]; // meters per second
let acceleration = [0, 0]; // meters per second per second
- let previous, zero, frameCount = 0;
// let friction = 7.5;
let friction = 0;
let rotate = 0;
let rotationSpeed = 0.25;
const maxSpeed = 100;
- const rules = document.styleSheets[0].cssRules;
-
const fps = document.querySelector("#fps");
const info = document.querySelector("#debug");
const tank = document.querySelector(".tank");
const gun = tank.querySelector('line');
const hitbox = document.querySelector(".hitbox");
const bulletsContainer = document.querySelector("#bullets");
- const r1 = document.querySelector("#rect1");
const leftTurnButton = document.querySelector("#turn-left");
const rightTurnButton = document.querySelector("#turn-right");
@@ -110,9 +104,25 @@
const fireButton = document.querySelector("#fire");
const pt = document.querySelector('svg').createSVGPoint();
- const lines = document.querySelectorAll('#lines line');
+ const polygon = document.querySelector('polygon');
- gun.style.transform = "rotate(0deg)";
+ const points = polygon.getAttribute('points').split(' ').map(coords => {
+ const [x, y] = coords.split(',');
+ return [+x, +y];
+ });
+
+ const lineContainer = document.querySelector('#lines');
+
+ points.forEach(([x, y]) => {
+ const el = document.createElementNS(namespaceURIsvg, 'line');
+ el.setAttribute('x1', x);
+ el.setAttribute('y1', y);
+ el.setAttribute('x2', x);
+ el.setAttribute('y2', y);
+ lineContainer.appendChild(el)
+ });
+
+ const lines = lineContainer.querySelectorAll('line');
function wrapPos(positionX, positionY) {
let x, y;
@@ -162,14 +172,14 @@
x = 0;
y = 0;
} else {
- [[, x], [, y] = def] = [...el.style.transform.matchAll(regex)];
+ [[, x], [, y] = ["0px", "0"]] = [...el.style.transform.matchAll(regex)];
}
return [+x, +y];
}
function getRotate(el) {
- let [[, degrees]] = [...el.style.transform.matchAll(degsRegex)];
+ let [[, degrees] = ["0deg", "0"]] = [...el.style.transform.matchAll(degsRegex)];
return +degrees;
}
@@ -201,7 +211,7 @@
frameCount++;
}
- let [[, degrees]] = [...gun.style.transform.matchAll(degsRegex)];
+ 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)`;
@@ -247,20 +257,18 @@
});
let [x, y] = getTranslate(hitbox);
- let positionX = changeX + +x;
- let positionY = changeY + +y;
-
- if (positionY > 150) positionY += -300;
- else if (positionY < -150) positionY += 300;
-
- if (positionX > 200) positionX += -400;
- else if (positionX < -200) positionX += 400;
+ let [positionX, positionY] = wrapPos(changeX + x, changeY + y);
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 (r1.isPointInFill(firstP)) {
+ if (polygon.isPointInFill(firstP)) {
line.setAttribute('x2', line.getAttribute('x1'));
line.setAttribute('y2', line.getAttribute('y1'));
}
@@ -269,10 +277,10 @@
pt.x = positionX;
pt.y = positionY;
- if (r1.isPointInFill(pt))
- r1.setAttribute('fill', 'red');
+ if (polygon.isPointInFill(pt))
+ polygon.setAttribute('fill', 'red');
else
- r1.setAttribute('fill', 'black');
+ polygon.setAttribute('fill', 'black');
hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;