mvp done

index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Not Today!</title>
-    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="icon" type="image/png" href="/assets/img/not-today-logo.png">
     <link rel="stylesheet" href="/styles/style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -21,18 +21,18 @@
 
     <div id="start-screen">
         <!-- music switch on/off -->
-        <p id="music-switch-start-screen" class="align-between"><span id="music-text-start-screen"
-                class="btn text-sm text-white stroke-dark-blue">music:</span> <span id="music-state-start-screen"
-                class="text-sm text-white stroke-blue">off</span></p>
+        <p id="music-switch-start-screen" class="align-between"><span id="ss-music-toggle-btn"
+                class="btn text-sm text-white stroke-dark-blue">music:</span> <span id="ss-music-state-text"
+                class="text-sm text-white stroke-blue">on</span></p>
 
         <!-- latest score & high score -->
         <p id="start-menu-high-title" class="text-lg text-navy stroke-orange">high score:</p>
         <p id="start-menu-high-score" class="text-lg text-black stroke-orange">000000</p>
-        <p id="start-menu-latest-title" class="text-lg text-navy stroke-orange">latest score:</p>
-        <p id="start-menu-latest-score" class="text-lg text-black stroke-orange">000000</p>
+        <p id="start-menu-last-title" class="text-lg text-navy stroke-orange">latest score:</p>
+        <p id="start-menu-last-score" class="text-lg text-black stroke-orange">000000</p>
 
         <!-- start btn  -->
-        <img src="/assets/img/start-btn.png" alt="click to start" id="start-button" class="btn">
+        <img src="/assets/img/start-btn.png" alt="click to start" id="start-button" class="btn pulse">
 
         <!-- game logo -->
         <a href="https://github.com/naimyasirozcan/not-today" target="_blank"><img id="game-logo" class="btn"
@@ -63,68 +63,105 @@
 
             <!-- top left board  scores -->
 
-            <p id="current-score-div" class="align-between"> <span class="text-white text-sm stroke-dark-brown">score:</span> <span
-                    id="current-score" class="text-white text-sm stroke-gold">000000</span></p>
+            <p id="current-score-div" class="align-between"> <span
+                    class="text-white text-sm stroke-dark-brown">score:</span> <span id="gb-current-score"
+                    class="text-white text-sm stroke-gold">000000</span></p>
 
-            <p id="last-score-div" class="align-between"> <span class="text-white text-sm stroke-dark-brown">last:</span> <span id="last-score" class="text-white text-sm stroke-gold">000000</span></p>
+            <p id="last-score-div" class="align-between"> <span
+                    class="text-white text-sm stroke-dark-brown">last:</span> <span id="gb-last-score"
+                    class="text-white text-sm stroke-gold">000000</span></p>
 
-            <p id="high-score-div" class="align-between"> <span class="text-white text-sm stroke-dark-brown">high:</span> <span id="high-score" class="text-white text-sm stroke-gold">000000</span></p>
+            <p id="high-score-div" class="align-between"> <span
+                    class="text-white text-sm stroke-dark-brown">high:</span> <span id="gb-high-score"
+                    class="text-white text-sm stroke-gold">000000</span></p>
 
             <!-- top left board power bars -->
 
-            <div id="energy-bar-div"> <img src="/assets/img/energy-bar-icon.png" alt="" class="power-bar-icons">
-                <div class="power-bars">
-                    <div id="energy-inner-core"></div>
-                </div>
-            </div>
+            <img id="base-icon" src="/assets/img/base-life-bar.png" alt="">
 
-            <div id="life-bar-div"> <img src="/assets/img/life-bar-icon.png" alt="" class="power-bar-icons">
-                <div class="power-bars">
-                    <div id="life-inner-core"></div>
-                </div>
+            <div id="base-bar" class="power-bars">
+                <div id="base-inner-bar" class="inner-bars"></div>
             </div>
+            <!-- <img id="energy-icon" src="/assets/img/energy-bar-icon.png" alt="">
 
-            <div id="base-life-bar-div"> <img src="/assets/img/base-life-bar.png" alt="" class="power-bar-icons">
-                <div class="power-bars">
-                    <div id="base=life-inner-core"></div>
-                </div>
+            <div id="energy-bar" class="power-bars">
+                <div id="energy-inner-bar" class="inner-bars"></div>
             </div>
 
+            <img id="life-icon" src="/assets/img/life-bar-icon.png" alt="">
+
+            <div id="life-bar" class="power-bars">
+                <div id="life-inner-bar" class="inner-bars"></div>
+            </div> -->
+
+
+
             <!-- top right board -->
 
-            <p id="music-switch-game-menu"><span id="music-text-game-menu" class="btn">music:</span> <span
-                    id="music-state-game-menu">on</span></p>
+            <p id="music-toggle-div" class="align-between top-right-item"><span id="gb-music-toggle-btn"
+                    class="btn text-sm text-white stroke-dark-blue">music:</span> <span id="gb-music-state"
+                    class="text-white text-sm stroke-light-blue">on</span></p>
 
-            <p id="fx-switch-game-menu"><span id="fx-text-game-menu" class="btn">sfx:</span> <span
-                    id="fx-state-game-menu">on</span></p>
+            <p id="sfx-toggle-div" class="align-between top-right-item"><span id="gb-sfx-toggle-btn"
+                    class="btn text-sm text-white stroke-dark-blue">sfx:</span> <span id="gb-sfx-state"
+                    class="text-white text-sm stroke-light-blue">on</span></p>
 
