ccm/miti.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add rotating gun

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-12-14 21:58:14 -08:00
parent d4e1bf5b9e
commit 58952cfa88
1 changed files with 40 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
html/images/tanks.svg
View File

@@ -52,9 +52,9 @@
<rect id="bg" x="-200" y="-150" width="400" height="300"/>
<g class="hitbox">
<g class="tank">
<!-- <line x1="0" y1="0" x2="0" y2="10" stroke="black"/> -->
<!-- <rect width="15" height="10"/> -->
<circle cx="0" cy="0" r="5"/>
<line x1="0" y1="0" x2="0" y2="8" stroke="black"/>
</g>
</g>
<!-- <g id="crosshair"> -->
@@ -72,21 +72,31 @@
<button id="move-backward" xmlns="http://www.w3.org/1999/xhtml">Up</button>
<button id="move-forward" xmlns="http://www.w3.org/1999/xhtml">Down</button>
<button id="turn-right" xmlns="http://www.w3.org/1999/xhtml">Right</button>
<button id="rotate-ccw" xmlns="http://www.w3.org/1999/xhtml">Rotate CCW</button>
<button id="rotate-cw" xmlns="http://www.w3.org/1999/xhtml">Rotate CW</button>
</foreignObject>
<script type="text/javascript">//<![CDATA[
const rules = document.styleSheets[0].cssRules;
const tank = document.querySelector(".tank");
const gun = tank.querySelector('line');
const hitbox = document.querySelector(".hitbox");
const leftTurnButton = document.querySelector("#turn-left");
const rightTurnButton = document.querySelector("#turn-right");
const reverseMoveButton = document.querySelector("#move-backward");
const forwardMoveButton = document.querySelector("#move-forward");
const rotateCWButton = document.querySelector("#rotate-cw");
const rotateCCWButton = document.querySelector("#rotate-ccw");
const fps = document.querySelector("#fps");
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 rotate = 0;
let rotationSpeed = 0.25;
gun.style.transform = "rotate(0deg)";
requestAnimationFrame(firstFrame);
@@ -109,6 +119,13 @@
frameCount++;
}
const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
let [[, degrees]] = [...gun.style.transform.matchAll(degsRegex)];
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)`;
let [velocityX, velocityY] = velocity;
let [accelerationX, accelerationY] = acceleration;
@@ -155,226 +172,58 @@
// if (velocity[1] < 0)
}
function moveTank(el) {
const tankMove = el.animate(
[
{ transform: `translate(0, -10px)`},
{ transform: `translate(0, 10px)`}
], {
duration: 1000,
fill: 'both'
}
);
tankMove.pause();
tankMove.currentTime = tankMove.effect.getComputedTiming().activeDuration / 2;
return tankMove;
}
function turnTank(el) {
const tankTurn = el.animate(
[
{ transform: 'rotate(180deg)' },
{ transform: 'rotate(-180deg)' }
], {
duration: 2000,
easint: 'ease-in-out',
fill: 'both'
}
);
tankTurn.pause();
tankTurn.currentTime = tankTurn.effect.getComputedTiming().activeDuration / 2;
return tankTurn;
}
// const tankTurn = turnTank(tank);
// const tankMove = moveTank(hitbox);
function degsToRads(degrees) {
return degrees * Math.PI / 180;
}
function afterTurn() {
const totalDegrees = 180;
const current = tankTurn.currentTime;
const duration = tankTurn.effect.getComputedTiming().activeDuration / 2;
const diff = current - duration;
const degrees = diff / duration * totalDegrees;
const radians = degsToRads(degrees);
// https://stackoverflow.com/a/3644302
const y = 10 * +Math.cos(radians).toFixed(15);
const x = 10 * +Math.sin(radians).toFixed(15);
console.log("diff", diff, "current", current, "duration", duration, diff / duration * Math.PI);
console.log("degrees", degrees, "radians", radians, "x", x == 0, "y", y);
const regex = /(-?\d*\.{0,1}\d+)px/g;
const [past, future] = tankMove.effect.getKeyframes()
const def = ["0px", "0"];
const [[, px], [, py] = def] = [...past.transform.matchAll(regex)];
const [[, fx], [, fy] = def] = [...future.transform.matchAll(regex)];
const position = { x: (+fx + +px) / 2, y: (+fy + +py) / 2 };
tankMove.effect.setKeyframes(
[
{ transform: `translate(${-x + position.x}px, ${-y + position.y}px)`},
{ transform: `translate(${x + position.x}px, ${y + position.y}px)`}
], {
duration: 5000,
fill: 'both'
}
);
const [pkf, fkf] = tankMove.effect.getKeyframes();
console.log(pkf.transform, fkf.transform);
}
function afterMove() {
const totalDistance = 10;
const current = tankMove.currentTime;
const duration = tankMove.effect.getComputedTiming().activeDuration / 2;
const regex = /(-?\d*\.{0,1}\d+)px/g;
const [past, future] = tankMove.effect.getKeyframes()
const totalDegrees = 180;
const turnCurrent = tankTurn.currentTime;
const turnDuration = tankTurn.effect.getComputedTiming().activeDuration / 2;
// const diff = turnDuration - turnCurrent;
const diff = turnCurrent - turnDuration;
const degrees = diff / turnDuration * totalDegrees;
const radians = degsToRads(degrees);
const def = ["0px", "0"];
const [[, px], [, py] = def] = [...past.transform.matchAll(regex)];
const [[, fx], [, fy] = def] = [...future.transform.matchAll(regex)];
const timeSpan = Math.abs(duration - current);
// const timeSpan = duration - current;
const distanceTraveled = timeSpan / duration * totalDistance;
let y = distanceTraveled * +Math.cos(radians).toFixed(15) * tankMove.playbackRate;
let x = distanceTraveled * +Math.sin(radians).toFixed(15) * tankMove.playbackRate;
// console.log("distanceTraveled", distanceTraveled);
if (degrees > 0 && degrees < 90) {
// quadrant 1
console.log("quadrant 1");
x = -x;
y = -y;
} else if (degrees > 90 && degrees < 180) {
// quadrant 2
console.log("quadrant 2");
x = -x;
y = -y;
} else if (degrees < -90 && degrees > -180) {
// quadrant 3
console.log("quadrant 3");
x = -x;
y = -y;
} else if (degrees < 0 && degrees > -90) {
// quadrant 4
console.log("quadrant 4");
x = -x;
y = -y;
} else if (degrees === 0) {
x = +x;
y = -y;
} else if (degrees === 90) {
x = +x;
y = +y;
} else if (degrees === -90) {
x = -x;
y = +y;
} else {
x = +x;
y = -y;
}
const position = { x: (+fx + +px) / 2, y: (+fy + +py) / 2};
const [turnPast, turnFuture] = tankTurn.effect.getKeyframes()
// console.log("playbackRate", tankMove.playbackRate);
// console.log("before", past.transform, future.transform);
// console.log("position", position, "degrees", degrees, "x", x, "y", y);
// can get transformation matrix
// getComputedStyle(hitbox).transform
tankMove.effect.setKeyframes(
[
{ transform: `translate(${-x + +px}px, ${-y + +py}px)`},
{ transform: `translate(${-x + +fx}px, ${-y + +fy}px)`}
], {
duration: 5000,
fill: 'both'
}
);
tankMove.currentTime = duration;
const [pkf, fkf] = tankMove.effect.getKeyframes()
// console.log("after", pkf.transform, fkf.transform);
}
let force = 10;
leftTurnButton.addEventListener("mousedown", function (e) {
acceleration[0] = -force;
// tankTurn.playbackRate = 1;
// tankTurn.play();
});
leftTurnButton.addEventListener("mouseup", function (e) {
acceleration[0] = 0;
// tankTurn.pause();
// afterTurn();
});
rightTurnButton.addEventListener("mousedown", function (e) {
acceleration[0] = force;
// tankTurn.playbackRate = -1;
// tankTurn.play();
});
rightTurnButton.addEventListener("mouseup", function (e) {
acceleration[0] = 0;
// tankTurn.pause();
// afterTurn();
});
reverseMoveButton.addEventListener("mousedown", function (e) {
acceleration[1] = -force; // meters per second per second
// tankMove.playbackRate = -1;
// tankMove.play();
acceleration[1] = -force;
});
reverseMoveButton.addEventListener("mouseup", function (e) {
acceleration[1] = 0; // meters per second per second
// tankMove.pause();
// afterMove();
acceleration[1] = 0;
});
forwardMoveButton.addEventListener("mousedown", function (e) {
// tankMove.playbackRate = 1;
// tankMove.play();
acceleration[1] = force; // meters per second per second
acceleration[1] = force;
});
forwardMoveButton.addEventListener("mouseup", function (e) {
// tankMove.pause();
// afterMove();
acceleration[1] = 0; // meters per second per second
acceleration[1] = 0;
});
rotateCWButton.addEventListener("mousedown", function (e) {
rotate = 1;
});
rotateCWButton.addEventListener("mouseup", function (e) {
rotate = 0;
});
rotateCCWButton.addEventListener("mousedown", function (e) {
rotate = -1;
});
rotateCCWButton.addEventListener("mouseup", function (e) {
rotate = 0;
});
// tankTurn.addEventListener("finish", function (e) {
// const duration = tankTurn.effect.getComputedTiming().activeDuration;
// tankTurn.currentTime = tankTurn.currentTime > 0 ? 0 : duration;
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB