🎵 Steady Bounce — CROWDED EDITION
by QuantumBolt10168 lines7.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>🎵 Steady Bounce — CROWDED EDITION</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 3rem 1rem;
background: linear-gradient(135deg, #2b2d42, #3a3b5a);
color: #fff;
min-height: 100vh;
margin:0;
}
.container {max-width: 600px; margin:0 auto;}
h1 {font-size:1.8rem; margin-bottom:0.5rem;}
.note {color:#8ecae6; font-weight:bold;}
button {
font-size:1.3rem; padding:1rem 2.2rem; border:none; border-radius:14px;
background:#ff2a6d; color:#fff; cursor:pointer; box-shadow:0 6px 16px #0004;
margin:0.5rem; transition:all 0.2s; font-weight:bold;
}
button:hover {background:#ff4a8d; transform:scale(1.04);}
button:active {transform:scale(0.97);}
.info {margin-top:1.5rem; opacity:0.9; font-size:0.95rem; line-height:1.5;}
.badge {display:inline-block; background:#05d9e8; color:#000; padding:0.2rem 0.6rem; border-radius:20px; font-size:0.8rem; font-weight:bold; margin:0.2rem;}
</style>
</head>
<body>
<div class="container">
<h1>🎵 STEADY BOUNCE — <span class="badge">CROWDED EDITION</span></h1>
<p>✅ <strong>LAW:</strong> Only <span class="note">MIDDLE C</span> — NO pitch shifts ever!<br>🎛 Loads of layers, beats, shakes & sounds — FULL busy song!</p>
<br>
<button onclick="playSong()">🔊 CREATE & PLAY FULL SONG</button>
<button onclick="stopSong()">⏹ STOP</button>
<div class="info">
🎶 Includes: Main melody • Bright ticks • Deep thumps • Metal chinks • Maraca storms • Wood taps • Ping layers • Crowd‑style noise texture — ALL locked to ONE pitch!
</div>
</div>
<script>
let audioCtx = null;
const BASE_FREQ = 261.63; // 🎯 FIXED FOREVER: MIDDLE C ONLY
const BPM = 110;
const BEAT = 60 / BPM;
// --- SAFE START ---
function ensureCtx(){
if(!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
// --- CORE SOUND MAKERS — NEVER CHANGE FREQUENCY ---
function tone(t, dur, type='triangle', vol=0.22){
const o=audioCtx.createOscillator(), g=audioCtx.createGain();
o.type=type; o.frequency.value=BASE_FREQ;
g.gain.setValueAtTime(vol, t);
g.gain.exponentialRampToValueAtTime(0.001, t+dur);
o.connect(g); g.connect(audioCtx.destination);
o.start(t); o.stop(t+dur);
}
function clickHit(t, vol=0.18){
const o=audioCtx.createOscillator(), g=audioCtx.createGain();
o.type='square'; o.frequency.value=BASE_FREQ;
g.gain.setValueAtTime(vol, t);
g.gain.exponentialRampToValueAtTime(0.001, t+0.06);
o.connect(g); g.connect(audioCtx.destination);
o.start(t); o.stop(t+0.06);
}
function metalChink(t, vol=0.14){
const o=audioCtx.createOscillator(), g=audioCtx.createGain();
o.type='sine'; o.frequency.value=BASE_FREQ;
g.gain.setValueAtTime(vol, t);
g.gain.exponentialRampToValueAtTime(0.001, t+0.12);
o.connect(g); g.connect(audioCtx.destination);
o.start(t); o.stop(t+0.12);
}
function deepThump(t, vol=0.25){
const o=audioCtx.createOscillator(), g=audioCtx.createGain();
o.type='sawtooth'; o.frequency.value=BASE_FREQ;
g.gain.setValueAtTime(vol, t);
g.gain.exponentialRampToValueAtTime(0.001, t+0.22);
o.connect(g); g.connect(audioCtx.destination);
o.start(t); o.stop(t+0.22);
}
function maracaBurst(t, count=1, speed=0.07){
for(let k=0;k<count;k++){
const b=audioCtx.createBuffer(1, audioCtx.sampleRate*0.18, audioCtx.sampleRate);
const d=b.getChannelData(0);
for(let i=0;i<b.length;i++) d[i]=(Math.random()*2-1)*0.55;
const src=audioCtx.createBufferSource(); src.buffer=b;
const f=audioCtx.createBiquadFilter(); f.type='highpass'; f.frequency.value=BASE_FREQ;
const g=audioCtx.createGain(); g.gain.setValueAtTime(0.11, t + (k*speed));
src.connect(f); f.connect(g); g.connect(audioCtx.destination); src.start(t + (k*speed));
}
}
function crowdLayer(startT, endT){
let t=startT;
while(t < endT){
const b=audioCtx.createBuffer(1, audioCtx.sampleRate*0.25, audioCtx.sampleRate);
const d=b.getChannelData(0);
for(let i=0;i<b.length;i++) d[i]=(Math.random()*2-1)*0.12;
const src=audioCtx.createBufferSource(); src.buffer=b;
const g=audioCtx.createGain(); g.gain.setValueAtTime(0.06, t);
g.gain.exponentialRampToValueAtTime(0.001, Math.min(t+0.25, endT));
src.connect(g); g.connect(audioCtx.destination); src.start(t);
t += 0.18 + (Math.random()*0.22);
}
}
// 🎵 FULL CROWDED SONG — MANY PARTS & EFFECTS
function playSong(){
ensureCtx();
const now = audioCtx.currentTime;
let pos = now;
// --- INTRO: BUILD & WARM UP ---
crowdLayer(pos, pos + 1.2);
for(let k=0;k<4;k++) clickHit(pos + (k*0.22), 0.10 + (k*0.02));
maracaBurst(pos+0.4, 3, 0.1);
pos += 1.4;
// ============= PART 1 — MAIN + FULL LAYERS =============
const MAIN_SEQ = [
{d:2*BEAT, type:'long'},
{d:BEAT, type:'short'},{d:BEAT, type:'short'},
{d:2*BEAT, type:'long'},
{d:BEAT, type:'short'},{d:BEAT, type:'short'},{d:BEAT, type:'short'},
{d:2*BEAT, type:'long'},{d:2*BEAT, type:'long'},
{d:BEAT, type:'short'},{d:BEAT, type:'short'},
{d:2*BEAT, type:'long'}
];
crowdLayer(pos, pos + 9*BEAT); // constant busy background
MAIN_SEQ.forEach((note, i)=>{
tone(pos, note.d, 'triangle', 0.24); // core melody
// 🎛 LAYER 1: Bright ticks EVERY beat
if(note.type==='short') { clickHit(pos,0.2); metalChink(pos+0.04); }
if(note.type==='long') { clickHit(pos,0.16); deepThump(pos); }
// 🎛 LAYER 2: EXTRA EFFECTS — exactly where you wanted
if(i===2){ maracaBurst(pos,4,0.06); metalChink(pos+0.1); metalChink(pos+0.25); }
if(i===5){ maracaBurst(pos,6,0.05); tone(pos+0.1,0.2,'sine',0.15); }
if(i===7){ clickHit(pos+0.15,0.22); clickHit(pos+0.35,0.20); maracaBurst(pos+0.2,2); }
if(i===MAIN_SEQ.length-1){
tone(pos+0.05,0.35,'sine',0.25); // BIG FINAL PING
maracaBurst(pos,8,0.04); // HUGE shake fill
}
// 🎛 LAYER 3: Continuous fill between gaps
if(note.d>BEAT) maracaBurst(pos + BEAT/2, 2, 0.08);
pos += note.d;
});
// ============= PART 2 — EVEN BUSIER VARIATION =============
crowdLayer(pos, pos + 8*BEAT);
const BUSY_SEQ = [BEAT,BEAT,BEAT,BEAT, 2*BEAT, BEAT,BEAT,BEAT,BEAT, 2*BEAT];
BUSY_SEQ.forEach((d,i)=>{
tone(pos, d, 'sawtooth', 0.19);
clickHit(pos,0.21);
metalChink(pos+0.03);
if(i%3===0){ deepThump(pos); maracaBurst(pos,2); }
pos += d;
});
// 🎉 FINAL OUTRO — CROWD PEAK
maracaBurst(pos,12,0.035);
tone(pos, 0.6, 'sine', 0.3);
clickHit(pos+0.1,0.25); clickHit(pos+0.22,0.23); clickHit(pos+0.34,0.20);
}
function stopSong(){
if(audioCtx){
audioCtx.close();
audioCtx = null;
}
}
</script>
</body>
</html>Game Source: 🎵 Steady Bounce — CROWDED EDITION
Creator: QuantumBolt10
Libraries: none
Complexity: moderate (168 lines, 7.7 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: steady-bounce-crowded-edition-quantumbolt10" to link back to the original. Then publish at arcadelab.ai/publish.