Last week a colleague asked me to estimate the number of people at an event and that was when it became apparent to both of us that my estimation skills are terrible. I was so embarrassed! That night, I decided to try and code a game that would help me get better at estimating.
Technologies Used
The Bubble Estimator Game utilizes the following technologies:
JavaScript: The backbone of the game logic, handling bubble creation, user input, and scoring.
SVG (Scalable Vector Graphics): Providing visually appealing and scalable graphics for the dynamic bubbles.
Web Audio API: Adding sound effects to enhance the gaming experience.
Features
Dynamic creation of bubbles with varying sizes, colors, and positions.
Sound effects using the Web Audio API to create a lively atmosphere.
User input for estimating the number of bubbles created.
Scoring system based on the accuracy of the user’s estimate.
Code Highlights
I am so proud of the bubble generator function, which is a simple recursive function responsible for all the magic!
function createBubbles(svg, centerX, centerY, radius, depth) {
if (depth === 0) {
return;
}
const numBubbles = Math.floor(Math.random() * 6) + 2;
const angleIncrement = (3 * Math.PI) / numBubbles;
for (let i = 0; i < numBubbles; i++) {
const angle = i * angleIncrement;
//cartesian coordinates
const x = radius * Math.cos(angle) + centerX;
const y = radius * Math.sin(angle) + centerY;
const newRadius = radius / (Math.random() + 1);
const newX = x + newRadius * Math.cos(angle);
const newY = y + newRadius * Math.sin(angle);
//draw circle
const circle = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
circle.setAttribute("cx", newX);
circle.setAttribute("cy", newY);
circle.setAttribute("r", newRadius);
//color
const randomColor = generateRandomColor();
circle.setAttribute("fill", randomColor);
circlesDrawn++;
console.log("num bubbles", circlesDrawn);
svg.appendChild(circle);
//play sound
playBlopSound();
//recursive case
setTimeout(() => {
circle.style.transform = "translate(0,-5%)";
createBubbles(svg, newX, newY, newRadius, depth - 1);
}, i * 500);
}
}
Demo
You can try the game by following this link: https://voluble-duckanoo-221094.netlify.app/
Live Coding/Tutorial:
Oh, and if you are interested in watching how I made it; here is a link to the live coding/tutorial:
Estimation Game with Vanilla JavaScript + SVG + Web Audio API [ Live Coding Tutorial ] – YouTube
In this live coding tutorial/journey, we build a Bubble Estimator Game using SVG graphics, recursive functions, and sound effects with JavaScript. We’ll crea…
youtube.com
Source Code:
The source code is available on GitHub: Bubble Estimator Game on GitHub.
I hope this project inspires you to explore new ideas and have fun with your coding journey.