-            <p id="pause-btn">pause</p>
+            <p id="pause-btn" class="btn text-white text-sm stroke-dark-blue">pause</p>
 
-            <p id="quit-btn">quit</p>
+            <p id="quit-btn" class="btn text-white text-sm stroke-dark-blue">quit</p>
 
 
         </div>
 
 
-        <!-- character area -->
+        <p id="start-countdown" hidden>3</p>
+        <p id="pause-div" hidden>3</p>
 
-        <div id="character-base">
 
-        </div>
+        <!-- character area -->
+
+        <div id="character-base"></div>
 
+        <!-- quit confirm  -->
 
+        <div id="quit-confirm">
+            <p class="text-black text-md stroke-orange text-uppercase">DO You WANT TO QUIT?</p>
+            <div class="quit-btns-div">
+                <button id="quit-no" class="btn quit-btns text-black text-md">NO</button>
+                <button id="quit-yes" class="btn quit-btns text-black text-md">YES</button>
+            </div>
+        </div>
 
     </div>
 
     <!-- *** RESULT SCREEN ***-->
 
     <div id="result-screen">
 
+        <div id="result-bg-div"></div>
+
+
+        <p id="game-end-message-one" class="text-uppercase text-xl stroke-gold text-black text-center">GAME OVER</p>
+        <p id="game-end-message-two" class="text-sm text-black text-center">Next time...</p>
+
+        <p id="game-end-result-title" class="text-uppercase text-xl text-black text-center">SCORE:</p>
+        <p id="game-end-result-score" class="text-uppercase text-xl text-purple stroke-light-blue text-center">000000
+        </p>
+
+        <p id="game-end-high-title" class="text-lowercase text-lg text-black stroke-orange text-center">high score:</p>
+        <p id="game-end-high-score" class="text-lowercase text-lg text-black stroke-gold text-center">000000</p>
+
+        <p id="game-end-main-menu" class="text-uppercase text-lg text-black text-center btn pulse">CLICK TO START MENU</p>
+
+
     </div>
 
 
 
-    <script src=""></script>
+    <script src="src/main.js"></script>
+    <script src="src/invader.js"></script>
+    <script src="src/prof.js"></script>
+    <script src="src/light-ball.js"></script>
 </body>
 
 </html>

src/invader.js

@@ -0,0 +1,60 @@
+class Invader {
+    constructor(randomX){
+
+        this.node = document.createElement("img")
+        this.node.src = "../assets/img/ground-alien.png"
+        this.node.style.zIndex = 2
+        this.node.style.position = 'absolute'
+        gameBoxNode.append(this.node) //to add the node to game box on pipe creation
+
+
+        //add the initial values of position and dimensions
+        this.width = 23.6
+        this.height = 49
+        this.x = 941 + randomX
+        this.y = 523
+
+        //adjust the node with initial values
+        this.node.style.width = `${this.width}px`
+        this.node.style.height = `${this.height}px`
+        this.node.style.top = `${this.y}px`
+        this.node.style.left = `${this.x}px`
+
+        //movements
+        this.speed = 1
+
+        //life
+
+        this.life = 5
+
+        this.dieFx = new Audio('../assets/audio/fx/alien-exploded.mp3')
+        this.spawnFx = new Audio('../assets/audio/fx/alien-spawn-sound.mp3')
+        this.occupyFx = new Audio('../assets/audio/fx/alien-spawn-sound.mp3')
+    }
+
+    automaticMovement(){
+        this.y += this.speed
+        this.node.style.top = `${this.y}px`
+
+
+        this.width = this.width + (this.width * (0.4 / 100))
+        this.height = this.height + (this.height * (0.4 / 100))
+
+        this.node.style.width = `${this.width}px`
+        this.node.style.height = `${this.height}px`
+    }
+
+    die(){
+        this.node.src = "./assets/img/enemy-explosion.png"
+        this.width = this.height 
+        this.node.style.width = `${this.width}px`
+
+        playSfx(this.dieFx)
+        currentScore = currentScore + 5
+        let formattedCurrentScore = currentScore.toString().padStart(6, '0')
+        gbCurrentScoreNode.innerHTML = formattedCurrentScore
+        setTimeout(() => {
+            this.node.remove()
+        }, 2000)
+    }
+}

src/light-ball.js

@@ -0,0 +1,38 @@
+class LightBall {
+    constructor(profX){
+
+        this.node = document.createElement("img")
+        this.node.src = "../assets/img/light-ball.png"
+        this.node.style.zIndex = 7
+        this.node.style.position = 'absolute'
+        gameBoxNode.append(this.node) //to add the node to game box on pipe creation
+
+
+        //add the initial values of position and dimensions
+        this.width = 39
+        this.height = 39
+        this.x = profX + 54
+        this.y = 961
+
+        //adjust the node with initial values
+        this.node.style.width = `${this.width}px`
+        this.node.style.height = `${this.height}px`
+        this.node.style.top = `${this.y}px`
+        this.node.style.left = `${this.x}px`
+
+        //movements
+        this.speed = 3
+
+        //life
+    }
+
+    automaticMovement(){
+        this.y -= this.speed
+        this.node.style.top = `${this.y}px`
+        this.width = this.width - (this.width * (1 / 100))
+        this.height = this.height - (this.height * (1 / 100))
+
+        this.node.style.width = `${this.width}px`
+        this.node.style.height = `${this.height}px`
+    }
+}