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 @@

SNAKE

-
W = Up
-
S = Down
-
A = Left
-
D = Right
-
SPACEBAR = Start/Pause
+
+
W = Up
+
S = Down
+
A = Left
+
D = Right
+
SPACEBAR = Start/Pause
+
+
+
Swipe up = Up
+
Swipe down = Down
+
Swipe left = Left
+
Swipe right = Right
+
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);