diff --git a/projects/snake/index.html b/projects/snake/index.html
index d8b055e..2d0f3b1 100644
--- a/projects/snake/index.html
+++ b/projects/snake/index.html
@@ -26,6 +26,16 @@
Snake Game
+
+
+
+
+
diff --git a/projects/snake/main.js b/projects/snake/main.js
index 529d858..4a13320 100644
--- a/projects/snake/main.js
+++ b/projects/snake/main.js
@@ -3,6 +3,7 @@ import { ScoreManager } from "./score.js";
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const size = 20;
+let gameMode = "normal";
// ------------------ INITIALIZE SNAKES ------------------ //
let snakeA = [{ x: 3, y: 3 }];
@@ -28,6 +29,7 @@ function reset() {
gameRunning = true;
gamePaused = false;
updateButtonText();
+ gameMode = document.getElementById("mode").value;
draw();
}
@@ -41,8 +43,8 @@ function spawnFood() {
function tick() {
if (!gameRunning || gamePaused) return;
- moveSnake(snakeA, dirA, "A");
- moveSnake(snakeB, dirB, "B");
+ if(!moveSnake(snakeA, dirA, "A")) return;
+ if(!moveSnake(snakeB, dirB, "B")) return;
if (checkCollision(snakeA) || checkCollision(snakeB) || checkSnakeCollision(snakeA, snakeB)) {
let { scoreA, scoreB } = ScoreManager.getScores();
@@ -57,8 +59,30 @@ function tick() {
function moveSnake(snake, dir, player) {
const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
- head.x = (head.x + canvas.width / size) % (canvas.width / size);
- head.y = (head.y + canvas.height / size) % (canvas.height / size);
+ // head.x = (head.x + canvas.width / size) % (canvas.width / size);
+ // head.y = (head.y + canvas.height / size) % (canvas.height / size);
+ if (gameMode === "normal") {
+
+ head.x = (head.x + canvas.width / size) % (canvas.width / size);
+ head.y = (head.y + canvas.height / size) % (canvas.height / size);
+} else {
+
+ if (
+ head.x < 0 ||
+ head.x >= canvas.width / size ||
+ head.y < 0 ||
+ head.y >= canvas.height / size
+ ) {
+ const winner = player === "A" ? "Player B" : "Player A";
+ stop();
+ gameRunning = false;
+ gamePaused = false;
+ updateButtonText();
+ gameOver(winner);
+ return false;
+ }
+}
+
snake.unshift(head);
@@ -68,6 +92,8 @@ function moveSnake(snake, dir, player) {
} else {
snake.pop();
}
+
+ return true;
}
function checkCollision(snake) {
@@ -112,6 +138,12 @@ function draw() {
for (let y = 0; y < canvas.height; y += size) {
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke();
}
+ if (gameMode === "boundary") {
+ ctx.strokeStyle = "#ff0000";
+ ctx.lineWidth = 3;
+ ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
+}
+
// Pause overlay
if (gamePaused) {
@@ -182,7 +214,9 @@ document.addEventListener('keydown', (e) => {
});
// ------------------ EVENT LISTENERS ------------------ //
-
+document.getElementById("mode").addEventListener("change", function () {
+ gameMode = this.value;
+});
document.getElementById('startBtn').addEventListener('click', handleButtonClick);
document.getElementById('speed').addEventListener('input', function () {
if (gameRunning && !gamePaused) {
diff --git a/projects/snake/styles.css b/projects/snake/styles.css
index 63f2c73..e898f38 100644
--- a/projects/snake/styles.css
+++ b/projects/snake/styles.css
@@ -83,6 +83,21 @@ input[type="range"] {
width: 120px;
margin-left: 10px;
}
+#mode {
+ background-color: #2b2b44;
+ color: #fff;
+ border: 2px solid #00ff00;
+ border-radius: 10px;
+ padding: 6px 12px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: 0.2s ease;
+
+}
+
+.mode-container{
+ margin-left: 7.5rem;
+}
.rules {