375 lines
11 KiB
XML
375 lines
11 KiB
XML
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
<svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<style>
|
|
circle, rect {
|
|
/* fill-opacity: 0.9; */
|
|
}
|
|
|
|
p {
|
|
border: 1px solid black;
|
|
box-size: border-box;
|
|
}
|
|
|
|
/* div { */
|
|
/* background-color: maroon; */
|
|
/* } */
|
|
|
|
rect#bg {
|
|
fill: gray;
|
|
}
|
|
|
|
/* .rotate { */
|
|
/* transform: rotate(90deg); */
|
|
/* animation-duration: 1s; */
|
|
/* animation-name: rotate; */
|
|
/* } */
|
|
|
|
.tank rect {
|
|
fill: green;
|
|
transform: translate(-7.5px, -5px);
|
|
}
|
|
|
|
.tank circle {
|
|
fill: white;
|
|
}
|
|
|
|
#crosshair {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* @keyframes rotate { */
|
|
/* from { */
|
|
/* transform: rotate(0); */
|
|
/* } */
|
|
/* to { */
|
|
/* transform: rotate(90deg); */
|
|
/* } */
|
|
/* } */
|
|
</style>
|
|
|
|
<g>
|
|
<!-- <circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/> -->
|
|
<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"/>
|
|
</g>
|
|
</g>
|
|
<!-- <g id="crosshair"> -->
|
|
<!-- <line x1="-2" y1="0" x2="2" y2="0" stroke="red"/> -->
|
|
<!-- <line x1="0" y1="-2" x2="0" y2="2" stroke="red"/> -->
|
|
<!-- </g> -->
|
|
</g>
|
|
|
|
<foreignObject x="-200" y="-150" width="100%" height="100%">
|
|
<div id="frames" style="position: absolute; right: 0px;" xmlns="http://www.w3.org/1999/xhtml">
|
|
<span id="fps" xmlns="http://www.w3.org/1999/xhtml">0</span> fps
|
|
</div>
|
|
|
|
<button id="turn-left" xmlns="http://www.w3.org/1999/xhtml">Left</button>
|
|
<button id="move-backward" xmlns="http://www.w3.org/1999/xhtml">Reverse</button>
|
|
<button id="move-forward" xmlns="http://www.w3.org/1999/xhtml">Forward</button>
|
|
<button id="turn-right" xmlns="http://www.w3.org/1999/xhtml">Right</button>
|
|
</foreignObject>
|
|
|
|
<script type="text/javascript">//<![CDATA[
|
|
const rules = document.styleSheets[0].cssRules;
|
|
const tank = document.querySelector(".tank");
|
|
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 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;
|
|
|
|
requestAnimationFrame(firstFrame);
|
|
|
|
function firstFrame(timestamp) {
|
|
zero = timestamp;
|
|
previous = timestamp;
|
|
animate(timestamp);
|
|
}
|
|
|
|
function animate(timestamp) {
|
|
const delta = timestamp - zero;
|
|
const elapsed = timestamp - previous;
|
|
previous = timestamp;
|
|
|
|
if (delta >= 1000) {
|
|
fps.innerText = frameCount;
|
|
zero = timestamp;
|
|
frameCount = 0;
|
|
} else {
|
|
frameCount++;
|
|
}
|
|
|
|
let [velocityX, velocityY] = velocity;
|
|
|
|
const [accelerationX, accelerationY] = acceleration;
|
|
|
|
velocity = [velocityX + accelerationX, velocityY + accelerationY];
|
|
|
|
const changeX = 0.001 * elapsed * velocityX;
|
|
const changeY = 0.001 * elapsed * velocityY;
|
|
|
|
const regex = /(-?\d*\.{0,1}\d+)px/g;
|
|
const def = ["0px", "0"];
|
|
|
|
let x, y;
|
|
if (hitbox.style.transform.length === 0) {
|
|
x = 0;
|
|
y = 0;
|
|
} else {
|
|
[[, x], [, y] = def] = [...hitbox.style.transform.matchAll(regex)];
|
|
}
|
|
|
|
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;
|
|
|
|
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)
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
leftTurnButton.addEventListener("mousedown", function (e) {
|
|
acceleration[0] = -1;
|
|
// tankTurn.playbackRate = 1;
|
|
// tankTurn.play();
|
|
});
|
|
|
|
leftTurnButton.addEventListener("mouseup", function (e) {
|
|
acceleration[0] = 0;
|
|
|
|
// tankTurn.pause();
|
|
// afterTurn();
|
|
});
|
|
|
|
rightTurnButton.addEventListener("mousedown", function (e) {
|
|
acceleration[0] = 1;
|
|
|
|
// tankTurn.playbackRate = -1;
|
|
// tankTurn.play();
|
|
});
|
|
|
|
rightTurnButton.addEventListener("mouseup", function (e) {
|
|
acceleration[0] = 0;
|
|
|
|
// tankTurn.pause();
|
|
// afterTurn();
|
|
});
|
|
|
|
reverseMoveButton.addEventListener("mousedown", function (e) {
|
|
acceleration[1] = -1; // meters per second per second
|
|
|
|
// tankMove.playbackRate = -1;
|
|
// tankMove.play();
|
|
});
|
|
|
|
reverseMoveButton.addEventListener("mouseup", function (e) {
|
|
acceleration[1] = 0; // meters per second per second
|
|
|
|
// tankMove.pause();
|
|
// afterMove();
|
|
});
|
|
|
|
forwardMoveButton.addEventListener("mousedown", function (e) {
|
|
// tankMove.playbackRate = 1;
|
|
// tankMove.play();
|
|
acceleration[1] = 1; // meters per second per second
|
|
});
|
|
|
|
forwardMoveButton.addEventListener("mouseup", function (e) {
|
|
// tankMove.pause();
|
|
// afterMove();
|
|
acceleration[1] = 0; // meters per second per second
|
|
});
|
|
|
|
// tankTurn.addEventListener("finish", function (e) {
|
|
// const duration = tankTurn.effect.getComputedTiming().activeDuration;
|
|
// tankTurn.currentTime = tankTurn.currentTime > 0 ? 0 : duration;
|
|
// });
|
|
//]]></script>
|
|
</svg>
|
|
|