Emotional Snake

Important

This game was written in 2 days for the hackathon.

Some things did not age well ☹️ since 2020 – hackathon website is not working anymore :(

Winner of The Lucky Wheel Hackathon!

Game link | Video about the game

A 3D snake game written in threejs, which uses Tensorflow (ML) to control the snake with head movements. Move your head left and right to control the snake and open your mouth to make the snake slower! All magic is rendered on the screen using Canvas API.

• To run the game: npm start and visit https://localhost:8080/ (It uses a self-signed HTTPS certificate to serve frontend. This is required for some of the API's.).
• Or visit application link directly from your mobile browser ( Android are supported).

Compatibility

• The game is compatible with Desktop and Mobile devices, but Mobile devices are recommended, because of the smaller face-to-camera distance.
• The game is tested in iOS Safari (share functionality is limited), Android Chrome, Desktop Chrome, Desktop Firefox.
• Access to the camera is required to control the snake with head movements, please allow when prompted.
• Head tracking feature can be less accurate on low-end mobile phones because of the frontal camera resolution.

How to play?

• Game uses your phone's front camera. Position your face in front of your phone!
• Make sure you have no more than 20-40 cm between your face and your camera.
• Ensure there is enough light for the face to be visible and clear. The whole face should be in the frame.
• Make short head movements to the left and to the right to control the snake accordingly.
• Return head to the central position between the moves.
• Open your mouth in case you are in trouble! The snake will slow down!

Web API's used

• Image Capture API: to grab photos of the face during the gameplay to generate a GIF at the end of the game (a fallback is used on iOS)
• Web Speech API: to read encouraging phrases during the gameplay
• Web Audio API: to play music and generate sound effects
• WebWorkers API: to generate GIF in the foreground
• Navigator.share(): to share a GIF at the end of the game (iOS fallbacks to downloading the image)
• Canvas API: to render the game

Credits

• Mr.doob for the three.js
• Jeeliz for the jeelizFaceFilter
• Yahoo for the gifshot
• mohayonao for the adsr-envelope
• lodash for the lodash.throttle
• AndresMWeber for the 4DSnake

Press

• Oficial website of the Lucky Wheel Hackathon
• itbusiness.hu