😂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emoji Game</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 2px solid black;
position: relative;
}
#emoji {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 50px;
}
#kanji {
position: absolute;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div id="game-board">
<p id="emoji">😂</p>
</div>
<script>
const gameBoard = document.querySelector('#game-board');
const emoji = document.querySelector('#emoji');
const kanji = document.createElement('p');
let kanjiInterval = null;
// Function to move emojis down slowly
function moveEmoji() {
let emojiPosition = 0;
const emojiInterval = setInterval(() => {
emojiPosition += 10;
emoji.style.top = `${emojiPosition}px`;
if (emojiPosition > 400) {
clearInterval(emojiInterval);
gameBoard.removeChild(emoji);
kanji.style.top = `${emojiPosition}px`;
kanji.style.left = `${emoji.offsetLeft}px`;
gameBoard.appendChild(kanji);
clearInterval(kanjiInterval);
kanjiInterval = null;
}
}, 100);
}
gameBoard.addEventListener('click', (event) => {
if (!kanjiInterval) {
kanji.innerText = '漢字';
kanji.style.top = `${event.clientY - 10}px`;
kanji.style.left = `${event.clientX - 15}px`;
// Function to move kanji up and check for collision with emoji
kanjiInterval = setInterval(() => {
let kanjiPosition = parseInt(kanji.style.top);
kanjiPosition -= 10;
kanji.style.top = `${kanjiPosition}px`;
// Check for collision with emoji
const emojiTop = parseInt(emoji.style.top);
const emojiLeft = emoji.offsetLeft;
const kanjiTop = kanjiPosition;
const kanjiLeft = parseInt(kanji.style.left);
if (kanjiTop < emojiTop + 50 &&
kanjiTop + 20 > emojiTop &&
kanjiLeft < emojiLeft + 50 &&
kanjiLeft + 30 > emojiLeft) {
gameBoard.removeChild(emoji);
clearInterval(kanjiInterval);
kanjiInterval = null;
}
if (kanjiPosition < 0) {
clearInterval(kanjiInterval);
kanjiInterval = null;
}
}, 50);
}
});
setInterval(() => {
const newEmoji = document.createElement('p');
newEmoji.innerText = '😂';
newEmoji.style.position = 'absolute';
newEmoji.style.top = '0';
newEmoji.style.left = `${Math.floor(Math.random() * (gameBoard.offsetWidth - 50))}px`;
newEmoji.style.fontSize = '50px';
gameBoard.appendChild(newEmoji);
emoji = newEmoji;
moveEmoji();
}, 2000);
</script>
</body>
</html>