Some cleanup

moved things around to make it a bit easier to read through

index.html

@@ -141,7 +141,7 @@
     </div>
 
     <script>
-        // Setup
+        // // Setup
 
         // Scale viewport to fit device width
         function apply_scale() {
@@ -151,7 +151,6 @@
         }
 
         window.onresize = apply_scale;
-
         apply_scale();
 
         // Game Loop
@@ -169,12 +168,6 @@
             STARTSCREEN: 1
         };
 
-        var current_gamestate = GameState.STARTSCREEN;
-        var has_died = false;
-        var just_died = false;
-        var frame_passed = false;
-
-
         function frame() {
             now = timestamp();
             dt = dt + Math.min(1, (now - last) / 1000);
@@ -190,16 +183,31 @@
             requestAnimationFrame(frame);
         }
 
-        // Game
+        // // Game
         const GRAVITY = 200
         const JUMP_VEL = 200
         const SPIKE_DISTANCE = 250
         const GROUND_DISTANCE = 800;
+        const INITIAL_SPIKE_DISTANCE = 2000;
+        const FIRST_SPIKE_POSITION = 350;
+
+        // Should be considered a const too, but can't be because it needs to react to viewport resizing
         var camera_x = window.innerWidth / 10.0;
 
+        // Score
         var score = 0;
         var under_spikes_in_previous_frame = false;
 
+        // Level placement utilities
+        var next_spike_location;
+
+        var current_gamestate = GameState.STARTSCREEN;
+
+        var has_died = false; // true if the player has ever died during this session
+        var just_died = false; // true from player death to one frame after play death
+        var frame_passed_after_death = false; // true in the frame after the player has died
+
+        // Classes
         class Bird {
             constructor() {
                 this.position_x = 100;
@@ -311,25 +319,29 @@
             }
         }
 
+        // Objects
         let player = new Bird()
         var spikes = []
         var grounds = []
 
-        function spawn_spikes(x, y) {
+        // Utility functions
-            spikes.push(new Spikes(x, y));
+        function randomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
+        function spawn_spikes() {
+            spikes.push(new Spikes(next_spike_location, randomInt(-100, 100)));
+            next_spike_location += SPIKE_DISTANCE;
         }
 
         function spawn_ground(x) {
             grounds.push(new Ground(x));
         }
 
-        function randomInt(min, max) {
+        // Setup the game world by removing old objects and spawning new ones
-            return Math.floor(Math.random() * (max - min + 1)) + min;
-        }
-
-        const INITIAL_SPIKE_DISTANCE = 2000;
-
         function setupGame() {
+            next_spike_location = FIRST_SPIKE_POSITION;
+
             spikes.forEach(function (spike) {
                 spike.remove();
             })
@@ -345,8 +357,8 @@
 
             player.velocity_y = 0;
 
-            for (let i = 350; i < INITIAL_SPIKE_DISTANCE; i += SPIKE_DISTANCE) {
+            for (let i = next_spike_location; i < INITIAL_SPIKE_DISTANCE; i += SPIKE_DISTANCE) {
-                spawn_spikes(i, randomInt(-100, 100));
+                spawn_spikes();
             }
             for (let i = -GROUND_DISTANCE; i < INITIAL_SPIKE_DISTANCE; i += GROUND_DISTANCE) {
                 spawn_ground(i);
@@ -356,6 +368,20 @@
         // Fixed time loop
         function update(dt) {
             if (current_gamestate == GameState.PLAYING) {
+                // Remove old spikes and spawn new ones
+                var first_spike = spikes[0];
+
+                if (first_spike.position_x < player.position_x - camera_x - first_spike.width) {
+                    // This spike has just left the view -> remove it
+                    first_spike.remove()
+                    spikes.shift();
+
+                    // Spawn new spikes in front of the player
+                    spawn_spikes();
+                }
+
+
+                // Move the player
                 player.position_y += player.velocity_y * dt;
                 player.position_x += 100 * dt;
 
@@ -374,9 +400,9 @@
                     die();
                 }
 
+                // Player hits a spike
                 var under_spikes_this_frame = false;
 
-                // Player hits a spike
                 spikes.forEach(function (spike) {
                     if (player.get_center_x() > spike.position_x + spike.collision_begin_x
                         && player.get_center_x() < spike.position_x + spike.collision_end_x) {
@@ -394,7 +420,6 @@
                 if (under_spikes_in_previous_frame && !under_spikes_this_frame) {
                     score += 1;
                 }
-
                 under_spikes_in_previous_frame = under_spikes_this_frame;
 
                 // TODO: Display as UI
@@ -410,17 +435,13 @@
 
         // Variable time render loop
         function render(dt) {
+            // Place the player
             $("#plane").css({
                 top: player.position_y + "px",
                 left: camera_x + "px"
             });
 
-            // Move camera by moving everything in the level to the inverse of the player position
+            // Move the camera by moving everything in the level by the inverse of the player position
-            // TODO: offset by the object's actual position
-            $(".level").css({
-                left: (-player.position_x + camera_x) + "px"
-            })
-
             spikes.forEach(function (spike) {
                 spike.set_camera_position(-player.position_x + camera_x);
             })
@@ -428,7 +449,7 @@
                 ground.set_camera_position(-player.position_x + camera_x);
             })
 
-
+            // Visibility of start / game over texts
             if (current_gamestate == GameState.STARTSCREEN) {
                 if (has_died == false) {
                     $("#get_ready").css({ visibility: "visible" });
@@ -443,39 +464,46 @@
             }
 
             if (just_died) {
-                if (frame_passed == true) {
+                // We need to wait for one frame in order to make sure that the flash has been set to full opacity by die().
+                // After waiting for this frame to pass, we can enable the smooth transition to 0% opacity.
+                if (frame_passed_after_death == true) {
                     $("#flash").addClass("opacity-transition");
                     $("#flash").css({
                         "opacity": "0%",
                     });
-                    frame_passed = false;
+
+                    frame_passed_after_death = false;
                     just_died = false;
                 } else {
-                    frame_passed = true;
+                    frame_passed_after_death = true;
                 }
             }
         }
 
-
+        // Lose state
         function die() {
             current_gamestate = GameState.STARTSCREEN;
             has_died = true;
             just_died = true;
+
+            // Remove the flash from the opacity-transition class to set it to white immediately
             $("#flash").removeClass("opacity-transition")
             $("#flash").css({
                 "opacity": "100%",
             });
 
-            // Drop down with some speed
+            // Drop the player down with some speed
             player.velocity_y = 100;
         }
 
+        // Sets up and starts a new game
         function restart() {
             setupGame();
 
             current_gamestate = GameState.PLAYING;
         }
 
+        // Input
         document.onmousedown = function (evt) {
             if (current_gamestate == GameState.PLAYING) {
                 // Jump
@@ -485,6 +513,7 @@
             }
         };
 
+        // Start the game loop
         requestAnimationFrame(frame);
     </script>