first commit
This commit is contained in:
Executable
+42
@@ -0,0 +1,42 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user