add: Script

index.html

@@ -23,21 +23,37 @@
       <div class="menu">
         <div class="menu-time">
           <h2>Time left</h2>
-          <h2>0</h2>
+          <h2 id="time-left">0</h2>
         </div>
 
         <div class="menu-score">
           <h2>Your score</h2>
-          <h2>0</h2>
+          <h2 id="score">0</h2>
         </div>
 
         <div class="menu-lives">
-          <img src="" />
+          <img src="./src/images/player.png" />
           <h2>x3</h2>
         </div>
       </div>
 
-      <div class="panel"></div>
+      <div class="panel">
+        <div class="panel-row">
+          <div class="square enemy" id="1"></div>
+          <div class="square" id="2"></div>
+          <div class="square" id="3"></div>
+        </div>
+        <div class="panel-row">
+          <div class="square" id="4"></div>
+          <div class="square" id="5"></div>
+          <div class="square" id="6"></div>
+        </div>
+        <div class="panel-row">
+          <div class="square" id="7"></div>
+          <div class="square" id="8"></div>
+          <div class="square" id="9"></div>
+        </div>
+      </div>
     </div>
 
     <script defer src="/src/scripts/engine.js"></script>

src/scripts/engine.js

@@ -0,0 +1,71 @@
+const state = {
+  view: {
+    squares: document.querySelectorAll(".square"),
+    enemy: document.querySelector(".enemy"),
+    timeLeft: document.querySelector("#time-left"),
+    score: document.querySelector("#score"),
+  },
+  values: {
+    gameVelocity: 1000,
+    hitPosition: 0,
+    result: 0,
+    currentTime: 60,
+  },
+  actions: {
+    countDownTimerId: setInterval(countDown, 1000),
+    timerId: setInterval(randomSquare, 1000),
+  },
+};
+
+function countDown() {
+  state.values.currentTime--;
+  state.view.timeLeft.textContent = state.values.currentTime;
+
+  if (state.values.currentTime <= 0) {
+    clearInterval(state.actions.timerId);
+    clearInterval(state.actions.countDownTimerId);
+    alert("Game Over! Your final score is " + state.values.result);
+  }
+}
+
+function playSound() {
+  let audio = new Audio("./src/audios/hit.m4a");
+  audio.volume = 0.2;
+  audio.play();
+}
+
+function randomSquare() {
+  state.view.squares.forEach((square) => {
+    square.classList.remove("enemy");
+  });
+
+  let randomNumber = Math.floor(Math.random() * 9);
+  let randomSquare = state.view.squares[randomNumber];
+  randomSquare.classList.add("enemy");
+}
+
+function addListenerHitBox() {
+  state.view.squares.forEach((square) => {
+    square.addEventListener("mousedown", () => {
+      if (square.id === state.values.hitPosition) {
+        state.values.result++;
+        state.view.score.textContent = state.values.result;
+        state.values.hitPosition = null;
+        playSound();
+      }
+
+      if (square.classList.contains("enemy")) {
+        state.view.score.textContent =
+          parseInt(state.view.score.textContent) + 1;
+        clearInterval(state.values.timerId);
+        moveEnemy();
+      }
+    });
+  });
+}
+
+function main() {
+  addListenerHitBox();
+}
+
+main();

src/styles/main.css

@@ -1,5 +1,8 @@
 .container {
   display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-image: url("../images/wall.png");
 }
 .menu {
   display: flex;
@@ -10,4 +13,35 @@
   width: 100%;
   background-color: #000000;
   color: #ffffff;
+
+  border-bottom: 5px solid #ffd700;
+}
+.panel {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.square {
+  height: 150px;
+  width: 150px;
+  border: 1px solid #000000;
+  background-color: #7fffd4;
+}
+.enemy {
+  background-image: url("../images/ralph.png");
+  background-size: cover;
+}
+.menu-lives {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.menu-lives img {
+  height: 50px;
+  width: 50px;
+}
+.menu-time h2,
+.menu-score h2 {
+  margin-top: 10px;
 }