|
<!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> |
|
|
