From 9e3724a8677cdc06f494ccda924addd0d64c899b Mon Sep 17 00:00:00 2001
From: karl <karl.bittner@hexaquo.at>
Date: Sat, 16 Oct 2021 18:25:30 +0200
Subject: [PATCH] Collision, spike spawning

---
 index.html | 278 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 181 insertions(+), 97 deletions(-)
diff --git a/index.html b/index.html
index d7add7f..b8c346b 100644
--- a/index.html
+++ b/index.html
@@ -73,8 +73,71 @@
 </head>
 
 <body>
+    <div id="viewport">
+        <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;
+      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 id="game_over" style="
+      left:200px;
+      top:200px;
+      background-image:url(sheet.png);
+      background-position: -0px -835px;
+      width: 412px;
+      height: 78px;
+      z-index: 10;
+      ">
+        </div>
+
+        <div id="get_ready" style="
+      left:200px;
+      top:200px;
+      background-image:url(sheet.png);
+      background-position: -0px -913px;
+      width: 400px;
+      height: 73px;
+      z-index: 10;
+      ">
+        </div>
+
+    </div>
+
     <script>
         // Setup
+
+        // Scale viewport to fit device width
+        function apply_scale() {
+            var scale = window.innerHeight / 480.0;
+            $("#viewport").css({ "transform": "scale(" + scale + ")", "transform-origin": "0 0" });
+            camera_x = window.innerWidth / 10.0;
+        }
+
+        window.onresize = apply_scale;
+
+        apply_scale();
+
+        // Game Loop
         function timestamp() {
             return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
         }
@@ -111,28 +174,115 @@
         // Game
         const GRAVITY = 200
         const JUMP_VEL = 200
-        const SPIKE_DISTANCE = 400
+        const SPIKE_DISTANCE = 250
+        var camera_x = window.innerWidth / 10.0;
 
         class Bird {
             constructor() {
                 this.position_x = 100;
-                this.position_y = 100;
+                this.position_y = 150;
 
                 this.width = 88;
                 this.height = 73;
 
                 this.velocity_y = 0;
             }
+
+            get_center_x() {
+                return this.position_x + this.width / 2.0;
+            }
+            get_center_y() {
+                return this.position_y + this.height / 2.0;
+            }
         }
 
         class Spikes {
-            constructor() {
-                this.position_x = 350;
-                this.position_y = 0;
+            constructor(x, y) {
+                this.position_x = x;
+                this.position_y = y;
+
+                this.collision_begin_x = 25;
+                this.collision_end_x = 75;
+
+                this.collision_begin_y = 170;
+                this.collision_end_y = 280;
+
+                this.id = Math.floor(Math.random() * 1000000);
+
+                this.element1 = document.createElement("div");
+                this.element1.id = this.id;
+
+                this.element2 = document.createElement("div");
+                this.element2.id = this.id + 1;
+
+                document.getElementById("viewport").appendChild(this.element1);
+                document.getElementById("viewport").appendChild(this.element2);
+
+                $("#" + this.id).css({
+                    "top": (y + 300) + "px",
+                    "background-image": "url(sheet.png)",
+                    "background-position": "-0px -1757px",
+                    "width": "108px",
+                    "height": "239px",
+                    "z-index": "1"
+                })
+
+                $("#" + (this.id + 1)).css({
+                    "top": (y - 100) + "px",
+                    "background-image": "url(sheet.png)",
+                    "background-position": "-264px -986px",
+                    "width": "108px",
+                    "height": "239px",
+                    "z-index": "1"
+                })
+
+
+            }
+
+            set_camera_position(x) {
+                $("#" + this.id).css({
+                    "left": (this.position_x + x) + "px"
+                })
+                $("#" + (this.id + 1)).css({
+                    "left": (this.position_x + x) + "px"
+                })
+            }
+
+            remove() {
+                document.getElementById(this.id).remove();
+                document.getElementById(this.id + 1).remove();
             }
         }
 
         let player = new Bird()
+        var spikes = []
+
+        function spawn_spikes(x, y) {
+            spikes.push(new Spikes(x, y));
+        }
+
+        function randomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
+        const INITIAL_SPIKE_DISTANCE = 2000;
+
+        function setupGame() {
+            spikes.forEach(function (spike) {
+                spike.remove();
+            })
+
+            spikes.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) {
+                spawn_spikes(i, randomInt(-100, 100));
+            }
+        }
 
         // Fixed time loop
         function update(dt) {
@@ -149,10 +299,23 @@
                 // Gravity
                 player.velocity_y += GRAVITY * dt;
 
-                // Lose condition
+                // // Lose conditions
+                // Player hits the ground
                 if (player.position_y > 400) {
                     die();
                 }
+
+                // 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) {
+                        // Player is inside the spikes - check the y axis
+                        if (!(player.get_center_y() > spike.position_y + spike.collision_begin_y
+                            && player.get_center_y() < spike.position_y + spike.collision_end_y)) {
+                            die();
+                        }
+                    }
+                })
             } else if (current_gamestate == GameState.STARTSCREEN) {
                 // Do nothing
             }
@@ -162,9 +325,19 @@
         function render(dt) {
             $("#plane").css({
                 top: player.position_y + "px",
-                left: player.position_x + "px"
+                left: camera_x + "px"
             });
 
+            // Move camera by moving everything in the level to 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);
+            })
+
             if (current_gamestate == GameState.STARTSCREEN) {
                 if (has_died == false) {
                     $("#get_ready").css({ visibility: "visible" });
@@ -186,10 +359,7 @@
         }
 
         function restart() {
-            player.position_x = 100;
-            player.position_y = 100;
-
-            player.velocity_y = 0;
+            setupGame();
 
             current_gamestate = GameState.PLAYING;
         }
@@ -206,92 +376,6 @@
         requestAnimationFrame(frame);
     </script>
 
-
-
-    <div id="viewport">
-        <div id="floor" style="
-        left:0px;
-        top:409px;
-        background-image:url(sheet.png);
-        background-position: -0px -142px;
-        width: 800px;
-        height: 71px;
-        z-index: -1;
-        ">
-        </div>
-        <div id="background" style="
-      left:0px;
-      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 id="spike_bottom" style="
-      left:300px;
-      top:300px;
-      background-image:url(sheet.png);
-      background-position: -0px -1757px;
-      width: 108px;
-      height: 239px;
-      z-index: 1;
-      ">
-        </div>
-
-        <div id="spike_top" style="
-      left:300px;
-      top:-100px;
-      background-image:url(sheet.png);
-      background-position: -264px -986px;
-      width: 108px;
-      height: 239px;
-      z-index: 1;
-      ">
-        </div>
-
-        <div id="game_over" style="
-      left:200px;
-      top:200px;
-      background-image:url(sheet.png);
-      background-position: -0px -835px;
-      width: 412px;
-      height: 78px;
-      z-index: 1;
-      ">
-        </div>
-
-        <div id="get_ready" style="
-      left:200px;
-      top:200px;
-      background-image:url(sheet.png);
-      background-position: -0px -913px;
-      width: 400px;
-      height: 73px;
-      z-index: 1;
-      ">
-        </div>
-
-    </div>
-
-    <script>
-        // Scale viewport to fit device width
-        function apply_scale() {
-            var scale = window.innerHeight / 480.0;
-            $("#viewport").css({ "transform": "scale(" + scale + ")", "transform-origin": "0 0" });
-        }
-
-        window.onresize = apply_scale;
-
-        apply_scale();
-    </script>
-
 </body>
 
 </html>
\ No newline at end of file
