File size: 3,129 Bytes
277cea2 8729170 277cea2 9525954 277cea2 9525954 277cea2 9525954 277cea2 9525954 f139783 9525954 277cea2 9525954 277cea2 9525954 277cea2 9525954 |
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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!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;
padding: 0;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
}
header {
background-color: #fff;
border-bottom: 1px solid #ccc;
text-align: center;
padding: 10px 0;
}
canvas {
display: block;
flex-grow: 1;
}
</style>
</head>
<body>
<header>
<h1>No it is not an empty page!</h1>
<p>Click anywhere and see</p>
</header>
<canvas id="emojiCanvas"></canvas>
<script>
const canvas = document.getElementById('emojiCanvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - document.querySelector('header').offsetHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
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>
|