This is a web-based implementation of the classic arcade game, Snake. It is built with modern web technologies but designed with a nostalgic, retro feel, featuring pixel-art fonts, and a dark-mode UI - all while retaining a simple and easy-to-read code 🔢.
- Classic Gameplay: Control the snake to eat food, grow longer, and avoid collisions with the walls or its own tail.
- Score Tracking: Your score increases with each piece of food eaten.
- Responsive Design: The game layout adapts to different screen sizes, from mobile devices to desktops.
- Game State Management: Clear "Game Over" and "Start" screens to manage the game flow.
- Interactive Controls:
- Keyboard: Use the Arrow Keys (
↑,↓,←,→) to direct the snake. - Mouse: Use the on-screen "Start Game" and "Pause" buttons.
- Keyboard: Use the Arrow Keys (
The game's visual style is heavily inspired by classic 8-bit arcade games:
- Font: Uses the "Press Start 2P" font from Google Fonts to achieve a pixelated, retro look.
- Color Palette: A dark theme (
bg-gray-900) with high-contrast, vibrant colors for game elements (green, yellow, red) to mimic old-school monitor displays. - Layout: Styled with Tailwind CSS for a clean, modern, and responsive user interface.
- HTML5: For the basic structure and
<canvas>element. - CSS3: With Tailwind CSS for utility-first styling.
- JavaScript: For all the game logic, including rendering, controls, and state management.
- Open the
index.htmlfile in your web browser. - Click the "Start Game" button to begin.
- Use the Arrow Keys on your keyboard to control the snake's direction.
- The objective is to eat the food that appears on the screen.
- Avoid running into the walls or the snake's own body.
- The game ends when you collide with an obstacle.
- Press "Start Game" again to try and beat your score!
This project was created as part of a web development learning exercise.