練習場「クリックカウンターゲーム」
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Counter Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
#score {
font-size: 2rem;
color: #007BFF;
}
button {
padding: 15px 30px;
font-size: 1.2rem;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#timer {
font-size: 1.5rem;
margin-top: 10px;
color: #ff6347;
}
</style>
</head>
<body>
<h1>Click Counter Game</h1>
<p>Click the button as many times as you can in 10 seconds!</p>
<p id="score">Score: 0</p>
<p id="timer">Time Left: 10s</p>
<button id="clickButton">Click Me!</button>
<script src="game.js"></script>
</body>
</html>
// 必要なDOM要素を取得
const scoreDisplay = document.getElementById('score');
const timerDisplay = document.getElementById('timer');
const clickButton = document.getElementById('clickButton');
// 初期値の設定
let score = 0;
let timeLeft = 10;
let gameActive = false;
// スコアを更新する関数
function updateScore() {
if (gameActive) {
score++;
scoreDisplay.textContent = `Score: ${score}`;
}
}
// ゲームのタイマーを開始する関数
function startGame() {
if (gameActive) return; // 既にゲームが始まっている場合は無視
gameActive = true;
score = 0;
timeLeft = 10;
scoreDisplay.textContent = `Score: ${score}`;
timerDisplay.textContent = `Time Left: ${timeLeft}s`;
// 毎秒タイマーを減らす
const timerInterval = setInterval(() => {
timeLeft--;
timerDisplay.textContent = `Time Left: ${timeLeft}s`;
// 時間切れ
if (timeLeft <= 0) {
clearInterval(timerInterval);
gameActive = false;
timerDisplay.textContent = "Time's up! Press the button to restart.";
}
}, 1000);
}
// クリックイベントを登録
clickButton.addEventListener('click', () => {
if (!gameActive) {
startGame(); // ゲームを開始
} else {
updateScore(); // スコアを更新
}
});
制限時間: プレイヤーには10秒の制限時間があります。
クリック: プレイヤーは「Click Me!」というボタンをクリックすることでスコアを増やします。
スコア表示: クリックするたびにスコアが1点加算され、画面に表示されます。
タイマー: 残り時間も画面に表示され、時間が経過するごとに減少します。
ゲーム終了: 10秒が経過するとゲームが終了し、スコアを表示した後、ボタンを再度クリックすることでゲームを再スタートできます。
このゲームは、反射神経やスピードを試すシンプルなゲームです。