Add score UI using sprite digits

index.html

@@ -127,7 +127,7 @@
         left:50px;
         top: 50px;
         z-index: 10;
-        ">Score</div>
+        "></div>
 
     <div id="get_ready" style="
       left: calc(50vw - 200px);
@@ -141,6 +141,10 @@
     </div>
 
     <script>
+        // POTENTIAL IMPROVEMENTS:
+        // - Use a fixed pool of level objects instead of removing and creating them all the time
+        // - Use a better class hierarchy - there's some code duplication, especially between Spikes and Ground
+
         // // Setup
 
         // Scale viewport to fit device width
@@ -324,10 +328,66 @@
             }
         }
 
+        class Digit {
+            constructor(x, y, image_x, image_y, width, height) {
+                this.position_x = x;
+                this.position_y = y;
+
+                this.width = width;
+                this.height = height
+
+                this.id = Math.floor(Math.random() * 1000000);
+
+                this.element1 = document.createElement("div");
+                this.element1.id = this.id;
+
+                document.getElementById("score").appendChild(this.element1);
+
+                $("#" + this.id).css({
+                    "left": (this.position_x) + "px",
+                    "top": (this.position_y) + "px",
+                    "background-image": "url(sheet.png)",
+                    "background-position": "-" + image_x + "px -" + image_y + "px",
+                    "width": width + "px",
+                    "height": height + "px",
+                    "z-index": "10"
+                });
+            }
+
+            remove() {
+                document.getElementById(this.id).remove();
+            }
+        }
+
+        function get_digit(val, x, y) {
+            if (val == 0) {
+                return new Digit(x, y, 432, 1743, 53, 78);
+            } else if (val == 1) {
+                return new Digit(x, y, 512, 1093, 37, 76);
+            } else if (val == 2) {
+                return new Digit(x, y, 477, 1350, 51, 77);
+            } else if (val == 3) {
+                return new Digit(x, y, 485, 1679, 51, 78);
+            } else if (val == 4) {
+                return new Digit(x, y, 432, 1537, 55, 76);
+            } else if (val == 5) {
+                return new Digit(x, y, 485, 1823, 50, 76);
+            } else if (val == 6) {
+                return new Digit(x, y, 432, 1885, 53, 77);
+            } else if (val == 7) {
+                return new Digit(x, y, 478, 1173, 51, 76);
+            } else if (val == 8) {
+                return new Digit(x, y, 461, 899, 51, 78);
+            } else if (val == 9) {
+                return new Digit(x, y, 458, 1962, 53, 77);
+            }
+        }
+
         // Objects
         let player = new Bird()
         var spikes = []
         var grounds = []
+        var score_digits = []
 
         // Utility functions
         function randomInt(min, max) {
@@ -344,6 +404,22 @@
             next_ground_location += GROUND_DISTANCE;
         }
 
+        function update_score() {
+            score_digits.forEach(function (digit) {
+                digit.remove();
+            })
+            score_digits.length = 0;
+
+            // Could be done with modulo and division but I like this stupid approach:
+            // Turn the score into a string and iterate over its characters
+            var working_x = 0;
+            String(score).split('').map(function (v, i) {
+                var digit = get_digit(v, working_x, 0);
+                score_digits.push(digit);
+                working_x += digit.width;
+            });
+        }
+
         // Setup the game world by removing old objects and spawning new ones
         function setupGame() {
             next_spike_location = FIRST_SPIKE_POSITION;
@@ -370,6 +446,9 @@
             for (let i = next_ground_location; i < INITIAL_SPIKE_DISTANCE; i += GROUND_DISTANCE) {
                 spawn_ground();
             }
+
+            score = 0;
+            update_score();
         }
 
         // Fixed time loop
@@ -436,11 +515,9 @@
                 // Increase the score if we just left spikes
                 if (under_spikes_in_previous_frame && !under_spikes_this_frame) {
                     score += 1;
+                    update_score();
                 }
                 under_spikes_in_previous_frame = under_spikes_this_frame;
-
-                // TODO: Display as UI
-                console.log(score);
             } else if (current_gamestate == GameState.STARTSCREEN) {
                 // Drop the player to the ground if they're not there yet (after hitting a spike)
                 if (player.position_y < 400 && has_died) {