слежение

3.3/проигрыватель/160.Слежение.js

@@ -0,0 +1,91 @@
+function Слежение(события, изображения, тела)
+{
+    this.создать = function()
+    {
+        this.умолчание = {
+            смещение: [0, 0],
+            скорость: 1,
+        };
+        this.задано = {};
+        события.подписать(this);
+    };
+
+    this.обновить = function()
+    {
+        for (var имя in this.задано)
+        {
+            var за = this.задано[имя];
+            var изо = изображения.элементы[за.изображение];
+            this.расположитьЭлемент(изо, за);
+        }
+    };
+
+    this.обработатьКлюч = function(ключ, путь, значение)
+    {
+        if (путь[0] != "слежение")
+        {
+            return;
+        }
+
+        var имя = путь[1];
+        var свойство = путь.slice(2).join(".");
+        if (!this.задано[имя])
+        {
+            this.задано[имя] = {};
+        }
+        this.задано[имя][свойство] = значение;
+    };
+
+    this.расположитьЭлемент = function(элемент, за)
+    {
+        var тело = тела.тела[за.тело];
+        if (!тело)
+        {
+            return;
+        }
+
+        var ум = this.умолчание;
+
+        // Параметры.
+        var скорость = за.скорость ? за.скорость : ум.скорость;
+        var смещениеX = за["смещение.0"] ? за["смещение.0"] : ум.смещение[0];
+        var смещениеY = за["смещение.1"] ? за["смещение.1"] : ум.смещение[1];
+
+        // Текущая позиция.
+        var x0 = 0;
+        if (элемент.dataset.слежениеX)
+        {
+            x0 = элемент.dataset.слежениеX;
+        }
+        var y0 = 0;
+        if (элемент.dataset.слежениеY)
+        {
+            y0 = элемент.dataset.слежениеY;
+        }
+
+        // Целевая позиция.
+        var x1 = тело.position.x + смещениеX;
+        var y1 = тело.position.y + смещениеY;
+
+        // Устанавливаемая плавно позиция.
+        var x = this.lerp(x0, x1, скорость);
+        var y = this.lerp(y0, y1, скорость);
+
+        элемент.dataset.слежениеX = x;
+        элемент.dataset.слежениеY = y;
+        элемент.style.left = `${x}px`;
+        элемент.style.top = `${y}px`;
+    };
+
+    this.lerp = function(v0, v1, t) {
+        // Убираем мельтешение.
+        var delta = Math.abs(v0 - v1);
+        if (delta < 1) {
+            return v0;
+        }
+        return v0 * (1 - t) + v1 * t;
+    };
+
+    // Конструктор.
+    this.создать();
+};

3.3/проигрыватель/700.Игра.js

@@ -6,12 +6,16 @@ function Игра()
         мир.события = new События();
         мир.состояние = new Состояние();
         мир.состояние.обработчик = (к, п, з) => { this.обработатьКлюч(к, п, з) };
+        мир.физика = new Физика();
+        мир.изображения = new Изображения(корень),
+        мир.тела = new Тела(мир.события, мир.физика.движок.world);
+        мир.слежение = new Слежение(мир.события, мир.изображения, мир.тела);
         this.ключники = [
             new Заголовок(),
-            new Изображения(корень),
+            мир.изображения,
+            мир.тела,
+            мир.слежение,
         ];
-        мир.физика = new Физика();
-        мир.тела = new Тела(мир.события, мир.физика.движок.world);
 
         var z64 = мир.параметрыЗапуска()["z64"];
         this.исполнитьКод(z64);
@@ -31,6 +35,7 @@ function Игра()
     this.обновить = function()
     {
         мир.физика.обновить();
+        мир.слежение.обновить();
 
         var тут = this;
         requestAnimationFrame(function() {

3.3/проигрыватель/index.html

@@ -6,6 +6,9 @@
         <script src="../общее/pako/pako.min.js"></script>
         <script src="matter-js/matter.min.js"></script>
         <style>
+            body {
+                overflow: hidden;
+            }
             #корень
             {
                 position: relative;
@@ -24,6 +27,7 @@
         <script src="100.Изображения.js"></script>
         <script src="120.Физика.js"></script>
         <script src="140.Тела.js"></script>
+        <script src="160.Слежение.js"></script>
         <script src="700.Игра.js"></script>
         <script>
             var игра = new Игра();