An interactive web game that simulates the classic water ring toss toy. Players control two buttons to release water jets, guiding floating rings onto prongs. The game combines physics, patience, and precision, offering a nostalgic yet engaging challenge. The goal is to land as many rings as possible on the prongs using the water currents generated by the buttons.
This project was inspired by the classic handheld water ring-toss games, where pressing buttons launched tiny rings onto pegs in a water-filled container. I wanted to capture that charm while experimenting with digital movement, floating physics, and whimsical aesthetics.
In adapting this concept into a digital format, the goal is to retain the tactile feel of the original while introducing interactive elements that enhance the experience. Players will control two virtual buttons, each corresponding to a water jet positioned at the base of the tank. Pressing these buttons releases a stream of water, propelling the rings into motion. The challenge lies in mastering the force and timing of the water currents to guide the rings onto the prongs.
The development of the Water and Rings game involved several key steps, including setting up the 3D environment, implementing physics for the water and rings, and creating an intuitive user interface.
Set up 3D Space including a scene, camera, renderer, and 3D assets with Three.js.
Implement physics for the water tank, water jets, and ring movement using Ammo.js.
Add user interface elements to control the water jets with keys and mouse.
Add styling on page including layout, colors, and animations.
