SpyBots

SpyBots! Relive your spyKids days.

Comment 1

Inspiration 💡

One of our members found out about Handtrack.js and we wanted to try integrating it into our game to allow players to enjoy a more hands-on game. Inspired by the movie SpyKids, we wanted to emulate an escape game, adopting the robot character and creating a maze for it to find its way out. We wanted to make it more exciting for players, and added lasers, with varying difficulty levels to the maze!

What it does 🔍

SpyBots is a web-game that uses ml to track player’s hand movements. The Robot character’s movements will correspond to the player's hand movements. The main aim is to help the robot escape the maze without touching the lasers! With the intent to give players an exciting experience, there are varying levels of difficulties for them to explore! (Hint: sssiiiiiizzzzlle its getting hot in here....)

How we built it 🔧

  • Time spent: 48 Hours Hackathon
  • We built on top of handTracking.js.
  • Tech stack used includes javascript, html and css.

Challenges we ran into 🏃‍♂️

  • Initially we tried adapting handTracking.js into reactJs. However due to time constraints, we stuck to vanilla JS.
  • Issues with getting Handtrack.js to work with React.js, and lack of examples available. In the end we had to resort back to HTML, CSS and JS to get it to work properly
  • Initially we did not know how to use Handtrack.js and there was a bit of confusion on how it worked and what values it returned.
  • There was also a lack of guidance on the extent of application that Handtrack.js could offer, hence it was challenging when we tried to apply the package to aid in the ideas that we initially had.

Accomplishments that we're proud of 🏅

  • Managing to create many separate levels for the SpySneak Game and implement a few different game mechanics as well.
  • Manipulated the output of the handtracking.js and apply it onto canvas.
  • Learning to use ML related packages as well as using real-time video to aid in our game.

What we learned 🧠

We ventured into other packages that were an extension to what handtracking.js offered, such as Hammer.js and Jammer.js. We also discovered other projects that hinges on handTracker,js, such as SkyFall. We also experimented with physics.js and matter.js, which we believe will be useful in the extension of this project.

What's next for SpyBots ⏭️

  • More advanced gameplay mechanics, such as drones that can chase the player character
  • Better UI for within the game and for the landing page
  • Additional games that also implement the handtrack.js as part of the gameplay
  • Training our own hand-tracking model with tensorflow for the specific gestures we need for the game, to reduce the time spent identifying unnecessary gestures or markers like the face
  • advancing in the manipulation of hand tracking output, to be able to replace mouse functions (mousedown, mouseup etc) with handtracks.

Icons from freepik.com

Built With

Share this project:

Updates