diff --git a/web-app/js/projects.js b/web-app/js/projects.js
index ac7de39..24e291d 100644
--- a/web-app/js/projects.js
+++ b/web-app/js/projects.js
@@ -1,4 +1,4 @@
-// Project Registry
+// Project Registry
// Each project's HTML and logic lives in its own file under js/projects/
//To Prevent duplicate intialisation
@@ -6,40 +6,12 @@ let activeProject=null;
function getProjectHTML(projectName) {
const projects = {
- 'rock-paper-scissor': getRockPaperScissorHTML(),
- 'dice-rolling': getDiceRollingHTML(),
- 'coin-flip': getCoinFlipHTML(),
- 'number-guessing': getNumberGuessingHTML(),
- 'hangman': getHangmanHTML(),
- 'flames': getFlamesHTML(),
- 'emoji-memory': getEmojiMemoryGameHTML(),
- 'fibonacci': getFibonacciHTML(),
- 'progression-recognizer': getProgressionRecognizerHTML(),
- 'pascal-triangle': getPascalTriangleHTML(),
- 'armstrong': getArmstrongHTML(),
- 'calculator': getCalculatorHTML(),
- 'collatz': getCollatzHTML(),
- 'prime-analyzer': getPrimeAnalyzerHTML(),
- 'projectile-motion': getProjectileMotionHTML(),
- 'coordinate-polar-transform': getCoordinatePolarTransformHTML(),
- 'derivative-calculator': getDerivativeCalculatorHTML(),
- 'morse-code': getMorseCodeHTML(),
- 'tower-of-hanoi': getTowerOfHanoiHTML(),
- 'number-converter': getNumberConverterHTML(),
- 'typing-speed-tester': getTypingSpeedTesterHTML(),
- 'snake-game': getsnakeGameHTML(),
- 'password-forge': getPasswordForgeHTML(),
- 'whack-a-mole': getWhackaMoleHTML(),
- 'tic-tac-toe': () => getTicTacToeHTML(),
'rock-paper-scissor': () => getRockPaperScissorHTML(),
'dice-rolling': () => getDiceRollingHTML(),
'coin-flip': () => getCoinFlipHTML(),
- 'Blackjack-21': () => getBlackjackHTML(),
'number-guessing': () => getNumberGuessingHTML(),
'hangman': () => getHangmanHTML(),
- 'word-scramble': () => getWordScrambleHTML(),
'flames': () => getFlamesHTML(),
- 'dots-boxes': () => getDotsBoxesHTML(),
'emoji-memory': () => getEmojiMemoryGameHTML(),
'fibonacci': () => getFibonacciHTML(),
'progression-recognizer': () => getProgressionRecognizerHTML(),
@@ -57,13 +29,17 @@ function getProjectHTML(projectName) {
'typing-speed-tester': () => getTypingSpeedTesterHTML(),
'snake-game': () => getSnakeGameHTML(),
'password-forge': () => getPasswordForgeHTML(),
- 'math-quiz': () => getMathQuizHTML(),
'whack-a-mole': () => getWhackaMoleHTML(),
+ 'tic-tac-toe': () => getTicTacToeHTML(),
+ 'blackjack-21': () => getBlackjackHTML(),
+ 'word-scramble': () => getWordScrambleHTML(),
+ 'dots-boxes': () => getDotsBoxesHTML(),
+ 'math-quiz': () => getMathQuizHTML(),
'simon-says': () => getSimonSaysHTML(),
'spot-the-difference': () => getSpotTheDifferenceHTML(),
'flappy-game': () => getFlappyGameHTML(),
'2048-game': () => get2048GameHTML(),
- "productive-pet": () => getProductivePetHTML(),
+ 'productive-pet': () => getProductivePetHTML(),
'color-palette': () => getColorPaletteHTML(),
};
diff --git a/web-app/js/projects/snake.js b/web-app/js/projects/snake.js
index fb4a23d..deef454 100644
--- a/web-app/js/projects/snake.js
+++ b/web-app/js/projects/snake.js
@@ -17,6 +17,9 @@ function getSnakeGameHTML() {
+
+
⏸ PAUSED
+
GAME OVER!!
@@ -39,6 +42,7 @@ function getSnakeGameHTML() {
+
@@ -171,6 +175,23 @@ function getSnakeGameHTML() {
padding: 12px 25px;
cursor: pointer;
}
+ #pause-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.6);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 9;
+ color: white;
+}
+
+#pause-overlay h1 {
+ font-size: 3rem;
+}
`;
}
@@ -181,26 +202,29 @@ let speed = 9; // System baseline operational configuration state
let scoreMultiplier = 2; // Baseline multiplier scalar state
let score = 0;
let lastPaintTime = 0;
+let isPaused = false;
let snakeArr = [{ x: 13, y: 10 }];
let food = { x: 6, y: 7 };
// Profile configuration mapping matrices
const CONFIG_DIFFICULTY = {
- easy: { speed: 5, multiplier: 1 },
- medium: { speed: 9, multiplier: 2 },
- hard: { speed: 14, multiplier: 3 }
+ easy: { speed: 5, multiplier: 1 },
+ medium: { speed: 9, multiplier: 2 },
+ hard: { speed: 14, multiplier: 3 }
};
function main(ctime) {
const canvas = document.getElementById('snakeCanvas');
if (!canvas) return; // Exit loop if the game modal has been closed
-
+
window.requestAnimationFrame(main);
if ((ctime - lastPaintTime) / 1000 < 1 / speed) {
return;
}
lastPaintTime = ctime;
- gameEngine();
+ if (!isPaused) {
+ gameEngine();
+ }
}
function isCollide(snake) {
@@ -244,10 +268,10 @@ function gameEngine() {
direction = { x: 0, y: 0 };
document.getElementById('final-score').innerHTML = score;
document.getElementById('game-over-overlay').classList.remove('hidden');
-
+
// Execute persistent local evaluations
checkAndSaveHighScore();
-
+
// Restore controls visibility states
const selector = document.getElementById('difficultySelect');
if (selector) selector.disabled = false;
@@ -297,44 +321,73 @@ function restartGame() {
direction = { x: 1, y: 0 };
snakeArr = [{ x: 13, y: 10 }];
score = 0;
+ isPaused = false;
+
+ const pauseOverlay = document.getElementById('pause-overlay');
+ if (pauseOverlay) {
+ pauseOverlay.classList.add('hidden');
+ }
+
+ const pauseBtn = document.getElementById('pauseGameBtn');
+ if (pauseBtn) {
+ pauseBtn.textContent = 'Pause';
+ }
document.getElementById('score').innerHTML = score;
food = { x: 6, y: 7 };
+
+}
+function togglePause() {
+ const pauseOverlay = document.getElementById('pause-overlay');
+ const pauseBtn = document.getElementById('pauseGameBtn');
+
+ // Don't pause before game starts
+ if (direction.x === 0 && direction.y === 0) return;
+
+ isPaused = !isPaused;
+
+ if (isPaused) {
+ pauseOverlay.classList.remove('hidden');
+ pauseBtn.textContent = 'Resume';
+ } else {
+ pauseOverlay.classList.add('hidden');
+ pauseBtn.textContent = 'Pause';
+ }
}
// Initialize execution listeners
function initSnakeGame() {
window.requestAnimationFrame(main);
-
+
// Set initial historic rendering metrics
updateBestScoreUI();
function restartGame() {
- // Hide game over overlay
- document.getElementById('game-over-overlay').classList.add('hidden');
+ // Hide game over overlay
+ document.getElementById('game-over-overlay').classList.add('hidden');
- // Reset snake
- snakeArr = [{ x: 13, y: 10 }];
+ // Reset snake
+ snakeArr = [{ x: 13, y: 10 }];
- // Reset score
- score = 0;
- document.getElementById('score').innerHTML = score;
+ // Reset score
+ score = 0;
+ document.getElementById('score').innerHTML = score;
- // Reset direction and start moving
- direction = { x: 1, y: 0 };
+ // Reset direction and start moving
+ direction = { x: 1, y: 0 };
- // Generate new food
- food = {
- x: Math.round(2 + (16 - 2) * Math.random()),
- y: Math.round(2 + (16 - 2) * Math.random())
- };
+ // Generate new food
+ food = {
+ x: Math.round(2 + (16 - 2) * Math.random()),
+ y: Math.round(2 + (16 - 2) * Math.random())
+ };
- // Re-enable difficulty selection before start
- if (selector) {
- selector.disabled = true;
- }
+ // Re-enable difficulty selection before start
+ if (selector) {
+ selector.disabled = true;
+ }
- // Reset frame timing
- lastPaintTime = 0;
-}
+ // Reset frame timing
+ lastPaintTime = 0;
+ }
// Map difficulty listener parameters
const selector = document.getElementById('difficultySelect');
@@ -353,7 +406,7 @@ function initSnakeGame() {
});
document.getElementById('restartSnakeBtn').addEventListener('click', restartGame);
-
+ document.getElementById('pauseGameBtn').addEventListener('click', togglePause);
document.getElementById('overlayRestartBtn').addEventListener('click', restartGame);
window.addEventListener('keydown', e => {
@@ -363,7 +416,12 @@ function initSnakeGame() {
selector.disabled = true;
}
}
-
+ if (e.code === 'Space' || e.key.toLowerCase() === 'p') {
+ e.preventDefault();
+ togglePause();
+ return;
+ }
+ if (isPaused) return;
switch (e.key) {
case "ArrowUp": if (direction.y !== 1) { direction.x = 0; direction.y = -1; } break;
case "ArrowDown": if (direction.y !== -1) { direction.x = 0; direction.y = 1; } break;
@@ -386,10 +444,10 @@ function initSnakeGame() {
e.preventDefault();
let touchEndX = e.changedTouches[0].screenX;
let touchEndY = e.changedTouches[0].screenY;
-
+
let dx = touchEndX - touchStartX;
let dy = touchEndY - touchStartY;
-
+
if (Math.abs(dx) > Math.abs(dy)) {
if (dx > 30 && direction.x !== -1) { direction.x = 1; direction.y = 0; }
else if (dx < -30 && direction.x !== 1) { direction.x = -1; direction.y = 0; }