камера

00160.камера.js

@@ -0,0 +1,41 @@
+мир.камера = {
+    обновить: обновитьКамеру,
+};
+
+
+// // // //
+
+
+function обновитьКамеру()
+{
+    var тело = мир.объекты.тела[мир.игрок.задано.объект];
+    if (!тело)
+    {
+        return;
+    }
+
+    var корень = document.getElementById("корень");
+    // Сейчас.
+    var x0 = 0;
+    if (корень.style.left.endsWith("px"))
+    {
+        x0 = корень.style.left.slice(0, -2);
+    }
+    var y0 = 0;
+    if (корень.style.top.endsWith("px"))
+    {
+        y0 = корень.style.top.slice(0, -2);
+    }
+    // Цель.
+    var x1 = window.innerWidth / 2 - тело.position.x;
+    var y1 = window.innerHeight / 2 - тело.position.y;
+    // Плавно.
+    function lerp(v0, v1, t) {
+        return v0 * (1 - t) + v1 * t;
+    }
+    var x = lerp(x0, x1, 0.1);
+    var y = lerp(y0, y1, 0.1);
+
+    корень.style.left = `${x}px`;
+    корень.style.top = `${y}px`;
+}

01000.пуск.js

@@ -3,6 +3,7 @@
     мир.физика.обновить();
     мир.объекты.обновить();
     мир.игрок.обновить();
+    мир.камера.обновить();
     requestAnimationFrame(мир.обновить);
 };
 

01300.пример.json.js

@@ -12,10 +12,11 @@
     объекты: {
         пол: {
             x: 1000,
-            y: 300,
+            y: 590,
             ширина: 2000,
             вид: {
                 background: "url(р/отладка/основа.jpg) repeat-x",
+                display: "none",
             },
         },
         колобок: {
@@ -28,10 +29,19 @@
                 background: "url(р/колобок/колобок_неподвижен.png) no-repeat scroll 50% 0% / contain",
             },
         },
+        фундаментПечи: {
+            x: 840,
+            y: 480,
+            ширина: 550,
+            вид: {
+                background: "url(р/отладка/основа.jpg) repeat-x",
+                //display: "none",
+            },
+        },
     },
     игрок: {
         объект: "колобок",
-        скорость: [4, 12],
+        скорость: [4, 13],
         клавиши: ["ArrowLeft", "ArrowRight", "ArrowUp"],
     },
 });

index.html

@@ -9,6 +9,7 @@
                 margin: 0;
                 padding: 0;
                 overflow: hidden;
+                background: #fbfbfb;
             }
 
             body {
@@ -29,6 +30,7 @@
         <script src="00130.объекты.js"></script>
         <script src="00140.ввод.js"></script>
         <script src="00150.игрок.js"></script>
+        <script src="00160.камера.js"></script>
         <script src="01000.пуск.js"></script>
         <script src="01300.пример.json.js"></script>
         <script src="02000.обновление.js"></script>