- Open index.html in Chrome or Firefox
- Use your arrow keys to change the snake's direction: up, left, right, and down.
- Eat food to gain points.
- Don't run the snake into the wall, or its own tail.
- Each time the snake eats, the game will get a little bit faster.
This is actually the first thing I've ever built using the Canvas API! It was super fun, but I definitely feel like I'm missing a couple of concepts that would be obvious with more experience.
I started with the simplest possible working version I could write, given the rubric. Then I eliminated most of the bugs and added a couple of easy features (speed increase, end game alert, play btn to initialize/reinitialize the game) before I ran out of time.
I tested this in the latest versions of Chrome, Firefox and Safari.
- ~3 hours of coding time
- client-side app
- vanilla JavaScript
- ES6 where appropriate
- fix end game alert timing
- use requestAnimationFrame instead of setTimeout
- what happens if this is loaded on a mobile device?
- what should the game do if the window is resized during play?
- speed value decrease actually means the game is going faster, convert this into a user-friendly unit in UI
- set upper limit on snake speed?
- canvas lines seem blurry
- add game over screen instead of alert
- make canvas area responsive to screen size (figure out what the ideal canvas size for this game is?)
- disable play button if game in progress or allow pause?
- general UI polish: colors, typography, button styling, graphics
- separate canvas js from game js, break game js down into modules (snake, food, engine)
- super bonus next step: refactor the whole thing with state-based functional approach