From 049ef4d716016f3c2aa44bbc5f565526f9964eda Mon Sep 17 00:00:00 2001
From: bunny8469 <58695175+bunny8469@users.noreply.github.com>
Date: Sat, 3 Oct 2020 10:28:38 +0530
Subject: [PATCH 1/3] Update app.js

---
 app.js | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/app.js b/app.js
index ea998da..b0e022a 100644
--- a/app.js
+++ b/app.js
@@ -834,10 +834,17 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // console.log(getCoordinates(pacmanCurrentIndex))
 
+
+  document.getElementById("btnup").addEventListener('click', function(){setPacmanVelocity('up')})
+  document.getElementById("btndown").addEventListener("click", function(){setPacmanVelocity('down')})
+  document.getElementById("btnleft").addEventListener("click", function(){setPacmanVelocity('left')})
+  document.getElementById("btnright").addEventListener("click", function(){setPacmanVelocity('right')})
+
+
   // set pacman velocity
-  function setPacmanVelocity(e) {
-    switch (e.keyCode) {
-      case 37:
+  function setPacmanVelocity(val) {
+    switch (true) {
+      case (event.keyCode == 37 || val == 'left'):
         if (
           pacmanCurrentIndex % width !== 0 &&
           !squares[pacmanCurrentIndex - 1].classList.contains("wall") &&
@@ -847,7 +854,7 @@ document.addEventListener("DOMContentLoaded", () => {
           pacmanVelocity.x = 1;
         }
         break;
-      case 38:
+      case (event.keyCode == 38 || val == 'up'):
         if (
           pacmanCurrentIndex - width >= 0 &&
           !squares[pacmanCurrentIndex - width].classList.contains("wall") &&
@@ -857,7 +864,7 @@ document.addEventListener("DOMContentLoaded", () => {
           pacmanVelocity.x = -1;
         }
         break;
-      case 39:
+      case (event.keyCode == 39 || val == 'right'):
         if (
           pacmanCurrentIndex % width < width - 1 &&
           !squares[pacmanCurrentIndex + 1].classList.contains("wall") &&
@@ -867,7 +874,7 @@ document.addEventListener("DOMContentLoaded", () => {
           pacmanVelocity.x = 0;
         }
         break;
-      case 40:
+      case (event.keyCode == 40 || val == 'down'):
         if (
           pacmanCurrentIndex + width < width * width &&
           !squares[pacmanCurrentIndex + width].classList.contains("wall") &&
@@ -879,7 +886,7 @@ document.addEventListener("DOMContentLoaded", () => {
         break;
     }
     checkForGameOver();
-    console.log(pacmanVelocity, e.keyCode);
+    console.log(pacmanVelocity, event.keyCode || val);
   }
 
   //move pacman
@@ -1051,6 +1058,10 @@ document.addEventListener("DOMContentLoaded", () => {
     ) {
       ghosts.forEach((ghost) => clearInterval(ghost.timerId));
       document.removeEventListener("keyup", movePacman);
+      document.getElementById("btnup").removeEventListener('click', function(){setPacmanVelocity('up')})
+      document.getElementById("btndown").removeEventListener("click", function(){setPacmanVelocity('down')})
+      document.getElementById("btnleft").removeEventListener("click", function(){setPacmanVelocity('left')})
+      document.getElementById("btnright").removeEventListener("click", function(){setPacmanVelocity('right')})
       pacmanVelocity.x = 0;
       pacmanVelocity.y = 0;
       //display game over screen and refresh after 3s to rest game
@@ -1082,6 +1093,7 @@ document.addEventListener("DOMContentLoaded", () => {
       document.removeEventListener("keydown", startGame);
       //remove start screen
       document.getElementById("start-screen").style.display = "none";
+      document.querySelector('.buttons').style.display = 'flex'
       //set pacman velocity and enable movement
       document.addEventListener("keyup", setPacmanVelocity);
       movePacman();

From 61f5026bc8204f1a6c7c540b02102ddd627c12ec Mon Sep 17 00:00:00 2001
From: bunny8469 <58695175+bunny8469@users.noreply.github.com>
Date: Sat, 3 Oct 2020 10:29:03 +0530
Subject: [PATCH 2/3] Update styles.css

---
 styles.css | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index 76ce086..9a3fde7 100644
--- a/styles.css
+++ b/styles.css
@@ -19,7 +19,7 @@ body {
 
 .game-container {
   width: 100%;
-  height: 100vh;
+  height: 85vh;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
@@ -189,3 +189,33 @@ h2 {
     opacity: 0;
   }
 }
+
+.buttons{
+  position: absolute;
+  height: auto;
+  width:auto;
+  bottom:1.5%;
+  left:50%;
+  transform: translateX(-50%);
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items:center;
+}
+.arrow-btn{
+  height: 50px;
+  width: 50px;
+  cursor:pointer;
+  font-size:150%;
+  border:1px solid black;
+  transition: 0.3s;
+  border-radius:3px;
+  margin:0;
+}
+.arrow-btn:hover{
+  background-color: #222;
+  color:white;
+}
+.btnup{
+  margin-bottom:10px;
+}

From 5b5cf35a5a8d3b7f986f4d49996812393420f271 Mon Sep 17 00:00:00 2001
From: bunny8469 <58695175+bunny8469@users.noreply.github.com>
Date: Sat, 3 Oct 2020 10:29:27 +0530
Subject: [PATCH 3/3] Update index.html

---
 index.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 1760565..56317ff 100644
--- a/index.html
+++ b/index.html
@@ -13,8 +13,18 @@ <h2 id="start-msg">Press ENTER to start</h2>
       <h2>Use arrow keys to move</h2>
     </div>
     <div class="game-container">
-      <div class="grid"></div>
       <h2>Score:<span id="score">0</span></h2>
+      <div class="grid"></div>
+      
+      <div class = 'buttons'>
+        <button class = "arrow-btn btnup" id="btnup"> &#8593; </button>
+        <div>
+          <button class = "arrow-btn btnleft" id="btnleft"> &#8592; </button>
+          <button class = "arrow-btn btndown" id="btndown"> &#8595; </button>
+          <button class = "arrow-btn btnright" id="btnright"> &#8594; </button>
+        </div>
+
+      </div>
     </div>
     <div class="overlay-screen" id="game-over-screen">
       <span>GAME OVER!</span>