More Personal Projects
Bubble Shooter
Bubble Shooter is a browser‑based arcade game built with HTML, CSS, and JavaScript, designed to recreate the classic match‑3 bubble‑popping experience in a clean and responsive web format. The game uses a straightforward angle‑based shooting system rather than a full physics engine, allowing for predictable and intuitive controls that feel smooth across both desktop and mobile browsers.
The core gameplay revolves around aiming and launching bubbles toward a grid of colored bubbles suspended at the top of the screen. When the launched bubble connects with two or more bubbles of the same color, the group pops and clears space on the board. This simple mechanic creates a satisfying loop of planning, aiming, and reacting as the board gradually shifts and new bubbles appear.
On the technical side, I implemented a lightweight collision‑checking system, a grid manager to track bubble positions, and a basic trigonometry‑based trajectory calculation to determine the bubble’s movement. The rendering and updates run on an efficient loop that keeps performance stable without relying on external libraries or frameworks.
Beyond the core logic, I focused on creating a polished user experience: smooth animations, responsive layout adjustments, clear visual feedback, and a clean UI that keeps the player focused on the action. This project demonstrates my ability to build interactive front‑end experiences, structure game logic cleanly, and deliver a complete, playable browser game using only vanilla web technologies.
RTS-TankCombat
What did I learn while making a 2D RTS Tank Combat similar to the Command and Conquer game?
I implemented pixel-based diagonal movement using the slope formula. When the player clicked on a location with the mouse after selecting the tank image, the tank calculated the optimal path using the slope formula to move diagonally. If the clicked location created a horizontal or vertical path, the tank would move in straight lines along the respective axis using basic algebraic slope logic.
Challanges when coding this game?
One of my challenges during this development process was implementing a normalized vector for diagonal movement. I explored different approaches to achieve this, but due to the demands of full-time work and full-time school, I didn’t have time to fully implement it.
Solution to the problem?
To normalize a vector for diagonal movement, I calculated the direction of the vector by finding the change in position from the tank's starting position to the ending position where the mouse clicked. After calculating the directional vector, the next step is to find the length between the starting and ending points using the Pythagorean theorem. This length is used to normalize the vector, ensuring consistent movement regardless of direction. Normalized vector, I divided the changed in x with the length of the vector and the change in y with the length of the vector to reduce the original vector to a unit vector that retains its direction with magnitude 1