Some cleanup

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

index.html

@@ -81,20 +81,10 @@
     <div id="viewport">
         <div id="flash" style="z-index:11;
         background-color: white;
-        width: 800px;
+        width: 100vw;
-        height: 480px;
+        height: 100vh;
         opacity: 0%;"></div>
 
-        <div id="floor" class="level" style="
-        left:0px;
-        top:409px;
-        background-image:url(sheet.png);
-        background-position: -0px -142px;
-        width: 800px;
-        height: 71px;
-        z-index: 2;
-        ">
-        </div>
         <div id="background" style="
       left:0px;
       top:0px;
@@ -105,37 +95,53 @@
       z-index: -2;
       ">
         </div>
+        <div id="background2" style="
+        left:800px;
+        top:0px;
+        background-image:url(sheet.png);
+        background-position: -0px -355px;
+        width: 800px;
+        height: 480px;
+        z-index: -2;
+        ">
+        </div>
+
         <div id="plane" style="
     z-index: 0;
     ">
         </div>
+    </div>
 
-        <div id="game_over" style="
+    <div id="game_over" style="
-      left:200px;
+      left: calc(50vw - 206px);
-      top:200px;
+      top: 40vh;
       background-image:url(sheet.png);
       background-position: -0px -835px;
       width: 412px;
       height: 78px;
       z-index: 10;
       ">
-        </div>
+    </div>
 
-        <div id="get_ready" style="
+    <div id="score" style="
-      left:200px;
+        left:50px;
-      top:200px;
+        top: 50px;
+        z-index: 10;
+        ">Score</div>
+
+    <div id="get_ready" style="
+      left: calc(50vw - 200px);
+      top: 40vh;
       background-image:url(sheet.png);
       background-position: -0px -913px;
       width: 400px;
       height: 73px;
       z-index: 10;
       ">
-        </div>
-
     </div>
 
     <script>
-        // Setup
+        // // Setup
 
         // Scale viewport to fit device width
         function apply_scale() {
@@ -145,7 +151,6 @@
         }
 
         window.onresize = apply_scale;
-
         apply_scale();
 
         // Game Loop
@@ -163,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);
@@ -184,15 +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;
@@ -270,39 +285,103 @@
             }
         }
 
-        let player = new Bird()
+        class Ground {
-        var spikes = []
+            constructor(x) {
+                this.position_x = x;
+                this.position_y = 12345;
 
-        function spawn_spikes(x, y) {
+                this.id = Math.floor(Math.random() * 1000000);
-            spikes.push(new Spikes(x, y));
+
+                this.element1 = document.createElement("div");
+                this.element1.id = this.id;
+
+                document.getElementById("viewport").appendChild(this.element1);
+
+                $("#" + this.id).css({
+                    "left": (this.position_x) + "px",
+                    "top": "409px",
+                    "background-image": "url(sheet.png)",
+                    "background-position": "-0px -142px",
+                    "width": "800px",
+                    "height": "71px",
+                    "z-index": "2"
+                });
+            }
+
+            set_camera_position(x) {
+                $("#" + this.id).css({
+                    "left": (this.position_x + x) + "px"
+                })
+            }
+
+            remove() {
+                document.getElementById(this.id).remove();
+            }
         }
 
+        // Objects
+        let player = new Bird()
+        var spikes = []
+        var grounds = []
+
+        // Utility functions
         function randomInt(min, max) {
             return Math.floor(Math.random() * (max - min + 1)) + min;
         }
 
-        const INITIAL_SPIKE_DISTANCE = 2000;
+        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));
+        }
+
+        // Setup the game world by removing old objects and spawning new ones
         function setupGame() {
+            next_spike_location = FIRST_SPIKE_POSITION;
+
             spikes.forEach(function (spike) {
                 spike.remove();
             })
+            grounds.forEach(function (ground) {
+                ground.remove();
+            })
 
             spikes.length = 0;
+            grounds.length = 0;
 
             player.position_x = 100;
             player.position_y = 150;
 
             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);
             }
         }
 
         // 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;
 
@@ -321,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) {
@@ -341,14 +420,13 @@
                 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
                 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) {
+                if (player.position_y < 400 && has_died) {
                     player.velocity_y += GRAVITY * dt;
                     player.position_y += player.velocity_y * dt;
                 }
@@ -357,21 +435,21 @@
 
         // 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);
             })
+            grounds.forEach(function (ground) {
+                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" });
@@ -386,36 +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 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
@@ -425,6 +513,7 @@
             }
         };
 
+        // Start the game loop
         requestAnimationFrame(frame);
     </script>