let bubbles = [];
let score = 0;
let magicBubble = null;
let gameStartTime = 0;
let particles = [];
let colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57', '#FF9FF3', '#54A0FF'];
let faceColors = ['#FF9FF3', '#54A0FF', '#FF6B6B', '#4ECDC4', '#FFD93D', '#C7CEEA', '#FFB6C1']; // pastel neon for the face lines
let bubblePopSounds = [];
let magicPopSound;
let audioUnlocked = false;
function setup() {
createCanvas(1024, 768);
createSounds();
gameStartTime = millis();
spawnBubbles();
}
function createSounds() {
// Normal bubble pops (3 variations) - all the same good click
for (let i = 0; i < 3; i++) {
bubblePopSounds.push({
play: function() {
let osc = new p5.Oscillator('sine');
let env = new p5.Envelope();
env.setADSR(0.001, 0.02, 0, 0.01);
osc.freq(150); // Fixed frequency - always the same
osc.amp(env);
osc.start();
env.play(osc, 0, 0.05);
setTimeout(() => osc.stop(), 20);
}
});
}
// Magic bubble sound (still special but shorter)
magicPopSound = {
play: function() {
for (let i = 0; i < 2; i++) {
setTimeout(() => {
let osc = new p5.Oscillator('sine');
let env = new p5.Envelope();
env.setADSR(0.001, 0.04, 0, 0.02);
osc.freq(300 + 2 * 100);
osc.amp(env);
osc.start();
env.play(osc, 0, 0.1 );
setTimeout(() => osc.stop(), 20);
}, i * 20);
}
}
};
// No bubble rise sound - removed
}
function draw() {
background(10, 10, 30);
for (let i = bubbles.length - 1; i >= 0; i--) {
let b = bubbles[i];
b.update();
b.display();
if (b.pos.y < -100) bubbles.splice(i, 1);
}
if (magicBubble) {
magicBubble.update();
magicBubble.display();
if (magicBubble.pos.y < -100) magicBubble = null;
} else if (millis() - gameStartTime > 20000 && random() < 0.001) {
spawnMagicBubble();
}
for (let i = particles.length - 1; i >= 0; i--) {
particles[i].update();
particles[i].display();
if (particles[i].lifespan <= 0) particles.splice(i, 1);
}
fill(255);
textSize(24);
text(`Score: ${score}`, 20, 40);
fill(180);
textSize(14);
text("Click bubbles • Red magic bubble clears everything!", 20, height - 20);
}
function mousePressed() {
if (!audioUnlocked) {
userStartAudio();
audioUnlocked = true;
}
if (magicBubble && dist(mouseX, mouseY, magicBubble.pos.x, magicBubble.pos.y) < magicBubble.size / 2) {
magicPopSound.play();
explodeAll();
return;
}
for (let i = bubbles.length - 1; i >= 0; i--) {
let b = bubbles[i];
if (dist(mouseX, mouseY, b.pos.x, b.pos.y) < b.size / 2) {
popBubble(b, i);
random(bubblePopSounds).play();
return;
}
}
}
function spawnBubbles() {
for (let i = 0; i < 20; i++) bubbles.push(new Bubble());
setTimeout(spawnBubbles, 3000);
}
function spawnMagicBubble() {
magicBubble = new Bubble(random(width), height + 50, '#FF0044', random(30, 50), true);
magicBubble.vel.y = random(-1.2, -0.6);
}
function popBubble(bubble, index) {
score += 10;
createParticles(bubble.pos.x, bubble.pos.y, bubble.col);
bubbles.splice(index, 1);
}
function explodeAll() {
score += bubbles.length * 50 + 1000;
for (let b of bubbles) createParticles(b.pos.x, b.pos.y, b.col);
bubbles = [];
if (magicBubble) {
createParticles(magicBubble.pos.x, magicBubble.pos.y, '#FF0044');
magicBubble = null;
}
}
function createParticles(x, y, col) {
for (let i = 0; i < 12; i++) particles.push(new Particle(x, y, col));
}
// ===============================================
// NEW BUBBLE WITH "DEAD / DRUNK" FACE DRAWING
// ===============================================
class Bubble {
constructor(x = random(width), y = height + random(50), col = random(colors), size = random(25, 45), isMagic = false) {
this.pos = createVector(x, y);
this.vel = createVector(random(-0.5, 0.5), random(-8, -1));
this.col = col;
this.size = size;
this.isMagic = isMagic;
this.faceColor = random(faceColors); // random pastel neon for the face
this.wobblePhase = random(TWO_PI); // for slight deformation animation
}
update() {
this.pos.add(this.vel);
this.vel.y *= 0.99;
this.wobblePhase += 0.08;
}
display() {
push();
translate(this.pos.x, this.pos.y);
// Magic glow
if (this.isMagic) {
drawingContext.shadowBlur = 40;
drawingContext.shadowColor = this.col;
}
// Main bubble circle (semi-transparent for that bubbly look)
noStroke();
fill(this.col);
ellipse(0, 0, this.size);
// === DRAW THE CUTE X-EYES + WOBBLY MOUTH FACE ===
let s = this.size;
let faceCol = this.faceColor;
stroke(faceCol);
strokeWeight(s * 0.09);
noFill();
// Left X eye
let offset = sin(this.wobblePhase) * 2;
line(-s*0.25 + offset, -s*0.18, -s*0.12 + offset, -s*0.05);
line(-s*0.12 + offset, -s*0.18, -s*0.25 + offset, -s*0.05);
// Right X eye
line(s*0.25 - offset, -s*0.18, s*0.12 - offset, -s*0.05);
line(s*0.12 - offset, -s*0.18, s*0.25 - offset, -s*0.05);
// Wobbly droopy mouth
beginShape();
noFill();
strokeWeight(s * 0.07);
for (let a = PI*0.2; a <= PI*0.8; a += 0.1) {
let wave = sin(a*6 + this.wobblePhase*3) * s*0.04;
let xx = cos(a) * s*0.32;
let yy = sin(a) * s*0.22 + wave + s*0.15;
vertex(xx, yy);
}
endShape();
// Tiny blush circles (optional cute touch)
noStroke();
fill(red(faceCol), green(faceCol), blue(faceCol), 80);
ellipse(-s*0.3, s*0.05, s*0.14);
ellipse( s*0.3, s*0.05, s*0.14);
// Reset shadow
if (this.isMagic) drawingContext.shadowBlur = 0;
pop();
}
}
class Particle {
constructor(x, y, col) {
this.pos = createVector(x, y);
this.vel = p5.Vector.random2D().mult(random(3, 7));
this.lifespan = 255;
this.col = col;
this.size = random(3, 7);
}
update() {
this.pos.add(this.vel);
this.vel.mult(0.95);
this.lifespan -= 12;
}
display() {
noStroke();
fill(red(this.col), green(this.col), blue(this.col), this.lifespan);
ellipse(this.pos.x, this.pos.y, this.size);
}
}
