анимировать руками одно изображение циклично

4.1/игра/100.Изображения.js

@@ -9,6 +9,9 @@ function Изображения(события, виды, анимации, ко
         this.задано = {};
         this.элементы = {};
         события.подписать(this);
+
+        this._номер = 0;
+        this._анимация = null;
     };
 
     // Ключи и события.
@@ -150,18 +153,31 @@ function Изображения(события, виды, анимации, ко
         if (анимация)
         {
             let за = анимации.задано[анимация];
-            let в = за["воспроизведений"];
-            let к = за["кадров"];
-            let с = за["скорость"];
-            let д0 = за["диапазон.0"];
-            let д1 = за["диапазон.1"];
-            let д2 = за["диапазон.2"];
-            let д3 = за["диапазон.3"];
-
-            if (в != null && к != null && с != null && д0 != null && д1 != null && д2 != null && д3 != null)
+            let в = Number(за["воспроизведений"]);
+            let к0 = Number(за["кадр.0"]);
+            let к1 = Number(за["кадр.1"]);
+            let с = Number(за["скорость"]);
+            let д0 = Number(за["диапазон.0"]);
+            let д1 = Number(за["диапазон.1"]);
+            let д2 = Number(за["диапазон.2"]);
+            let д3 = Number(за["диапазон.3"]);
+
+            if (в != null && к0 != null && к1 != null && с != null && д0 != null && д1 != null && д2 != null && д3 != null)
             {
+                let кадр = [к0, к1];
                 let диапазон = [д0, д1, д2, д3];
-                /**/console.debug("ИГР Изображения.обновитьВА", в, к, с, диапазон);
+                /**/console.debug("ИГР Изображения.обновитьВА", в, кадр, с, диапазон);
+                this._кадр = кадр;
+                this._диапазон = диапазон;
+                let ширинаДиапазона = Math.abs(д2 - д0);
+                let высотаДиапазона = Math.abs(д3 - д1);
+                let ширинаКадра = Math.abs(к0);
+                let высотаКадра = Math.abs(к1);
+                let кадровX = Math.floor(ширинаДиапазона / ширинаКадра);
+                let кадровY = Math.floor(высотаДиапазона / высотаКадра);
+                this._кадрыX = кадровX > кадровY;
+                this._кадров = this._кадрыX ? кадровX : кадровY;
+                this.анимация = setInterval(() => { this._анимировать(эл); }, с);
             }
         }
 
@@ -191,6 +207,19 @@ function Изображения(события, виды, анимации, ко
         }
     };
 
+    this._анимировать = function(эл)
+    {
+        this._номер += 1;
+        if (this._номер >= this._кадров)
+        {
+            this._номер = 0;
+        }
+        let x = this._кадрыX ? this._номер * this._кадр[0] : 0;
+        let y = this._кадрыX ? 0 : this._номер * this._кадр[1];
+        /**/console.log("ИГР Изображения._анимировать x/y", x, y);
+        эл.style.backgroundPosition = `${x}px ${y}px`;
+    };
+
     // Конструктор.
     this.создать();
 }