Classic Snake. Open snake.html
and use the arrow keys ⬅️ ⬆️ ➡️ ⬇️ to move!
(Hint: you can accelerate.)
Note: This was prototyped in Microsoft Edge on a 24" monitor. Your experience may be suboptimal on significantly smaller or larger screens, or (less likely) other browsers.
HOW: Plain HTML + CSS + JS. No front-end libraries or game engines. This implementation is simply a dynamic CSS grid.
WHY: Practising the basics of web/front-end development. I began an accidental foray into web dev when I found myself in a team of three at the first Sound of AI hackathon, building a browser-based music visualiser based on the Cyanite API. This foray continued by stumbling on (and participating in) the Boolean Coding Week, a basic crash course in web development with Tic-Tac-Toe and Space Invaders as live examples. This ended on a Friday; by Saturday evening, I had built Snake.
classList
of a cell (or multiple cells) in functions like eraseSnake
, drawBlock
, drawFood
, etc. during runtime. Most instances work fine though—just refresh and restart if something funny happens.
- Fix disappearing snake bug as mentioned: #1
- Make CSS layout responsive (resizeable) to accommodate different screen sizes