Better background, scrolling ground, scaling

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,14 +95,26 @@
       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="
-      left:200px;
+      left: calc(50vw - 206px);
-      top:200px;
+      top: 40vh;
       background-image:url(sheet.png);
       background-position: -0px -835px;
       width: 412px;
@@ -121,9 +123,15 @@
       ">
     </div>
 
+    <div id="score" style="
+        left:50px;
+        top: 50px;
+        z-index: 10;
+        ">Score</div>
+
     <div id="get_ready" style="
-      left:200px;
+      left: calc(50vw - 200px);
-      top:200px;
+      top: 40vh;
       background-image:url(sheet.png);
       background-position: -0px -913px;
       width: 400px;
@@ -132,8 +140,6 @@
       ">
     </div>
 
-    </div>
-
     <script>
         // Setup
 
@@ -188,6 +194,7 @@
         const GRAVITY = 200
         const JUMP_VEL = 200
         const SPIKE_DISTANCE = 250
+        const GROUND_DISTANCE = 800;
         var camera_x = window.innerWidth / 10.0;
 
         var score = 0;
@@ -270,13 +277,52 @@
             }
         }
 
+        class Ground {
+            constructor(x) {
+                this.position_x = x;
+                this.position_y = 12345;
+
+                this.id = Math.floor(Math.random() * 1000000);
+
+                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();
+            }
+        }
+
         let player = new Bird()
         var spikes = []
+        var grounds = []
 
         function spawn_spikes(x, y) {
             spikes.push(new Spikes(x, y));
         }
 
+        function spawn_ground(x) {
+            grounds.push(new Ground(x));
+        }
+
         function randomInt(min, max) {
             return Math.floor(Math.random() * (max - min + 1)) + min;
         }
@@ -287,8 +333,12 @@
             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;
@@ -298,6 +348,9 @@
             for (let i = 350; i < INITIAL_SPIKE_DISTANCE; i += SPIKE_DISTANCE) {
                 spawn_spikes(i, randomInt(-100, 100));
             }
+            for (let i = -GROUND_DISTANCE; i < INITIAL_SPIKE_DISTANCE; i += GROUND_DISTANCE) {
+                spawn_ground(i);
+            }
         }
 
         // Fixed time loop
@@ -348,7 +401,7 @@
                 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;
                 }
@@ -371,6 +424,10 @@
             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);
+            })
+
 
             if (current_gamestate == GameState.STARTSCREEN) {
                 if (has_died == false) {
@@ -408,6 +465,9 @@
             $("#flash").css({
                 "opacity": "100%",
             });
+
+            // Drop down with some speed
+            player.velocity_y = 100;
         }
 
         function restart() {