```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes clickEffect {
0% { transform: scale(1); opacity:1; }
50% { transform: scale(1.2); opacity:0.7; }
100% { transform: scale(1); opacity:1; }
}
</style>
</head>
<body>
<div id="container" style="width:400px; height:400px; position:relative; overflow:hidden; background-color:#f0f0f0;">
<input type="button" id="colorBtn" style="position:absolute; top:20px; left:20px; width:60px; height:60px; border-radius:30px; border:none; background-color:#ff6666; cursor:pointer;">
<input type="button" id="soundBtn" style="position:absolute; top:20px; right:20px; width:60px; height:60px; border-radius:30px; border:none; background-color:#66ff66; cursor:pointer;">
<input type="button" id="shakeBtn" style="position:absolute; bottom:20px; left:20px; width:60px; height:60px; border-radius:30px; border:none; background-color:#6666ff; cursor:pointer;">
<input type="button" id="animateBtn" style="position:absolute; bottom:20px; right:20px; width:60px; height:60px; border-radius:30px; border:none; background-color:#ffff66; cursor:pointer;">
<canvas id="canvas" style="position:absolute; top:0; left:0; width:100%; height:100%;"></canvas>
</div>
<script>
document.getElementById('colorBtn').addEventListener('click', function(){
var container = document.getElementById('container');
var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
container.style.backgroundColor = randomColor;
this.style.animation = 'clickEffect 0.3s';
this.addEventListener('animationend', function(){
this.style.animation = '';
}, {once: true});
});
document.getElementById('soundBtn').addEventListener('click', function(){
var context = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = context.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(440, context.currentTime);
oscillator.connect(context.destination);
oscillator.start();
oscillator.stop(context.currentTime + 0.5);
this.style.animation = 'clickEffect 0.3s';
this.addEventListener('animationend', function(){
this.style.animation = '';
}, {once: true});
});
document.getElementById('shakeBtn').addEventListener('click', function(){
var container = document.getElementById('container');
container.style.animation = 'shake 0.5s';
container.addEventListener('animationend', function(){
container.style.animation = '';
}, {once: true});
this.style.animation = 'clickEffect 0.3s';
this.addEventListener('animationend', function(){
this.style.animation = '';
}, {once: true});
});
document.getElementById('animateBtn').addEventListener('click', function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(Math.random()*canvas.width, Math.random()*canvas.height, 10, 0, Math.PI*2);
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
ctx.fill();
this.style.animation = 'clickEffect 0.3s';
this.addEventListener('animationend', function(){
this.style.animation = '';
}, {once: true});
});
</script>
</body>
</html>
```
