Build a FootBall Dribbler Game Using Google AI Studio

#devchallenge #weekendchallenge #gemini #discuss

DEV Weekend Challenge: Passion Edition Submission

This is a submission for Weekend Challenge: Passion Edition

Back Story

I have always loved playing football and cricket. It much more about the learning process. When you start learning you are not out in the field. You learn slowly. You learn to dribble, drift, passing, kicking. Things from first principles. That where the fun is. We may start hating the sports when we lose or are not good enough. But Sometimes Your rediscover your learnings. You rediscover your fun. This is the reason i build this project. Dribbling is the most addictive activity. I would have spend countless hours dribbling.

What I Built

I build a computer vision enabled football dribble game. The rules are simple keep the ball up in the air like dribbling, a random goal post appears on the screen, your ball touches the goal post. Yes you guessed it right, IT"S A GOOALLLLLL. EXCITEDDD !!!!

I have played the game myself multiple time this weekend. Trust Me. As a developer if you like what you build, you get that sense that other will like it too. I hope you play my game. You will love it too. It so fun. I do have so many ideas around it.

Would love if you play and give me feedback, as to how i can improve this. I also have this domain. 10min.in. I might add more exercises in the future, games as well.

One of the thought that I have is to make it work in real time with multiplier, so that you can play with friends as well. This would be so fun in google meet.

This works fully local. Using google mediapipe library. I really like this guys project who build computer visions games and staff (funwithcomputervision) . The very core element of the games is usually so creative, and practical

Demo ->

You can play and remix this as well

https://ai.studio/apps/0b5b6610-8b59-48eb-acc8-01f11f66e037

Code

The main idea behind it is to use the mediapipe library for the computer vision part.

import { FilesetResolver, PoseLandmarker } from '@mediapipe/tasks-vision';

async function initMediaPipe() {
      try {
        setLoadingProgress('Initializing MediaPipe...');
        const vision = await FilesetResolver.forVisionTasks(
          'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm'
        );

        if (!active) return;
        setLoadingProgress('Loading pose networks...');

        const landmarker = await PoseLandmarker.createFromOptions(vision, {
          baseOptions: {
            modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/pose_landmarker/pose_landmarker_lite/float16/latest/pose_landmarker_lite.task',
            delegate: 'GPU',
          },
          runningMode: 'VIDEO',
          numPoses: 1,
          minPoseDetectionConfidence: 0.5,
          minPosePresenceConfidence: 0.5,
          minTrackingConfidence: 0.5,
        });

        if (!active) return;
        landmarkerRef.current = landmarker;
        setIsLoadingModel(false);
        setLoadingProgress('ready');
      } catch (err) {
        console.error('Failed to load MediaPipe PoseLandmarker', err);
        setLoadingProgress('failed');
      }
    }

    initMediaPipe();

We use the PoseNet to get the PoseLandmarker of the legs. Then we basically check for the collision of the football location with the values from the poselandmarker.


leftKnee  = landmarks[25]
rightKnee = landmarks[26]
leftAnkle = landmarks[27]
rightAnkle = landmarks[28]
leftToe   = landmarks[31]
rightToe  = landmarks[32]

Tracking the Joints position

Video Capture ->

Uses navigator.mediaDevices.getUserMedia().
Webcam video is hidden.
The video frame is drawn onto a .

Two game modes

1.mode === 'juggle' - Ball falling to the floor means game drop/reset.

2.mode === 'dribble' -Ball bounces on the turf floor.

We have Time based game play as well. You can play for 1min, 5min, or 10min, or unlimited.

We have football type as well, for the rest of the football teams remaining in fifa. Argentina 🇦🇷, England 🏴󠁧󠁢󠁥󠁮󠁧󠁿, France 🇫🇷, Spain 🇪🇸. Which team are you supporting?

I really thought people will share their score on twitter/fb. So i have added a shareable social media link as well. We generate a stats card as well, that you can share with your friends.

Future Outcome

I would love to continue working on this. Think about this if you could play realtime using the mediapipe library. This would be so fun. Really give me the Ready player feels. I am mostly excited that i could build something like this in so much little time. I love and hate ai but we have to adopt to the real.

Feeling of scoring a goal is always fun.

Prize Categories

I am mostly going for the whole all fun project. I think this should also come under google as well. As this project i used google AI Studio to build this.