Repeating ground

same principle as spikes

index.html

@@ -190,6 +190,7 @@
         const GROUND_DISTANCE = 800;
         const INITIAL_SPIKE_DISTANCE = 2000;
         const FIRST_SPIKE_POSITION = 350;
+        const FIRST_GROUND_POSITION = -1000;
 
         // 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;
@@ -200,6 +201,7 @@
 
         // Level placement utilities
         var next_spike_location;
+        var next_ground_location;
 
         var current_gamestate = GameState.STARTSCREEN;
 
@@ -232,6 +234,8 @@
                 this.position_x = x;
                 this.position_y = y;
 
+                this.width = 108;
+
                 this.collision_begin_x = 25;
                 this.collision_end_x = 75;
 
@@ -288,7 +292,8 @@
         class Ground {
             constructor(x) {
                 this.position_x = x;
-                this.position_y = 12345;
+
+                this.width = 800;
 
                 this.id = Math.floor(Math.random() * 1000000);
 
@@ -334,13 +339,15 @@
             next_spike_location += SPIKE_DISTANCE;
         }
 
-        function spawn_ground(x) {
-            grounds.push(new Ground(x));
+        function spawn_ground() {
+            grounds.push(new Ground(next_ground_location));
+            next_ground_location += GROUND_DISTANCE;
         }
 
         // Setup the game world by removing old objects and spawning new ones
         function setupGame() {
             next_spike_location = FIRST_SPIKE_POSITION;
+            next_ground_location = FIRST_GROUND_POSITION;
 
             spikes.forEach(function (spike) {
                 spike.remove();
@@ -360,8 +367,8 @@
             for (let i = next_spike_location; i < INITIAL_SPIKE_DISTANCE; i += SPIKE_DISTANCE) {
                 spawn_spikes();
             }
-            for (let i = -GROUND_DISTANCE; i < INITIAL_SPIKE_DISTANCE; i += GROUND_DISTANCE) {
-                spawn_ground(i);
+            for (let i = next_ground_location; i < INITIAL_SPIKE_DISTANCE; i += GROUND_DISTANCE) {
+                spawn_ground();
             }
         }
 
@@ -370,7 +377,6 @@
             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()
@@ -380,6 +386,17 @@
                     spawn_spikes();
                 }
 
+                // Same for ground
+                var first_ground = grounds[0];
+                if (first_ground.position_x < player.position_x - camera_x - first_ground.width) {
+                    // This spike has just left the view -> remove it
+                    first_ground.remove()
+                    grounds.shift();
+
+                    // Spawn new spikes in front of the player
+                    spawn_ground();
+                }
+
 
                 // Move the player
                 player.position_y += player.velocity_y * dt;