@yndksptr: “Main game tanpa nyentuh layar?” 👀🎮 Di Gemini Challenge ini, aku mencoba membuat game 2D berbasis web yang bisa dikontrol langsung menggunakan hand tracking 🤚 Cukup dengan gesture “pinch”, kita bisa ambil objek dan drop ke dalam tas—simple, tapi seru! Yang paling menarik, proses pembuatannya dibantu oleh Google Gemini, mulai dari ide, coding, sampai debugging 🚀 Dan ini adalah prompt yang aku gunakan untuk mengembangkan game ini dengan bantuan Gemini 👇 I would like you to develop a 2D web-based interactive game that utilizes real-time hand tracking through a webcam, built using HTML, CSS, and JavaScript. The core concept of this game revolves around a “pinch and drop” interaction mechanism, where users can control objects on the screen using natural hand gestures. Specifically, the system should leverage a hand tracking library such as MediaPipe Hands or TensorFlow.js to detect and track hand landmarks, particularly focusing on the distance between the thumb tip and index finger tip to determine a “pinch” gesture. When the distance between these two points falls below a defined threshold, the system should interpret this as a grab action, allowing the user to pick up a virtual object. Conversely, when the distance increases beyond the threshold, it should be interpreted as a release action, enabling the user to drop the object. The gameplay should present multiple draggable objects (such as books, bottles, or other simple items) scattered across the screen, along with a designated target area represented as a “bag” or container. When the user performs a pinch gesture over an object, that object should attach to the hand’s tracked position and follow its movement smoothly in real time. If the user moves the object into the target area and releases the pinch gesture, the object should be successfully “dropped” into the bag, triggering a score increase and optionally removing or respawning the object. The game interface should include a visually clean and engaging layout, incorporating elements such as a score counter, optional timer, and a start button. Visual feedback is essential; therefore, the system should display indicators when a pinch is detected (e.g., changing cursor or highlighting the object), as well as simple animations when an object is successfully placed into the target area. From a technical perspective, the implementation should utilize the browser’s getUserMedia API to access the webcam and process the video feed in real time. The coordinates obtained from the hand tracking model must be accurately mapped to the 2D game canvas or DOM elements to ensure precise interaction. Collision detection should be implemented to determine whether an object has been dropped within the bounds of the target area. The code structure should be modular and separated into HTML for layout, CSS for styling, and JavaScript for logic and interaction handling. Additionally, the game should be optimized for performance to ensure smooth interaction without noticeable lag, and the code should include clear comments for readability and maintainability. As an enhancement, you may optionally include additional features such as sound effects for grabbing and dropping objects, simple particle animations upon successful actions, multiple levels or increasing difficulty, and responsiveness across desktop and mobile browsers. The final output should be a fully functional, self-contained front-end application that can run directly in a browser without requiring any backend services, while demonstrating a seamless and intuitive hand-tracking-based interaction experience Gas cobain #googlestudentambassador2026 #geminichallenge #BuildWithGemini #aiforstudentsdents #techinnovationovation #gsa2026

yu

Open In TikTok:

Region: ID

Monday 23 March 2026 16:43:00 GMT