Merge pull request #3 from gamalielhere/develop

Develop
gamalielhere · Jan 24, 2018 · ecd3bc3 · ecd3bc3
2 parents 9a1db88 + f51ef10
commit ecd3bc3
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -1,58 +1,46 @@
-#SNAKE GAME  
-</br>
-</br>
-![SNAKE PHOTO](http://i.imgur.com/bJZMrbL.png)
+# SNAKE GAME
+
+![SNAKE PHOTO](http://i.imgur.com/bJZMrbL.png)  
+
 
 SNAKE is a classic game where you play as the snake and you feed yourself with the food that randomly pops around the board. My variation of the game speeds up the snake the more food you eat.  
-</br>
-</br>
-###TECHNOLOGY
+
+
+### TECHNOLOGY
+
 * HTML
 * CSS
-* Javascript/jQuery
-* Firebase
-</br>
-</br>
+* Javascript
+* Firebase  
+
+
+### FUNCTIONALITY
 
-###FUNCTIONALITY
 * Created snake as an array to make it easier to add length into it.
 * Set up the board with canvas
 * Move snake inside the canvas by removing one piece of the tail and moving it to the head repeatedly.
-* Direct the snake by arrow keys using event.which to distinguish which key is being used.
-* <del>Stores high scores in local storages. [See MDN docs for more info](https://developer.mozilla.org/en-US/docs/Web/API/Storage) </del>  
-Never mind that. Jim helped me out and introduced me to Firebase data bases so the high scores are stored in a server and can be beaten by anyone currently playing.
-</br>
-</br>
+* Direct the snake by arrow keys using event.which to distinguish which key is being used.  
 
 ### INSTRUCTIONS
 * Move snake with your arrow keys.
 * Collect as much food as you can.
 * **DON'T DIE**
 
-</br>
-</br>
-###DESIGN APPROACH
+### DESIGN APPROACH
 My design approach is basically reviving a retro game. I used "Press Start 2P" as font to add that 8-bit old classic game look.
 ![SNAKE WIREFRAME](http://i.imgur.com/Yckp5UY.jpg)
-####Basically like any game, it starts out with a home page: 
+#### Basically like any game, it starts out with a home page:
 ![HOME PAGE](http://i.imgur.com/yKt7Yp7.jpg)
-####Goes to the game and lets you play:
+#### Goes to the game and lets you play:
 ![SNAKE PHOTO](http://i.imgur.com/bJZMrbL.png)
-####Until you die: 
+#### Until you die:
 ![DEAD SCREEN](http://i.imgur.com/aMsXWpH.jpg)
-</br>
-</br>
 
 ### USER STORIES
-All of my user stories can be found in my [Trello boards](https://trello.com/b/TTtZgl3z)
 
-#CODE
-[The code can be found here](https://github.com/gamalielhere/projects/tree/master/project_1/snake)  
+All of my user stories can be found in my [Trelloboards](https://trello.com/b/TTtZgl3z)
 
-[And the hosted game site can be found here](http://gamalielhere.github.io/snake/)
+# CODE
+[The code can be found here](https://github.com/gamalielhere/projects/tree/master/project_1/snake)
 
-#NOTE:
-Hosted repo and the game's code repo are different. I stored the game locally under 3 directories. Trying to keep it tidy so I have to make another repo for the game to be hosted on its own folder.
-
-#BUGS:
-* Jerry Lee found one that kills the snake when you press the buttons too fast.
+[And the hosted game site can be found here](http://gamalielhere.github.io/snake/)
diff --git a/js/script.js b/js/script.js
@@ -1,8 +1,13 @@
 (function() {
   // Create canvas
   const canvas = document.getElementById("canvas");
-  canvas.width = window.innerWidth - 30;
-  canvas.height = window.innerHeight / 2.5;
+  if (window.outerWidth > 960) {
+    canvas.width = Math.round(window.outerWidth / 3);
+    canvas.height = Math.round(window.outerWidth / 3);
+  } else {
+    canvas.width = Math.round(window.outerWidth / 1.15);
+    canvas.height = Math.round(window.outerWidth / 1.15);
+  }
 
   const canvasContext = canvas.getContext("2d"),
     canvasWidth = canvas.width,
@@ -43,6 +48,7 @@
   let snake;
   let score;
   let speed;
+  let foodAte;
 
   gameContainer[0].style.height = `${canvas.height}px`;
   gameContainer[0].style.width = `${canvas.width}px`;
@@ -87,18 +93,18 @@
 
   function createBonusFood() {
     bonusFood = {
-      x: Math.floor(Math.random() * (canvasWidth - snakeWidth) / snakeWidth),
-      y: Math.floor(Math.random() * (canvasHeight - snakeWidth) / snakeWidth)
+      x: Math.round(Math.random() * (canvasWidth - snakeWidth) / snakeWidth),
+      y: Math.round(Math.random() * (canvasHeight - snakeWidth) / snakeWidth)
     };
   }
 
   function startTheGame() {
     score = 0;
+    foodAte = 0;
     speed = 70;
     createSnake();
     createFood();
     direction = generateRandomDirection();
-
     if (typeof loopGame !== "undefined") {
       clearInterval(loopGame);
     }
@@ -138,6 +144,7 @@
     }
     checkIfGameOver(newX, newY);
     eatFood(newX, newY);
+    if (typeof bonusFood !== "undefined") eatBonusFood(newX, newY);
   }
 
   function checkIfGameOver(newX, newY) {
@@ -148,6 +155,7 @@
       newY === cHsW ||
       collide(newX, newY, snake)
     ) {
+      clearInterval(loopGame);
       gameContainer[0].style.display = "none";
       notificationContainer[0].style.display = "inline-block";
       notificationContainer[0].style.height = `${canvas.height}px`;
@@ -179,6 +187,12 @@
     if (newX === food.x && newY === food.y) {
       tail = { x: newX, y: newY };
       score++;
+      foodAte++;
+
+      console.log("Generate!", foodAte, bonusFood);
+      if (foodAte === 7 && typeof bonusFood === "undefined") {
+        createBonusFood();
+      }
       eat.play();
       createFood();
     } else {
@@ -189,6 +203,27 @@
     snake.unshift(tail);
     updateSnakeColor();
     colorFood(food.x, food.y);
+    if (typeof bonusFood !== "undefined") colorBonus(bonusFood.x, bonusFood.y);
+  }
+
+  function eatBonusFood(newX, newY) {
+    if (newX === bonusFood.x && newY === bonusFood.y) {
+      tail = { x: newX, y: newY };
+
+      score += 5;
+      eat.play();
+
+      if (typeof bonusFood !== "undefined") {
+        removeBonus(bonusFood.x, bonusFood.y);
+      }
+    }
+
+    foodAte = 0;
+    if (typeof bonusFood !== undefined) {
+      setTimeout(() => {
+        removeBonus(bonusFood.x, bonusFood.y);
+      }, 2500);
+    }
   }
 
   function updateSnakeColor() {
@@ -222,6 +257,41 @@
     );
   }
 
+  function colorBonus(x, y) {
+    canvasContext.fillStyle = "red";
+    canvasContext.fillRect(
+      x * snakeWidth,
+      y * snakeWidth,
+      snakeWidth,
+      snakeWidth
+    );
+    canvasContext.strokeStyle = foodColor;
+    canvasContext.strokeRect(
+      x * snakeWidth,
+      y * snakeWidth,
+      snakeWidth,
+      snakeWidth
+    );
+  }
+
+  function removeBonus(x, y) {
+    bonusFood = undefined;
+    canvasContext.fillStyle = "black";
+    canvasContext.fillRect(
+      x * snakeWidth,
+      y * snakeWidth,
+      snakeWidth,
+      snakeWidth
+    );
+    canvasContext.strokeStyle = "black";
+    canvasContext.strokeRect(
+      x * snakeWidth,
+      y * snakeWidth,
+      snakeWidth,
+      snakeWidth
+    );
+  }
+
   function snakeColor(x, y) {
     canvasContext.fillStyle = bodyColor;
     canvasContext.fillRect(
@@ -333,14 +403,14 @@
 
   window.mobileLeft = function() {
     direction = "left";
-  }
+  };
   window.mobileRight = function() {
     direction = "right";
-  }
+  };
   window.mobileUp = function() {
     direction = "up";
-  }
+  };
   window.mobileDown = function() {
     direction = "down";
-  }
+  };
 })();