File size: 2,728 Bytes
277cea2 8729170 277cea2 8729170 277cea2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Gravity Click</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="emojiCanvas"></canvas>
<p>No it is not Empty, Click anywhere and see!</p>
<script>
const canvas = document.getElementById('emojiCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const emojis = ['🐸', '🤡', '💸', '😎', '🤩', '🪙'];
const gravity = 0.5;
const friction = 0.97;
let particles = [];
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 20 + 10;
this.speedY = (Math.random() - 0.5) * 5;
this.speedX = (Math.random() - 0.5) * 5;
this.color = '#fff';
this.emoji = emojis[Math.floor(Math.random() * emojis.length)];
}
update() {
this.speedY += gravity;
this.speedX *= friction;
this.x += this.speedX;
this.y += this.speedY;
if (this.y + this.size >= canvas.height) {
this.y = canvas.height - this.size;
this.speedY = -this.speedY * friction;
}
if (this.x + this.size >= canvas.width || this.x - this.size <= 0) {
this.speedX = -this.speedX * friction;
}
}
draw() {
ctx.font = `${this.size}px Arial`;
ctx.fillStyle = this.color;
ctx.fillText(this.emoji, this.x, this.y);
}
}
function handleParticles(event) {
const { clientX, clientY } = event;
const numberOfParticles = Math.random() * 10 + 5;
for (let i = 0; i < numberOfParticles; i++) {
particles.push(new Particle(clientX, clientY));
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = particles.length - 1; i >= 0; i--) {
particles[i].update();
particles[i].draw();
if (particles[i].size <= 0.3) {
particles.splice(i, 1);
}
}
requestAnimationFrame(animate);
}
canvas.addEventListener('click', handleParticles);
animate();
</script>
</body>
</html> |