Button controls, move snake on start

README.md

@@ -0,0 +1,7 @@
+# Snake-Game
+Classic Snake game from Nokia 3310
+_____
+
+Created with Javascript
+
+live: [https://lucky-victory.github.io/Snake-Game/](https://lucky-victory.github.io/Snake-Game/)

index.css

@@ -9,12 +9,12 @@ body, html {
 }
 
 canvas {
-  box-shadow: black 10px 10px 30px;
+  box-shadow: #0007 10px 10px 30px ;
 }
 
 button {
-  margin: 3em 0;
-  padding: 5px 8px;
+  margin: 2em 0;
+  padding: 6px 10px;
   border: 2px solid rgb(109, 109, 109);
   box-shadow: rgb(177, 177, 177) 5px 5px 8px;
   color: black;
@@ -29,4 +29,21 @@ button:focus {
   background-color: black;
   color: white;
   transition: 0.3s ease-in-out;
+}
+.control-btns-container{
+  position: relative;
+  padding: 20px;
+  margin: 2em;
+}
+.up,.down{
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.up{
+  top:-20px;
+
+}
+.down{
+  bottom: -20px;
 }

index.html

@@ -13,7 +13,12 @@ <h1>Snake</h1>
 
   <h2>Score: <span id="score"></span></h2>
   <canvas id="game" width="400" height="400"></canvas>
-
+<div class="control-btns-container">
+  <button class="btn up">up</button>
+  <button class="btn left">left</button>
+  <button class="btn right">right</button>
+  <button class="btn down">down</button>
+</div>
   <button id="startBtn">Start/Restart</button>
   <script src="index.js"></script>
 </body>

index.js

@@ -1,6 +1,10 @@
 // Declare UI vars
 let scoreDisplay = document.getElementById("score")
-const startButton = document.getElementById("startBtn")
+const startButton = document.getElementById("startBtn");
+const upBtn=document.querySelector('.up')
+const downBtn=document.querySelector('.down');
+const leftBtn=document.querySelector('.left');
+const rightBtn=document.querySelector('.right');
 const canvas = document.getElementById("game")
 const ctx = canvas.getContext("2d")
 
@@ -27,7 +31,33 @@ let appleX;
 let appleY;
 let xDirection;
 let yDirection;
-
+// controls for direction
+const direction={
+  moveRight(){
+    if (xDirection === -1)
+      return;
+    xDirection = 1;
+    yDirection = 0;
+  },
+  moveLeft(){
+    if (xDirection === 1)
+      return;
+    xDirection = -1
+    yDirection = 0;
+  },
+  moveUp(){
+    if (yDirection === 1)
+      return;
+    xDirection = 0;
+    yDirection = -1
+  },
+  moveDown(){
+    if (yDirection === -1)
+      return;
+    xDirection = 0
+    yDirection = 1;
+  }
+}
 function snake() {
 // Snake head position
   headX = 5
@@ -42,18 +72,23 @@ function snake() {
   // Snake initial direction
   xDirection = 0
   yDirection = 0
+
+  // the snake should move right when the game start
+  direction.moveRight();
+
 }
 
-snake()
+ snake()
 
 function drawGame() {
+
   moveSnake()
   gameOver = false
 
   let result = isGameOver()
   if(result) {
 
-    snake()
+    snake();
     return
   }
 
@@ -70,26 +105,33 @@ function drawGame() {
   if(score > 7) {
     speed = 11
   }
+
 
-  setTimeout(drawGame, 1000 / speed)
+  setTimeout(drawGame, 1000 / speed);
 }
 
 function isGameOver() {
-  let gameOver = false
+   gameOver = false
 
   // Game hasnt started
   if (xDirection === 0 && yDirection === 0) {
-    return false
+    return 
   }
 
   // Hit walls
-  if(headX < 0) {
-    gameOver = true
-  } else if (headX === squareCount) {
-    gameOver = true
-  } else if (headY < 0) {
-    gameOver = true
-  } else if (headY === squareCount) {
+  // if(headX < 0 ) {
+  //   gameOver = true
+  // } else if (headX === squareCount) {
+  //   gameOver = true
+  // } else if (headY < 0) {
+  //   gameOver = true
+  // } else if (headY === squareCount) {
+  //   gameOver = true
+  // }
+  // Hit walls (refactored)
+  if(headX < 0 || headX === squareCount) {
+    gameOver = true;
+  } else if (headY < 0 || headY === squareCount) {
     gameOver = true
   }
 
@@ -112,7 +154,8 @@ function isGameOver() {
     gradient.addColorStop(0.7, "orangered")
 
     ctx.fillStyle = gradient
-    ctx.fillText("G A M E  O V E R", canvas.width / 15, canvas.height / 2)
+    ctx.fillText("G A M E  O V E R", canvas.width / 15, canvas.height / 2);
+
   }
   return gameOver
 }
@@ -158,46 +201,52 @@ function generateApple() {
     appleY = Math.floor(Math.random() * squareCount)
     tailLength++
     score++
-    scoreDisplay.textContent = score
+    displayScore();
   }
 }
-
+function displayScore(){
+    scoreDisplay.textContent = score
+
+}
 document.addEventListener("keyup", control)
 
 function control(e) {
   // up 
   if (e.keyCode === 38) {
-    if (yDirection === 1) 
-      return;
-    xDirection = 0
-    yDirection = -1
+    direction.moveUp();
   }
 
   // right
   if (e.keyCode === 39) {
-    if(xDirection === -1)
-      return;
-    xDirection = 1
-    yDirection = 0
+    direction.moveRight();
   } 
 
    // left
   if (e.keyCode === 37) {
-    if (xDirection === 1)
-      return;
-    xDirection = -1
-    yDirection = 0
+    direction.moveLeft()
   }
 
    // down
   if (e.keyCode === 40) {
-    if (yDirection === -1)
-      return;
-    xDirection = 0
-    yDirection = 1
+    direction.moveDown();
   }
 }
 
 drawGame()
-startButton.addEventListener("click", drawGame)
+startButton.addEventListener("click", drawGame);
+upBtn.addEventListener('click',()=>{
+  direction.moveUp()
+})
+
+downBtn.addEventListener('click',()=>{
+  direction.moveDown()
+})
+
+leftBtn.addEventListener('click',()=>{
+  direction.moveLeft()
+})
+
+rightBtn.addEventListener('click',()=>{
+  direction.moveRight()
+})