bootstrap modal added

Author: manisha014

snake.css

@@ -82,7 +82,7 @@ canvas {
     margin-bottom: 20px;
 }
 
-#alertMsg {
+#scoreModal {
     color: brown;
     font-weight: bolder;
 }

snake.html

@@ -33,7 +33,7 @@ <h2 class="mt-3"><span class="result"><img src="images/apple.png" alt="fruit"></
                 <div class="modal-content">
                     <div class="modal-body">
                         <img id="snake" src="images/snake.png" alt="snake">     
-                        <p>Game Over! Your Score is: <span id="alertMsg"></span></p>
+                        <p>Game Over! Your Score is: <span id="scoreModal"></span></p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn modal-btn" data-dismiss="modal">Ok</button>

snake.js

@@ -21,9 +21,9 @@ var playing, gameStarted;
 var boundaryCollision;
 var tail0;
 
-var alertModal = document.getElementById("alertModal");
-var alertMsg = document.getElementById("alertMsg");
-var modalBtn = document.querySelector(".modal-btn");
+// var alertModal = document.getElementById("alertModal");
+// var alertMsg = document.getElementById("alertMsg");
+// var modalBtn = document.querySelector(".modal-btn");
 
 
 startBtn.addEventListener("click", startGame);
@@ -242,7 +242,7 @@ function drawSnake() {
         }
         drawSnakeHead("red");
         setTimeout(()=>{ 
-            alertMsg.textContent = totalTail;
+            scoreModal.textContent = totalTail;
             $('#alertModal').modal('show');
             $( "#alertModal" ).on('shown.bs.modal', function(){
                 window.removeEventListener("keydown", pressedKey);