https://github.com/jjteoh-thewebdev/html-canvas-snake
Nokia classic Snake game built with HTML Canvas
https://github.com/jjteoh-thewebdev/html-canvas-snake
functional-programming html-canvas javascript
Last synced: 10 months ago
JSON representation
Nokia classic Snake game built with HTML Canvas
- Host: GitHub
- URL: https://github.com/jjteoh-thewebdev/html-canvas-snake
- Owner: jjteoh-thewebdev
- License: mit
- Created: 2025-04-04T09:03:22.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-04-06T07:08:02.000Z (12 months ago)
- Last Synced: 2025-05-04T22:55:23.876Z (11 months ago)
- Topics: functional-programming, html-canvas, javascript
- Language: JavaScript
- Homepage: https://jjteoh-thewebdev.github.io/html-canvas-snake/
- Size: 1.13 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Classic Snake Game đ
A modern implementation of the classic Nokia Snake game using HTML Canvas and JavaScript. Play it right in your browser!
[Live Preview](https://jjteoh-thewebdev.github.io/html-canvas-snake/)
## Features đŽ
- đ¯ Classic Snake gameplay with a modern twist
- đą Responsive design that works on all devices
- đ¨ Beautiful color gradient snake
- đšī¸ Both keyboard and touch controls
- ⥠Smooth performance with optimized game loop
- đ Score tracking and game over screen
## How to Play đšī¸
1. Use arrow keys (â, â, â, â) or WASD to move the snake
2. Eat the red food squares to grow longer
3. Avoid hitting yourself
4. The snake wraps around when hitting walls
5. Game speed increases(slither faster) as you eat more food
## Getting Started đ
1. Clone the repository:
```bash
git clone https://github.com/yourusername/html-canvas-snake.git
```
2. Open `index.html` in your browser or run `npx serve` if you have node.js installed locally.
3. Start playing!
## Project Structure đ
```
html-canvas-snake/
âââ index.html # Main HTML file
âââ style.css # Game styling
âââ script.js # Game logic
âââ tutorial.md # Guides on building the game
âââ README.md # Project documentation
```
## Technical Details đģ
- Built with vanilla JavaScript
- Uses HTML5 Canvas for rendering
- Implements with functional programming style
- Game loop using `setInterval`
- Responsive design using CSS Flexbox
## Key concepts? đ¤
This project demonstrates:
- HTML Canvas basics
- Game loop implementation
- Collision detection
- Controls with JS events
- Responsive design
- Modern JavaScript features
## License đ
This project is open source and available under the [MIT License](LICENSE).
## Credits đ
- Inspired by the classic Nokia Snake game
- Food eaten sound effect by [Ribhav Agrawal](https://pixabay.com/users/ribhavagrawal-39286533/)
- Game over sound effect by [FoxBoyTails](https://pixabay.com/users/foxboytails-49447089)
- Easter Egg video by [CuriosityShorts](https://www.youtube.com/watch?v=WAHoqt2y77k)
*Enjoy the game? Star the repository and share it with your friends! â*