Making an Interactive Running Game with Head or Body Movement Using TensorFlow.js

Game Applications of TensorFlow.js

Posted by Cheng Kang on 2022-03-08
Running Rabbit by Your Body or Head Movement

You can find the codes from this:

As the user moving their heads (or other gestures according to the models which users trained from the initial block), the runing rabbit move left and right, jump and duck to collect diamonds.

This is a 2D graphic game by using mobilenet in TensorFlow.js, employing VisibilityManager.js and TweenMax.min.js in this entertainment project.

You can find the codes from this Github Link.

  1. Train Your Model
  2. Running Rabbit
  3. Contributors

Train Your Model

You can use Teachable Machine to train your models. For example, I used five catergories: “left”, “up”, “right”, “down”, “forward”. After images recording and training, you should download the trained model, and there are model.json, weights.bin and metadata.json.


Running Rabbit

Move the model files to ./assets and go back to the project root, then open Windows PowerShell to excute:

python -m http.server

Jump Turn Left and Right
image image

Contributors

Email: kangchen@fel.cvut.cz or kangkangsome@gmail.com
Address: G-203, Na Zderaze 269/4, Prague, Czech Republic
Phone: +420-774-318-802

⚠️ This is a prototype made as a side project so the code is not production-ready. Its performance is not optimised so the first load can take a while. I developed and tested it on a Macbook Pro and iPad Pro so if you try it on another device and it doesn’t work or doesn’t look super responsive, I don’t intend to fix it. With that in mind, here’s the live demo above that works with both head and body movements. ⚠️