UNCAFFEINATED - Snake Game
Game and user interface development by Aiden (A.J.) Ramsden
- W3Schools
- MDN Web Docs
- Advanced CSS Selectors
- :nth-child(odd) selects odd-numbered list items.
- [target="_blank"] selects links that open in a new tab.
- Bootstrap 5.3
- Bootstrap Navbar is used for the top navigation bar in my Snake Game project.
- WebAIM
- WAVE Web Accessibility Evaluation Tool
- Nu HTML Checker
- Google Fonts
- Classic Snake arcade games
- Professor Barry Cumbie, Computer Information Systems, University of North Alabama
- Used class concepts about semantic HTML, validation, accessibility, and responsive web design
- Bootstrap 5.3.0
- Used Bootstrap for the responsive navbar, cards, modal leaderboard, buttons, table, and layout grid
- Google Fonts
- LocalStorage data for:
- Player Name
- Game Difficulty
- Themes (Classic White, Dark Mode, Neon, and Garfield theme)
- Leaderboard Scores
“Now with more snake.”
User Story
I want to create a classic Snake game with a retro style that will run in a browser. I want to save player names and settings. I want to track player high scores on a leaderboard and remember them between games.
- Repo: https://github.com/AJuna345/snake-game
- Deployed App: https://ajuna345.github.io/snake-game/
- Classic Snake arcade gameplay
- This project was inspired by simple retro browser and arcade Snake games
- I used a clean one-page layout with a separate How to Play page, a settings form, and a modal leaderboard to make the game more polished and user-friendly
Wireframe images for Snake Game
- Playable Snake game with Bootstrap navbar
- Player Name and Settings
- Player name validation
- Theme selector
- Difficulty selector
- How to Play page
- Keyboard controls (up, down, left, right)
- LocalStorage used to store player settings and leaderboard data
- Modal leaderboard with a button to clear all scores
- Accessible status announcements with
aria-live - Garfield Easter egg theme
This code adds the Garfield Easter Egg theme when the player enters the name Garfield. It works with the DOM by finding the theme dropdown menu in the page, checking whether a Garfield option is already inside that menu, and creating a new <option> element if it is missing. Then the JavaScript code adds that new option into the dropdown, changes the selected value, updates the <body> class so the page uses the Garfield theme colors, saves that choice in local storage, and redraws everything so the game theme updates immediately. This is a good example of JavaScript changing existing page elements, adding new DOM content, and saving a user setting.
function unlockGarfieldTheme() {
const themeSelect = document.getElementById('themeSelect');
let garfieldOption = themeSelect.querySelector('option[value="garfield"]');
if (!garfieldOption) {
garfieldOption = document.createElement('option');
garfieldOption.value = 'garfield';
garfieldOption.textContent = 'Garfield (Monday Mode)';
themeSelect.appendChild(garfieldOption);
}
themeSelect.value = 'garfield';
document.body.className = 'theme-garfield';
saveTheme('garfield');
setTimeout(() => {
updateThemeColors();
if (canvas && ctx) draw();
}, 50);
}