/warsawjs-workshop-25-snake-1

A classic Snake :snake: game in React and SVG

MIT LicenseMIT

warsawjs-workshop-25-snake

WarsawJS Workshop#25: Snake 🐍 - remake of a classic mobile game in React and SVG

Snake demo

Playable demo: https://mhagmajer.github.io/snake-react/

Features

Essential

  • 🔀 Ability to move the snake's head in the main four directions (⬅️⬆️➡️⬇️). The board is continuous - eg. crossing the right edge makes the snake appear on the left edge.
    • Tip: Since onKeyDown only works for focused elements and svg is not focusable, it's best to attach keydown event handler directly to document.
  • 🍎 Emergence of edible fruits at random time and place which make the snake grow once hit with its head. Fruits should disappear (rot) after some time.
  • 🙊 Game over when snake's head touches another part of its body.
  • ⌛ Pausing the game.
  • 🔢 Displaying live score of the game (running time, length of the snake).

Optional

  • 🍇🍨🍌 Different shapes of the fruits with various effects.
  • :trollface: A fun snake's head.
  • ⚙️ Settings panel where you can adjust the speed, size of the board and more while the game is being played.
  • 👪 Second player's snake directed by WSAD keys.
  • ↪️ Ability to turn snake's head by an arbitrary degree.
  • 📷 Export screenshot of the game's board to an .svg file
    • Tip: ReactDOMServer.renderToStaticMarkup
  • 💡 Your ideas!

Step by step

  1. Get the latest stable version of Node installed on your machine.
  2. Follow the create-react-app guide to create a basic React project named warsawjs-workshop-25-snake.
  3. Create a new public repository on GitHub called warsawjs-workshop-25-snake and commit the initial version.
  4. Code all essential features and as many optional ones as you like.
  5. Deploy your app to GitHub pages for everyone to see.

Resources

Please refrain from using any third-party libraries. Let's keep the code as clean as possible. You're welcome to use any public domain SVG images available for your project.