📖✨ ここから物語が始まります！🚀🌟
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
75% { transform: rotate(-5deg); }
}
.animate-bounce {
animation: bounce 1s infinite;
}
.animate-shake {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid #000; position: relative; overflow: hidden; background-color: #f0f8ff;">
<div id="story" style="font-size: 24px; text-align: center; padding: 20px; transition: all 1s;">
📖✨ ここから物語が始まります！🚀🌟
</div>
<button id="leftBtn" style="position: absolute; bottom: 20px; left: 20px; padding: 10px; font-size: 18px;">⬅️</button>
<button id="rightBtn" style="position: absolute; bottom: 20px; right: 20px; padding: 10px; font-size: 18px;">➡️</button>
<canvas id="emojiCanvas" style="position: absolute; top: 0; left: 0; width: 400px; height: 400px;"></canvas>
</div>
<script>
const storyElement = document.getElementById('story');
const leftBtn = document.getElementById('leftBtn');
const rightBtn = document.getElementById('rightBtn');
const canvas = document.getElementById('emojiCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;
const stories = [
"🌳🌞 木漏れ日の中で小さな冒険が始まる！🐿️🍄",
"🌧️☔ 雨の日にはカエルが歌うよ！🐸🎶",
"❄️⛄ 冬の魔法使いが現れた！✨🔮",
"🌈🦄 虹の橋を渡ってユニコーンの世界へ！🌟💖"
];
let currentStory = 0;
function updateStory(index) {
storyElement.textContent = stories[index];
storyElement.classList.add('animate-shake');
setTimeout(() => {
storyElement.classList.remove('animate-shake');
}, 500);
}
leftBtn.addEventListener('click', () => {
currentStory = (currentStory - 1 + stories.length) % stories.length;
updateStory(currentStory);
drawEmoji('⬅️');
});
rightBtn.addEventListener('click', () => {
currentStory = (currentStory + 1) % stories.length;
updateStory(currentStory);
drawEmoji('➡️');
});
function drawEmoji(emoji) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '48px serif';
ctx.textAlign = 'center';
ctx.fillText(emoji, canvas.width / 2, canvas.height / 2);
canvas.classList.add('animate-bounce');
setTimeout(() => {
canvas.classList.remove('animate-bounce');
ctx.clearRect(0, 0, canvas.width, canvas.height);
}, 1000);
}
window.addEventListener('deviceorientation', (event) => {
const alpha = event.beta;
if (alpha > 10) {
currentStory = (currentStory + 1) % stories.length;
updateStory(currentStory);
drawEmoji('📈');
} else if (alpha < -10) {
currentStory = (currentStory - 1 + stories.length) % stories.length;
updateStory(currentStory);
drawEmoji('📉');
}
});
</script>
</body>
</html>
```