diff --git a/ClassicSnakeGame b/ClassicSnakeGame
new file mode 160000
index 0000000..e4a4417
--- /dev/null
+++ b/ClassicSnakeGame
@@ -0,0 +1 @@
+Subproject commit e4a44177bbe3204cc249714266e236277bceb0f9
diff --git a/css/game.css b/css/game.css
new file mode 100644
index 0000000..987d622
--- /dev/null
+++ b/css/game.css
@@ -0,0 +1,52 @@
+body {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ margin: 0;
+ background-color: #232323;
+ font-family: monospace;
+ }
+
+ header {
+ width: 100%;
+ color: #353535;
+ background-color: #00ff00b5;
+ text-align: center;
+ box-shadow:
+ inset 0 -3em 3em rgba(0, 200, 0, 0.3),
+ 0 0 0 2px white,
+ 0.3em 0.3em 1em rgba(200, 0, 0, 0.6);
+ }
+
+ main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 90vh;
+ }
+
+ button {
+ background-color: rgb(157, 255, 127);
+ height: 50px;
+ width: 100px;
+ border-radius: 10px;
+ padding: 10px;
+ margin: 10px;
+ box-shadow: 5px 5px 5px rgb(92, 91, 91);
+ cursor: pointer;
+ }
+
+ footer {
+ background-color: #00ff00ae;
+ }
+
+ canvas {
+ border: 1px solid #fff;
+ background-color: #000;
+ margin-top: 5vh;
+ }
+
+ em.name-em {
+ color: rgb(120, 18, 156);
+ }
\ No newline at end of file
diff --git a/css/home.css b/css/home.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/score.css b/css/score.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/styles.css b/css/styles.css
index 31adaf1..e69de29 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,51 +0,0 @@
-body {
- display: flex;
- flex-direction: column;
- height: 100vh;
- margin: 0;
- background-color: #232323;
- font-family: monospace;
-}
-
-header {
- width: 100%;
- color: #353535;
- background-color: #00ff00b5;
- text-align: center;
- box-shadow:
- inset 0 -3em 3em rgba(0, 200, 0, 0.3),
- 0 0 0 2px white,
- 0.3em 0.3em 1em rgba(200, 0, 0, 0.6);
-}
-
-main {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 80vh;
-}
-
-button {
- background-color: rgb(157, 255, 127);
- height: 50px;
- width: 100px;
- border-radius: 10px;
- padding: 10px;
- margin: 10px;
- box-shadow: 5px 5px 5px rgb(92, 91, 91);
- cursor: pointer;
-}
-
-footer {
- background-color: #00ff00ae;
-}
-
-canvas {
- border: 1px solid #fff;
- background-color: #000;
-}
-
-em.name-em {
- color: rgb(120, 18, 156);
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 6271c91..9a52e64 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,17 @@
Classic Snake Game
+
+
Welcome To The EastCode's Classic Snake Game
diff --git a/js/app.js b/js/app.js
index 0f5d8ce..ab42d84 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,5 +1,9 @@
+/* GLOBAL VARS */
+const cl = (input) => {console.log(input)};
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
+let currentScore = 0;
+let highScore = localStorage.getItem('highScore') || 0;
const boxSize = 20;
const canvasSize = 800;
@@ -12,27 +16,46 @@ let snake = [{ x: 10, y: 10 }];
let food = { x: 0, y: 0 };
let direction = "right";
-
+/* FUNCTION TO DRAW FOOD AND SNAKE */
function draw() {
// Clear the canvas
ctx.clearRect(0, 0, canvasSize, canvasSize);
+
// Draw the snake
ctx.fillStyle = "#00FF00";
for (let i = 0; i < snake.length; i++) {
- ctx.fillRect(snake[i].x * boxSize, snake[i].y * boxSize, boxSize, boxSize);
+ const isHead = i === 0;
+ ctx.fillStyle = isHead ? "#00FF00" : "#008000"; //Head is green, body is dark green
+ ctx.beginPath();
+ ctx.arc((snake[i].x + 0.5) * boxSize, (snake[i].y + 0.5) * boxSize, boxSize / 2, 0, 2 * Math.PI);
+ ctx.fill();
+ ctx.closePath();
+ //ctx.fillRect(snake[i].x * boxSize, snake[i].y * boxSize, boxSize, boxSize);
}
// Draw the food
ctx.fillStyle = "#FF0000";
- ctx.fillRect(food.x * boxSize, food.y * boxSize, boxSize, boxSize);
+ ctx.beginPath();
+ ctx.arc((food.x + 0.5) * boxSize, (food.y + 0.5) * boxSize, boxSize / 2, 0, 2 * Math.PI);
+ ctx.fill();
+ ctx.closePath();
}
function generateFood() {
food.x = Math.floor(Math.random() * (canvasSize / boxSize));
food.y = Math.floor(Math.random() * (canvasSize / boxSize));
+
+
+ if (currentScore > highScore){
+ highScore = currentScore;
+ localStorage.setItem('highScore', highScore);
+ updateHighScore();
+ }
+ updateScore();
}
+/* FUNCTION TO UPDATE SNAKE MOVEMENT AND UPDATE FOOD */
function update() {
// Move the snake
let newHead = { x: snake[0].x, y: snake[0].y };
@@ -55,6 +78,7 @@ function update() {
if (newHead.x === food.x && newHead.y === food.y) {
snake.unshift({ x: food.x, y: food.y });
generateFood();
+ currentScore += 5;
} else {
// Remove the tail if no collision with food
snake.pop();
@@ -63,7 +87,7 @@ function update() {
// Check for collision with walls
if (newHead.x < 0 || newHead.x * boxSize >= canvasSize || newHead.y < 0 || newHead.y * boxSize >= canvasSize) {
// Game over
- alert("Game Over!");
+ alert(`Game Over! Your score ${currentScore}`);
resetGame();
return;
}
@@ -72,7 +96,7 @@ function update() {
for (let i = 1; i < snake.length; i++) {
if (newHead.x === snake[i].x && newHead.y === snake[i].y) {
// Game over
- alert("Game Over!");
+ alert(`Game Over! Your score ${currentScore}`);
resetGame();
return;
}
@@ -85,20 +109,34 @@ function update() {
draw();
}
+/* PAUSE & RESET GAME */
function resetGame() {
snake = [{ x: 10, y: 10 }];
generateFood();
direction = "right";
+ currentScore = 0;
+
+ updateScore();
+ updateHighScore();
+}
+function initHighScore() {
+ const storedHighScore = localStorage.getItem('highScore');
+ if (storedHighScore) {
+ highScore = parseInt(storedHighScore);
+ updateHighScore();
+ }
}
+// Generate initial food and start the game loop
+initHighScore();
// Generate initial food and start the game loop
generateFood();
-// setInterval(update, 100);
function startGame() {
if (!nIntervId) {
nIntervId = setInterval(update, 100);
}
+
}
function stopGame() {
@@ -109,7 +147,7 @@ function stopGame() {
}
-// Handle arrow key controls
+// HANDLE ARROW KEY CONTROLS
document.addEventListener("keydown", (e) => {
switch (e.key) {
case "ArrowUp":
@@ -125,4 +163,30 @@ document.addEventListener("keydown", (e) => {
direction = "right";
break;
}
-});
\ No newline at end of file
+});
+
+
+
+
+// updates Scores and High Scores
+
+function updateHighScore(){
+ document.getElementById('high-score').textContent = `High Score ${highScore}`;
+}
+
+function updateScore(){
+ document.getElementById('score').textContent = `Score: ${currentScore}`;
+}
+
+
+
+
+/* TEST METHODS/FUNCTIONS */
+// Add a click event listener to the canvas
+//canvas.addEventListener("click", function (e) {
+ // Get the coordinates of the click relative to the canvas
+ //var x = e.clientX - canvas.getBoundingClientRect().left;
+ //var y = e.clientY - canvas.getBoundingClientRect().top;
+ // Log the coordinates to the console
+ //cl(`Clicked at coordinates: X=${x}, Y=${y}`);
+//});
\ No newline at end of file
diff --git a/js/scores.js b/js/scores.js
new file mode 100644
index 0000000..e69de29
diff --git a/pages/game.html b/pages/game.html
new file mode 100644
index 0000000..2302c20
--- /dev/null
+++ b/pages/game.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Classic Snake Game
+
+
+
+
+
+ Welcome To The EastCode's Classic Snake Game
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/scores.html b/pages/scores.html
new file mode 100644
index 0000000..e69de29