❓
⏲️ 0秒
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.incorrect {
animation: shake 0.5s;
animation-iteration-count: 1;
}
.emoji {
display: inline-block;
transition: transform 0.2s;
}
.emoji:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid #000; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-around; text-align: center; font-size: 24px;">
<div id="question" style="margin-top: 20px;">❓</div>
<input id="answer" type="number" style="font-size: 20px; margin-top: 10px;" placeholder="答えを入力">
<div id="timer" style="margin-top: 20px;">⏲️ 0秒</div>
<div id="emojis" style="margin-top: 20px;"></div>
<div>
<button onclick="submitAnswer()" style="font-size: 20px;">⏩</button>
<button onclick="startGame()" style="font-size: 20px; margin-left: 5px;">🔄</button>
</div>
</div>
<script>
let timer;
let time = 0;
let a, b;
function startGame() {
a = Math.floor(Math.random() * 20) + 1;
b = Math.floor(Math.random() * 20) + 1;
document.getElementById('question').innerText = `${a} ✖️ ${b} = ❓`;
document.getElementById('answer').value = '';
document.getElementById('answer').focus();
time = 0;
clearInterval(timer);
timer = setInterval(() => {
time++;
document.getElementById('timer').innerText = `⏲️ ${time}秒`;
}, 1000);
}
function submitAnswer() {
const answer = parseInt(document.getElementById('answer').value);
if (answer === a * b) {
displayEmojis();
startGame();
} else {
document.getElementById('answer').classList.add('incorrect');
setTimeout(() => {
document.getElementById('answer').classList.remove('incorrect');
}, 500);
}
}
function displayEmojis() {
const emojis = ['🎉', '😊', '👏', '😃', '🤩', '💥', '🌟'];
const emojiContainer = document.getElementById('emojis');
emojiContainer.innerHTML = '';
for (let i = 0; i < 10; i++) {
const emoji = emojis[Math.floor(Math.random() * emojis.length)];
const span = document.createElement('span');
span.className = 'emoji';
span.innerText = emoji;
emojiContainer.appendChild(span);
setTimeout(() => {
emojiContainer.removeChild(span);
}, 1000);
}
}
document.getElementById('answer').addEventListener('keyup', (event) => {
if (event.key === 'Enter') {
submitAnswer();
}
});
window.onload = startGame;
</script>
</body>
</html>
```