WarsawJS Workshop#25: Snake 🐍 - remake of a classic mobile game in React and SVG
Playable demo: https://mhagmajer.github.io/snake-react/
- 🔀 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 andsvg
is not focusable, it's best to attachkeydown
event handler directly todocument
.
- Tip: Since
- 🍎 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).
- 🍇🍨🍌 Different shapes of the fruits with various effects.
- 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
- Tip:
- 💡 Your ideas!
- Get the latest stable version of Node installed on your machine.
- Follow the create-react-app guide to create a basic React project named
warsawjs-workshop-25-snake
. - Create a new public repository on GitHub called
warsawjs-workshop-25-snake
and commit the initial version. - Code all essential features and as many optional ones as you like.
- Deploy your app to GitHub pages for everyone to see.
- https://reactjs.org/docs/getting-started.html
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
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.