diff --git a/html/images/tanks.svg b/html/images/tanks.svg
index 3f3d728..b2b5d34 100644
--- a/html/images/tanks.svg
+++ b/html/images/tanks.svg
@@ -133,17 +133,21 @@
}
function fireBullet(x, y) {
+ const degrees = getRotate(gun);
+ const radians = degrees * Math.PI / 180;
+ const vx = -Math.sin(radians);
+ const vy = Math.cos(radians);
+
const el = document.createElementNS(namespaceURIsvg, 'circle');
el.setAttribute('r', 1);
- el.setAttribute('cx', x);
- el.setAttribute('cy', y);
+ el.setAttribute('cx', 0);
+ el.setAttribute('cy', 0);
const node = bulletsContainer.appendChild(el);
- const bullet = { x: x, y: y, vx: 1, vy: 1, time: 5000, node: node }
+ const bullet = { x: x, y: y, vx: vx, vy: vy, time: 5000, node: node }
bullets.push(bullet);
- console.log("bullet fired", bullet, bullets);
}
- function getTransform(el) {
+ function getTranslate(el) {
let x, y;
if (el.style.transform.length === 0) {
@@ -153,7 +157,12 @@
[[, x], [, y] = def] = [...el.style.transform.matchAll(regex)];
}
- return [x, y];
+ return [+x, +y];
+ }
+
+ function getRotate(el) {
+ let [[, degrees]] = [...el.style.transform.matchAll(degsRegex)];
+ return +degrees;
}
requestAnimationFrame(firstFrame);
@@ -215,14 +224,7 @@
}
});
- let x, y;
- if (hitbox.style.transform.length === 0) {
- x = 0;
- y = 0;
- } else {
- [[, x], [, y] = def] = [...hitbox.style.transform.matchAll(regex)];
- }
-
+ let [x, y] = getTranslate(hitbox);
let positionX = changeX + +x;
let positionY = changeY + +y;
@@ -233,13 +235,10 @@
else if (positionX < -200) positionX += 400;
hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
- // console.log(hitbox.style.transform);
- // hitbox.style.transform = `translate(0px, ${position}px)`;
+
// if (+y < 200)
// if (timestamp < 10000)
requestAnimationFrame(t => animate(t));
-
- // if (velocity[1] < 0)
}
let force = 10;
@@ -293,7 +292,7 @@
});
fireButton.addEventListener("click", function (e) {
- const [x, y] = getTransform(hitbox);
+ const [x, y] = getTranslate(hitbox);
fireBullet(+x, +y);
});