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); });