Prepare for animated collectable

src/collectable.js

@@ -4,6 +4,17 @@ class Collectable {
         this.x = x;
         this.y = y;
         this.collected = false;
+
+        this.frameNumber = 0;
+        this.maxFrame = 0;
+    }
+
+    update(time = 0.02) {
+        this.frameNumber++;
+
+        if (this.frameNumber >= this.maxFrame) {
+            this.frameNumber = 0;
+        }
     }
 }
 

src/scene.js

@@ -55,12 +55,6 @@ class Scene extends Screen {
         // The the line for the high score
         this.currentMaxHeight = this.maxHeight;
 
-        // Generate random initial platforms
-        // for (let i = 0.25; i <= 2; i += 0.33) {
-        //     let platform = new Platform(Math.random(), i, 0.2);
-        //     this.addPlatform(platform);
-        // }
-
     }
 
     start() {
@@ -198,6 +192,9 @@ class Scene extends Screen {
         // Collisions with the border of the screen
         this.player.x = Math.max(this.player.x, this.player.size / 4);
         this.player.x = Math.min(this.player.x, 1 - this.player.size / 4);
+
+        // Update coin frames
+        this.collectables.map((c) => c.update(time));
     }
 
     addPlatform(object) {
@@ -239,7 +236,7 @@ class Scene extends Screen {
 
             this.context.drawImage(
                 Collectable.texture,
-                0, 0, 64, 64,
+                0, 64 * object.frameNumber, 64, 64,
                 (object.x - object.size / 2) * this.width(),
                 (1 - object.y) * this.height() - size / 2,
                 size, size