Description

A classic snake game enhanced with various add-on features, offering players multiple ways to enjoy the gameplay.

I wanted to create a game that felt more interactive than my Sudoku game/solver. Initially, I considered making Flappy Bird, but I realized it might be too advanced for my current skill level. So, I decided to take a simpler and more classic approach. I’m not entirely sure what led me to choose a Snake game, but after giving it a lot of thought, I believe it’s one of the most beginner-friendly games to design from scratch.

When I say 'from scratch,' I mean it literally. I had no prior knowledge of game design—just a basic understanding that I needed a game loop where everything would take place. While I knew how the Snake game was played, I had no clue how to code it. I began with a simple approach: allocating a blank space as the 'playfield' and using <div> elements to represent each part of the snake. By manipulating their 'style' attributes to change their position with each iteration of the loop, I made the snake move. Everything seemed fine at first, but eventually, this happened.

I was overcomplicating things, so I decided to take a step back and redesign the whole approach. While I know it’s valuable to learn by figuring things out on my own, there’s no need to reinvent the wheel when the solution is already out there. I spent some time researching, and it turns out the way it’s supposed to be coded is much simpler than I originally thought. Once I understood the core logic, I had no problem finishing the game.

However, I didn’t stop there because the game felt too basic. I added some features to make it more engaging, and I encourage you to discover them on your own. There aren’t many, but you probably won’t find them in other 'classic' Snake games. Enjoy!

  • Navigate (WASD/Arrow keys/buttons): redirect the snake movement.
  • Grow (button): grow snake in-place. Added for testing, but why not let the users experience it too?
  • Start/Pause/Resume (P/button): Start/pause/resume the game. Some modifications can only happen when game is paused.
  • Speed up (Spacebar/button): Speed up the snake when hold.
  • Grid resizing (slider): adjusting the size of the grid (requires reset)
  • Game mode (button): choose between various game modes (requires reset)
  • Grid toggle (button): Toggle/untoggle grid. Right-click to reduce grid visibility.
  • Reset (button): Reset the game state. Some modifications requires the game to be reset in order to apply.
  • Designer mode: allow players to place blocks in the playfield
  • Maze mode: the whole playfield is a maze. If players can navigate the snake toward the apple, they win.
  • Customizable snake: allow players to upload any image and it will be used as a snake's body part.
  • Levels: players advance to the next mode once their snake reaches a certain length.
  • Scoreboard: update the score board and the ranking if users' score is higher than pre-defined scores.
  • Sound: add sound effects when eating apple or colliding against wall/self.
  • Timer: a countdown that increases slightly every time the snake eats an apple, adding more tension for the players.
  • To be updated