<!DOCTYPE html>
<html>
<head>
<title>Emoji Bounce App</title>
<style>
#emoji-container {
position: relative;
width: 400px;
height: 400px;
border: 1px solid black;
}
.emoji {
position: absolute;
font-size: 36px;
transform: translate(-50%, -50%);
}
#bounce {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="emoji-container">
</div>
<button id="generate">Generate Emoji</button>
<button id="bounce">Bounce Emojis</button>
<script>
const container = document.getElementById('emoji-container');
const generateBtn = document.getElementById('generate');
const bounceBtn = document.getElementById('bounce');
let emojis = [];
// helper function to generate a random integer
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
// helper function to generate a random emoji
function getRandomEmoji() {
const emojis = ["😀","😂","😍","🤔","😎","🤩","🤯","🥳","🤗","🙄","😴","🤢","💩"];
return emojis[getRandomInt(emojis.length)];
}
// function to create a new emoji and add it to the container
function createEmoji() {
const emoji = document.createElement('span');
emoji.className = 'emoji';
emoji.innerText = getRandomEmoji();
const x = getRandomInt(container.offsetWidth);
const y = getRandomInt(container.offsetHeight);
emoji.style.top = `${y}px`;
emoji.style.left = `${x}px`;
container.appendChild(emoji);
emojis.push({
element: emoji,
x: x,
y: y,
vx: getRandomInt(5) + 1,
vy: getRandomInt(5) + 1
});
}
// function to move each emoji in the container
function moveEmojis() {
for (let i = 0; i < emojis.length; i++) {
const emoji = emojis[i];
const element = emoji.element;
const x = emoji.x;
const y = emoji.y;
const vx = emoji.vx;
const vy = emoji.vy;
let newX = x + vx;
let newY = y + vy;
if (newX < 0 || newX > container.offsetWidth) {
emoji.vx *= -1;
newX = x + emoji.vx;
}
if (newY < 0 || newY > container.offsetHeight) {
emoji.vy *= -1;
newY = y + emoji.vy;
}
for (let j = 0; j < emojis.length; j++) {
if (i !== j) {
const emoji2 = emojis[j];
const x2 = emoji2.x;
const y2 = emoji2.y;
const dx = newX - x2;
const dy = newY - y2;
const dist = Math.sqrt(dx*dx + dy*dy);
if (dist < 36) {
// emojis collided, reverse direction
emoji.vx *= -1;
emoji.vy *= -1;
newX = x + emoji.vx;
newY = y + emoji.vy;
}
}
}
emoji.x = newX;
emoji.y = newY;
element.style.top = `${newY}px`;
element.style.left = `${newX}px`;
}
}
// add event listener to generate button
generateBtn.addEventListener('click', createEmoji);
// add event listener to bounce button
bounceBtn.addEventListener('click', function() {
setInterval(moveEmojis, 10);
});
</script>
</body>
</html>
（ジョークはありません）
