{"id":27867909,"url":"https://github.com/jjteoh-thewebdev/html-canvas-snake","last_synced_at":"2025-06-13T04:04:38.174Z","repository":{"id":286239803,"uuid":"960337163","full_name":"jjteoh-thewebdev/html-canvas-snake","owner":"jjteoh-thewebdev","description":"Nokia classic Snake game built with HTML Canvas","archived":false,"fork":false,"pushed_at":"2025-04-06T07:08:02.000Z","size":1180,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-04T22:55:23.876Z","etag":null,"topics":["functional-programming","html-canvas","javascript"],"latest_commit_sha":null,"homepage":"https://jjteoh-thewebdev.github.io/html-canvas-snake/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jjteoh-thewebdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-04T09:03:22.000Z","updated_at":"2025-04-06T06:38:33.000Z","dependencies_parsed_at":"2025-04-05T07:22:48.199Z","dependency_job_id":null,"html_url":"https://github.com/jjteoh-thewebdev/html-canvas-snake","commit_stats":null,"previous_names":["jjteoh-thewebdev/html-canvas-snake"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjteoh-thewebdev%2Fhtml-canvas-snake","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjteoh-thewebdev%2Fhtml-canvas-snake/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjteoh-thewebdev%2Fhtml-canvas-snake/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjteoh-thewebdev%2Fhtml-canvas-snake/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jjteoh-thewebdev","download_url":"https://codeload.github.com/jjteoh-thewebdev/html-canvas-snake/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252411816,"owners_count":21743606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["functional-programming","html-canvas","javascript"],"created_at":"2025-05-04T22:55:25.237Z","updated_at":"2025-05-04T22:55:25.764Z","avatar_url":"https://github.com/jjteoh-thewebdev.png","language":"JavaScript","readme":"# Classic Snake Game 🐍\n\nA modern implementation of the classic Nokia Snake game using HTML Canvas and JavaScript. Play it right in your browser!\n\n![Snake Game Screenshot](preview.gif)\n\n\n[Live Preview](https://jjteoh-thewebdev.github.io/html-canvas-snake/)\n\n## Features 🎮\n\n- 🎯 Classic Snake gameplay with a modern twist\n- 📱 Responsive design that works on all devices\n- 🎨 Beautiful color gradient snake\n- 🕹️ Both keyboard and touch controls\n- ⚡ Smooth performance with optimized game loop\n- 🏆 Score tracking and game over screen\n\n## How to Play 🕹️\n\n1. Use arrow keys (↑, ↓, ←, →) or WASD to move the snake\n2. Eat the red food squares to grow longer\n3. Avoid hitting yourself\n4. The snake wraps around when hitting walls\n5. Game speed increases(slither faster) as you eat more food\n\n## Getting Started 🚀\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/yourusername/html-canvas-snake.git\n```\n\n2. Open `index.html` in your browser or run `npx serve` if you have node.js installed locally.\n\n3. Start playing!\n\n## Project Structure 📁\n\n```\nhtml-canvas-snake/\n├── index.html      # Main HTML file\n├── style.css       # Game styling\n├── script.js       # Game logic\n├── tutorial.md     # Guides on building the game\n└── README.md       # Project documentation\n```\n\n## Technical Details 💻\n\n- Built with vanilla JavaScript\n- Uses HTML5 Canvas for rendering\n- Implements with functional programming style\n- Game loop using `setInterval`\n- Responsive design using CSS Flexbox\n\n## Key concepts? 🤔\n\nThis project demonstrates:\n- HTML Canvas basics\n- Game loop implementation\n- Collision detection\n- Controls with JS events\n- Responsive design\n- Modern JavaScript features\n\n## License 📄\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## Credits 🙏\n\n- Inspired by the classic Nokia Snake game\n- Food eaten sound effect by [Ribhav Agrawal](https://pixabay.com/users/ribhavagrawal-39286533/)\n\n- Game over sound effect by [FoxBoyTails](https://pixabay.com/users/foxboytails-49447089)\n\n- Easter Egg video by [CuriosityShorts](https://www.youtube.com/watch?v=WAHoqt2y77k)\n\n\n\n*Enjoy the game? Star the repository and share it with your friends! ⭐*\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjteoh-thewebdev%2Fhtml-canvas-snake","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjjteoh-thewebdev%2Fhtml-canvas-snake","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjteoh-thewebdev%2Fhtml-canvas-snake/lists"}