новое слежение

350.слежение.js

@@ -0,0 +1,112 @@
+function Слежение(корень, изображения, тела, объекты)
+{
+    this.создать = function()
+    {
+        this.умолчание = {
+            смещение: [0, 0],
+            скорость: 1,
+        };
+        this.задано = {};
+    };
+
+    this.обработатьКлюч = function(ключ, путь, значение)
+    {
+        var имя = путь[1];
+        var свойство = путь.slice(2).join(".");
+        if (!this.задано[имя])
+        {
+            this.задано[имя] = {};
+        }
+        this.задано[имя][свойство] = значение;
+    };
+
+    this.обновить = function()
+    {
+        for (var имя in this.задано)
+        {
+            var за = this.задано[имя];
+            if (имя == "камера")
+            {
+                this.расположитьЭлемент(корень, за, this.расположениеКамеры);
+            }
+            else
+            {
+                var изо = изображения.элементы[за["изображение"]];
+                this.расположитьЭлемент(изо, за);
+            }
+        }
+    };
+
+    this.расположитьЭлемент = function(элемент, за, формула)
+    {
+        var тело = null;
+        if (за["объект"])
+        {
+            тело = объекты.тела[за["объект"]];
+        }
+        else if (за["тело"])
+        {
+            тело = тела.тела[за["тело"]];
+        }
+
+        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;
+
+        // Преобразование целевой позиции.
+        // Сейчас лишь для камеры.
+        if (формула)
+        {
+            var итог = формула(x1, y1);
+            x1 = итог[0];
+            y1 = итог[1];
+        }
+
+        // Устанавливаемая плавно позиция.
+        var x = this.lerp(x0, x1, скорость);
+        var y = this.lerp(y0, y1, скорость);
+
+        элемент.dataset.слежениеX = x;
+        элемент.dataset.слежениеY = y;
+        элемент.style.transform = `translate(${x}px, ${y}px)`;
+    };
+
+    this.расположениеКамеры = function(x, y)
+    {
+        return [
+            window.innerWidth / 2 - x,
+            window.innerHeight / 2 - y,
+        ];
+    };
+
+    this.lerp = function(v0, v1, t) {
+        // Убираем мельтешение.
+        var delta = Math.abs(v0 - v1);
+        if (delta < 1) {
+            return v0;
+        }
+        return v0 * (1 - t) + v1 * t;
+    };
+
+    // Конструктор.
+    this.создать();
+};

700.пуск.js

@@ -2,10 +2,12 @@ function Пуск()
 {
     this.запустить = function()
     {
-        мир.физика.создать();
         var корень = document.getElementById("корень");
+
+        мир.физика.создать();
         мир.изображения = new Изображения(корень);
         мир.тела = new Тела(мир.физика.движок.world);
+        мир.слежение = new Слежение(корень, мир.изображения, мир.тела, мир.объекты);
         мир.столкновения.создать();
         мир.звуки = new Звуки(мир.ключники, мир.события);
         мир.движение = new Движение(мир.ключники);
@@ -20,10 +22,15 @@ function Пуск()
             if (путь[0] == "изображения")
             {
                 мир.изображения.обработатьКлюч(ключ, путь, значение);
-            } else if (путь[0] == "тела")
+            }
+            else if (путь[0] == "тела")
             {
                 мир.тела.обработатьКлюч(ключ, путь, значение);
             }
+            else if (путь[0] == "слежение")
+            {
+                мир.слежение.обработатьКлюч(ключ, путь, значение);
+            }
         });
     };
 

index.html

@@ -76,7 +76,7 @@
         <script src="200.движение.js"></script>
         <script src="300.события.js"></script>
         <script src="320.игрок.js"></script>
-        <script src="340.слежение.js"></script>
+        <script src="350.слежение.js"></script>
         <script src="360.маскиПрыжков.js"></script>
         <script src="380.звуки.js"></script>
         <script src="400.столкновения.js"></script>