43 lines
1.2 KiB
HTML
Executable File
43 lines
1.2 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Emoji Rain</title>
|
|
<style>
|
|
body { margin:0; overflow:hidden; background:#222; font-family:sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas"></canvas>
|
|
<script>
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
const emojis = ['😀','😂','😎','🥳','🌟','🍕','💖','🐱','🔥','💀','🐸'];
|
|
let drops = Array.from({length:50}, ()=>({
|
|
x: Math.random()*canvas.width,
|
|
y: Math.random()*canvas.height,
|
|
speed: Math.random()*3+1,
|
|
emoji: emojis[Math.floor(Math.random()*emojis.length)]
|
|
}));
|
|
|
|
function animate() {
|
|
ctx.clearRect(0,0,canvas.width,canvas.height);
|
|
drops.forEach(d=>{
|
|
ctx.font = '30px serif';
|
|
ctx.fillText(d.emoji,d.x,d.y);
|
|
d.y += d.speed;
|
|
if(d.y>canvas.height){ d.y=0; d.x=Math.random()*canvas.width; }
|
|
});
|
|
requestAnimationFrame(animate);
|
|
}
|
|
animate();
|
|
|
|
window.addEventListener('resize', () => { canvas.width=window.innerWidth; canvas.height=window.innerHeight; });
|
|
</script>
|
|
</body>
|
|
</html>
|