📜 セリフゲーム 🎉
👧
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>楽しいセリフゲーム</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
25% {transform: translateX(-10px);}
75% {transform: translateX(10px);}
}
@keyframes colorchange {
0% {color: red;}
50% {color: yellow;}
100% {color: green;}
}
.bounce {
animation: bounce 1s;
}
.shake {
animation: shake 0.5s;
}
.colorchange {
animation: colorchange 2s infinite;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid black; overflow: hidden; position: relative; padding: 10px; box-sizing: border-box;">
<div style="font-size: 24px; margin-bottom: 10px;">📜 セリフゲーム 🎉</div>
<div id="emojiGirl" style="font-size: 48px; animation: bounce 2s infinite;">👧</div>
<div id="serifu" style="font-size: 16px; margin: 10px 0;"></div>
<div style="display: flex; justify-content: space-around;">
<button onclick="onclickButton()" style="padding: 10px; font-size: 18px; border-radius: 10px; background: #ffdddd;">💬 セリフを表示 💬</button>
</div>
</div>
<script>
const serifuList = [
"おはようッス〜！✨",
"今日も頑張るッス〜💪",
"朝ごはんちゃんと食べたッスか？🍳",
"宿題やったッス？📚",
"もう寝ちゃうッス〜💤",
"ドキドキするッス〜💓",
"君の好きな色は何ッスか？🎨",
"真実はいつも一つッス！🤔",
"お手伝いするッス〜💼",
"一緒に遊ぼうッス〜！🎮",
"笑顔が素敵ッスね！😁",
"夢を見たッス〜🌟",
"雨が降ってるッス☔",
"七夕の願い事は何ッスか？🎋",
"ホラー映画見たら怖かったッス〜👻",
"新しい服買ったッス👗",
"おなかすいたッス〜🍔",
"一緒に歌を歌おうッス🎤",
"星が綺麗ッスね🌟",
"お化けが出るって本当ッスか？👻",
"今日はたくさん歩いたッス🚶",
"太陽がまぶしいッス☀️",
"一緒に写真撮ろうッス📸",
"デザート食べたいッス〜🍦",
"新しいゲーム始めるッス🎮",
"秘密を教えてあげるッス🤫",
"運動会楽しみッス〜🏃",
"お願い聞いてくれるッス？🙏",
"君の笑顔が見たいッス〜😊",
"天の川を見たいッス🌌",
"恋って何ッスか？💖",
"一緒に冒険するッス！🗺️",
"元気出して欲しいッス😊",
"お料理教えるッス🍳",
"宝物が見つかったッス💎",
"どこか行きたいッスか？🗺️",
"楽しいこと探そうッス〜🔍",
"いっぱい話したいッス😊",
"好きな音楽教えて欲しいッス🎵",
"怖い夢を見ちゃったッス〜😱",
"元気を分けてあげるッス💪",
"今何してるッスか？⌛",
"本を読んでるッス📖",
"絵を描いたッス🎨",
"今日は楽しかったッス〜😊",
"一緒に考えようッス💡",
"秘密基地を作りたいッス🏠",
"新しい友達ができたッス👫",
"幸せになれる魔法が知りたいッス🔮",
"もう一度会いたいッス🤗"
];
function onclickButton() {
const serifuDiv = document.getElementById("serifu");
const randomIndex = Math.floor(Math.random() * serifuList.length);
serifuDiv.textContent = serifuList[randomIndex];
serifuDiv.classList.add("colorchange");
serifuDiv.addEventListener("animationend", () => {
serifuDiv.classList.remove("colorchange");
});
}
document.getElementById("emojiGirl").addEventListener("click", () => {
const emojiGirlDiv = document.getElementById("emojiGirl");
emojiGirlDiv.classList.add("shake");
emojiGirlDiv.addEventListener("animationend", () => {
emojiGirlDiv.classList.remove("shake");
});
});
</script>
</body>
</html>
```