Added little +1

Makefile

@@ -7,6 +7,7 @@ www/js/escalator.js: $(shell find src -name "*.js")
 		src/utils.js \
 		src/screen.js \
 		src/gui.js \
+		src/sprite.js \
 		src/collectable.js \
 		src/scene.js \
 		src/box.js \

src/collectable.js

@@ -1,21 +1,53 @@
-class Collectable {
+class Collectable extends AnimatedSprite {
+
     constructor(x, y) {
+        super(Collectable.texture, 14);
         this.size = 0.1;
+        this.width = this.height = this.size;
         this.x = x;
         this.y = y;
         this.collected = false;
-
+        this.maxTimer = 30;
-        this.frameNumber = 0;
-        this.maxFrame = 14;
     }
 
     update(time = 0.02) {
-        this.frameNumber++;
+        if (!this.collected) {
+            super.update(time);
+        } else {
+            this.textTimer += time * 50;
+        }
+    }
 
-        if (this.frameNumber >= this.maxFrame) {
+    collect() {
-            this.frameNumber = 0;
+        this.collected = true;
+        this.textTimer = 0;
+    }
+
+    drawOn(canvas, context) {
+        if (!this.collected) {
+            super.drawOn(canvas, context);
+        } else if (this.textTimer < this.maxTimer) {
+            this.drawTextOn(canvas, context);
         }
     }
+
+    alphaFromTimer() {
+        return 1 - this.textTimer / this.maxTimer;
+    }
+
+    drawTextOn(canvas, context) {
+        context.font = "15px Dimbo";
+        context.fillStyle = 'rgba(0, 200, 0, ' + this.alphaFromTimer() + ')';
+
+        let width = context.measureText("+1").width;
+
+        context.fillText("+1",
+            this.x * canvas.width - width / 2,
+            (1 - this.y) * canvas.height - this.textTimer
+        );
+
+    }
+
 }
 
 Collectable.texture = new Image();

src/scene.js

@@ -179,7 +179,7 @@ class Scene extends Screen {
                 || (collectable.y + collectable.size / 2 <= next.y - next.size / 4)) {
 
             } else {
-                collectable.collected = true;
+                collectable.collect();
                 this.getCollectable(1);
             }
         }
@@ -230,18 +230,7 @@ class Scene extends Screen {
     }
 
     drawCollectable(object) {
-
+        object.drawOn(this.canvas, this.context);
-        if (!object.collected) {
-            let size = object.size * this.width();
-
-            this.context.drawImage(
-                Collectable.texture,
-                0, 64 * object.frameNumber, 64, 64,
-                (object.x - object.size / 2) * this.width(),
-                (1 - object.y) * this.height() - size / 2,
-                size, size
-            );
-        }
     }
 
     drawHighScoreLine() {

src/sprite.js

@@ -0,0 +1,42 @@
+class Sprite {
+    constructor(spriteSheet) {
+        this.spriteSheet = spriteSheet;
+    }
+
+    drawOn(canvas, context) {
+        context.drawImage(
+            this.spriteSheet,
+            0, 0, 64, 64,
+            (this.x - this.width / 2) * canvas.width,
+            (1 - this.y) * canvas.height - this.height * canvas.width / 2,
+            this.width,
+            this.height,
+        );
+    }
+}
+
+class AnimatedSprite extends Sprite {
+    constructor(spriteSheet, numberOfFrames) {
+        super(spriteSheet);
+        this.numberOfFrames = numberOfFrames;
+        this.currentFrame = 0;
+    }
+
+    update(time = 0.02) {
+        this.currentFrame++;
+        if (this.currentFrame >= this.numberOfFrames) {
+            this.currentFrame = 0;
+        }
+    }
+
+    drawOn(canvas, context) {
+        context.drawImage(
+            this.spriteSheet,
+            0, 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,
+        );
+    }
+}