🎉 5秒ピタ止めできる？ 🤹♂️🎯
連続成功数: 0 🎊
00.00 秒 ⏰
🏆 漢難神中 🏅
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5秒ピタ止めできる？</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
@keyframes glow {
0% { box-shadow: 0 0 5px #FFD700; }
50% { box-shadow: 0 0 20px #FFA500; }
100% { box-shadow: 0 0 5px #FFD700; }
}
@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); }
}
.animated-title {
animation: bounce 2s infinite;
font-size: 24px;
text-align: center;
}
.consecutive {
animation: glow 3s infinite;
font-size: 20px;
text-align: center;
margin-top: 10px;
}
.timer {
font-size: 32px;
text-align: center;
margin-top: 10px;
color: #4CAF50;
}
.buttons {
display: flex;
justify-content: center;
margin-top: 20px;
}
.btn {
font-size: 24px;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
border: none;
border-radius: 10px;
background-color: #FFEB3B;
transition: transform 0.2s;
}
.btn:active {
animation: shake 0.5s;
}
.success {
color: #4CAF50;
}
.failure {
color: #F44336;
}
.title-award {
font-size: 20px;
color: #FF5722;
text-align: center;
margin-top: 10px;
animation: bounce 1.5s infinite;
}
</style>
</head>
<body>
<div class="animated-title">🎉 5秒ピタ止めできる？ 🤹♂️🎯</div>
<div class="consecutive">連続成功数: <span id="successCount">0</span> 🎊</div>
<div class="timer">00.00 秒 ⏰</div>
<div class="buttons">
<button class="btn" id="startBtn">▶️ スタート</button>
<button class="btn" id="stopBtn">🛑 ストップ</button>
</div>
<div id="award" class="title-award" style="display:none;">🏆 漢難神中 🏅</div>
<canvas id="emojiCanvas" width="400" height="400" style="position:absolute; top:0; left:0; pointer-events:none;"></canvas>
<script>
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const timerDisplay = document.querySelector('.timer');
const successCountSpan = document.getElementById('successCount');
const awardDiv = document.getElementById('award');
const emojiCanvas = document.getElementById('emojiCanvas');
const ctx = emojiCanvas.getContext('2d');
let startTime = null;
let timerInterval = null;
let successCount = 0;
function startTimer() {
if (timerInterval) return;
startTime = Date.now();
timerInterval = setInterval(() => {
const elapsed = (Date.now() - startTime) / 1000;
timerDisplay.textContent = elapsed.toFixed(2) + ' 秒 ⏰';
}, 10);
animateStart();
}
function stopTimer() {
if (!timerInterval) return;
clearInterval(timerInterval);
timerInterval = null;
const elapsed = (Date.now() - startTime) / 1000;
timerDisplay.textContent = elapsed.toFixed(2) + ' 秒 ⏰';
checkSuccess(elapsed);
animateStop();
}
function checkSuccess(time) {
if (time >= 4.83 && time <= 5.24) {
successCount++;
successCountSpan.textContent = successCount;
showEmoji("🎉");
if (successCount >= 10) {
awardDiv.style.display = 'block';
}
} else {
successCount = 0;
successCountSpan.textContent = successCount;
showEmoji("😢");
awardDiv.style.display = 'none';
}
}
function showEmoji(emoji) {
const size = 30;
const x = Math.random() * (emojiCanvas.width - size);
const y = Math.random() * (emojiCanvas.height - size);
ctx.font = `${size}px serif`;
ctx.fillText(emoji, x, y);
setTimeout(() => {
ctx.clearRect(x, y - size, size, size);
}, 1000);
}
function animateStart() {
startBtn.style.transform = 'scale(1.1)';
setTimeout(() => {
startBtn.style.transform = 'scale(1)';
}, 100);
}
function animateStop() {
stopBtn.style.transform = 'scale(1.1)';
setTimeout(() => {
stopBtn.style.transform = 'scale(1)';
}, 100);
}
startBtn.addEventListener('click', startTimer);
stopBtn.addEventListener('click', stopTimer);
// Keyboard support
document.addEventListener('keydown', (e) => {
if (e.key === 's' || e.key === 'S') {
startTimer();
}
if (e.key === 'd' || e.key === 'D') {
stopTimer();
}
});
</script>
</body>
</html>
```