diff --git a/source/code/game.js b/source/code/game.js
index 1492a63..bab55c4 100644
--- a/source/code/game.js
+++ b/source/code/game.js
@@ -27,18 +27,27 @@ class HippieCrosshair {
this.mouseX = canvas.width / 2;
this.mouseY = canvas.height / 2;
+ // Animation control
+ this.isAnimating = true;
+ this.animationFrameId = null;
+
this.setupEventListeners();
this.animate();
}
setupEventListeners() {
- document.addEventListener('mousemove', (e) => {
- this.mouseX = e.clientX;
- this.mouseY = e.clientY;
+ document.addEventListener('mousemove', (event) => {
+ this.mouseX = event.clientX;
+ this.mouseY = event.clientY;
});
}
animate() {
+ if (!this.isAnimating) {
+ this.animationFrameId = requestAnimationFrame(() => this.animate());
+ return;
+ }
+
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (this.showConnector) {
@@ -49,7 +58,7 @@ class HippieCrosshair {
// TODO: Autom. Zug zum Zentrum hin ermöglichen
this.drawCrosshair();
- requestAnimationFrame(() => this.animate());
+ this.animationFrameId = requestAnimationFrame(() => this.animate());
}
drawLine() {
@@ -227,4 +236,16 @@ class HippieCrosshair {
setLineVisible(visible) {
this.showConnector = visible;
}
+
+ startAnimation() {
+ this.isAnimating = true;
+ }
+
+ stopAnimation() {
+ this.isAnimating = false;
+ }
+
+ toggleAnimation() {
+ this.isAnimating = !this.isAnimating;
+ }
}
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
index a4f53a7..7dd1b54 100644
--- a/source/screens/demo/examples/game/fpv.liquid
+++ b/source/screens/demo/examples/game/fpv.liquid
@@ -15,6 +15,9 @@ tags:
+