Added multiple values for coins

src/collectable.js

@@ -1,3 +1,9 @@
+const CollectableValues = {
+    Small: 1,
+    Medium: 5,
+    Big: 10,
+};
+
 class Collectable extends AnimatedSprite {
 
     constructor(x, y) {
@@ -8,6 +14,27 @@ class Collectable extends AnimatedSprite {
         this.y = y;
         this.collected = false;
         this.maxTimer = 30;
+
+        let rand = Math.random();
+
+        if (rand < 0.6) {
+            this.value = CollectableValues.Small;
+        } else if (rand < 0.9) {
+            this.value = CollectableValues.Medium;
+        } else {
+            this.value = CollectableValues.Big;
+        }
+    }
+
+    textureOffset() {
+        switch (this.value) {
+            case CollectableValues.Small:
+                return 0;
+            case CollectableValues.Medium:
+                return 64;
+            case CollectableValues.Big:
+                return 128;
+        }
     }
 
     update(time = 0.02) {
@@ -21,11 +48,19 @@ class Collectable extends AnimatedSprite {
     collect() {
         this.collected = true;
         this.textTimer = 0;
+        return this.value;
     }
 
     drawOn(canvas, context) {
         if (!this.collected) {
-            super.drawOn(canvas, context);
+            context.drawImage(
+                this.spriteSheet,
+                this.textureOffset(), 64 * this.currentFrame, 64, 64,
+                (this.x - this.width / 2) * canvas.width,
+                (1 - this.y) * canvas.height - this.height * canvas.width / 2,
+                this.width * canvas.width,
+                this.height * canvas.width,
+            );
         } else if (this.textTimer < this.maxTimer) {
             this.drawTextOn(canvas, context);
         }
@@ -39,9 +74,10 @@ class Collectable extends AnimatedSprite {
         context.font = "15px Dimbo";
         context.fillStyle = 'rgba(0, 200, 0, ' + this.alphaFromTimer() + ')';
 
-        let width = context.measureText("+1").width;
+        let text = "+" + this.value;
+        let width = context.measureText(text).width;
 
-        context.fillText("+1",
+        context.fillText(text,
             this.x * canvas.width - width / 2,
             (1 - this.y) * canvas.height - this.textTimer
         );

src/scene.js

@@ -179,8 +179,7 @@ class Scene extends Screen {
                 || (collectable.y + collectable.size / 2 <= next.y - next.size / 4)) {
 
             } else {
-                collectable.collect();
+                this.getCollectable(collectable.collect());
-                this.getCollectable(1);
             }
         }