diff --git a/css/style.css b/css/style.css
index e05fc19..7aa0b19 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,6 @@
/*BODY STUFFS*/
body {
+ background-color: #0e0e0e;
font-family: "Press Start 2P", Arial, Serif;
height: 100%;
margin: 0 !important;
@@ -91,88 +92,27 @@ body {
color: #f94343;
}
-/* body > h1 {
- margin-top: -5px;
- margin-bottom: -3px;
-} */
-
-/*BOARD*/
-.game {
- background-color: #0e0e0e;
- display: inline-block;
- margin: 0 auto;
-}
-
-#canvas {
- visibility: hidden;
-}
-
-.notification {
- display: none;
- background-color: #0e0e0e;
- color: red;
-}
-
-/*BUTTONS*/
-/* button {
- background-color: grey;
- border: 1px solid #0e0e0e;
- font-family: "Press Start 2P", Arial, Serif;
- margin: 5px;
- height: 45px;
- width: 300px;
-}
-
-.content {
- margin-top: 64px;
-} */
-
-.resume {
- display: none;
-}
-
-.reset {
- display: none;
-}
-
-.playAgain {
- display: none;
-}
-
-.settings {
- display: inline-block;
-}
-
-.home {
- display: none;
-}
-
-.pause {
- display: none;
-}
-
-.mobileButton {
- display: none;
-}
-
-.mobileButtonCenter {
- text-align: center;
-}
+@media screen and (max-width: 600px) {
+ .initial-text {
+ left: 15%;
+ right: 15%;
+ }
-.mobileButtonCenter button {
- width: 80px;
-}
+ .mobile {
+ display: block;
+ }
-.left--right button {
- margin: 0 40px;
+ .desktop {
+ display: none;
+ }
}
-@media screen and (max-width: 960px) {
- .mobileButton {
- display: block;
+@media screen and (min-width: 601px) {
+ .mobile {
+ display: none;
}
- .content {
- margin-top: 25px;
+ .desktop {
+ display: block;
}
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 38fca4f..c17dc65 100644
--- a/index.html
+++ b/index.html
@@ -30,11 +30,19 @@
diff --git a/js/controls.js b/js/controls.js
deleted file mode 100644
index e69de29..0000000
diff --git a/js/main.js b/js/main.js
index b08d3d7..24fe9c4 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,4 +1,4 @@
-(function() {
+(function () {
// Create canvas
const canvas = document.getElementById("canvas");
canvas.width = Math.round(window.innerWidth);
@@ -26,6 +26,7 @@
headerContainer = document.getElementById("header"),
controlsInfo = document.getElementById("controlsInfo"),
currentScore = document.getElementById("currentScore"),
+ scoresInfo = document.getElementById("scoresInfo"),
infoContainer = document.getElementById("infoContainer");
const cWsW = Math.ceil(canvasWidth / snakeWidth),
cHsW = Math.ceil(canvasHeight / snakeWidth);
@@ -55,7 +56,7 @@
(Math.random() * (canvasHeight - snakeWidth)) / snakeWidth
);
snake = [];
- for (var i = 6 - 1; i >= 0; i--) {
+ for (const i = 6 - 1; i >= 0; i--) {
snake.push({
x: randomStartPoint - 1,
y: randomStartPoint
@@ -298,6 +299,7 @@
function startGameOnEvent() {
gameStarted = "playing";
+ resetButton.innerHTML = "RESET";
headerContainer.style.display = "flex";
infoContainer.style.display = "none";
startTheGame();
@@ -318,23 +320,23 @@
function displayDeathScreen() {
const temp = `
-
Food Ate: ${stats["foodAte"]}
-
Bonus Food Ate: ${stats["bonusFood"]}
-
Total Score: ${stats["totalScore"]}
+
Food Ate: ${stats["foodAte"] ? stats["foodAte"] : 0}
+
Bonus Food Ate: ${stats["bonusFood"] ? stats["bonusFood"] : 0}
+
Total Score: ${stats["totalScore"] ? stats["totalScore"] : 0}
`;
gameStarted = "no";
resetButton.innerHTML = "PLAY AGAIN";
headerContainer.style.display = "none";
- resetButton.style.display = "none";
+ resetButton.style.display = "block";
continueButton.style.display = "none";
headerContainer.style.display = "none";
startButton.style.display = "none";
controlsButton.style.display = "none";
infoContainer.style.display = "block";
+ scoresInfo.style.display = "block";
+ scoresInfo.innerHTML = temp;
}
- // Public functions
-
function resumeGame() {
gameStarted = "playing";
loopGame = setInterval(render, speed);