🐍 snake-the-game

My attempt at recreating the classic retro game SNAKE in vanilla JS!

⚠️ Hit the wall or the snake itself and it's game over! How high of a score can you get?!

Almost entirely made with the canvas element.

---

Features include:

• 🐍 eventListners to enable the use of the keyboard
• 🍎 JS collision detection to make the snake grow longer & for game over
• 🌟 High score saved to localStorage
• ⚡ Game speend increases as the score gets higher with aid of setTimeout
• 🎵 audio implemented for maximum user experience
• 🔕 Button with the functionality to toggle .muteing the page
• 🕹️ Personalised favicon for the page
• 🎨 flexbox and CSS transitions

Main learning outcomes => working with canvas and managing a complex game state.

---

Screenshots:

---

Notes on the <canvas> element and accessability:

Canvas content is not exposed to accessibility tools as semantic HTML is. In general, you should avoid using canvas in an accessible website or app. More info availble on MDN.

---

Still to do:

• Research resposive design for canvas & unit testing for canvas
• Add extra game features:
• one could be a coloured cube to avoid. Will flash and disappear after 5 secs.
• one could be bonus food to catch for extra points, again disappear after a few secs.

---

⭐ Hosted on GitHub pages ⭐