JavaScriptカウントアップゲームのソースコード

<style>
#game-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 200px;
margin-top: 20px;
}
button {
width: 60px;
height: 60px;
font-size: 20px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
button:disabled {
background-color: #cccccc;
}
#message , #clearTime{
width: 350px;
margin-top: 20px;
}
#start-button {
width: 200px;
margin-top: 20px;
}
#timer {
font-size: 24px;
font-weight: bold;
}
</style>

<div id="timer">00:00</div>
<div id="game-container"></div>
<div id="message"></div>
<div id="clearTime"></div>
<button id="start-button">ゲーム開始</button>

<script>
// DOM要素の取得
const gameContainer = document.getElementById('game-container');
const message = document.getElementById('message');
const startButton = document.getElementById('start-button');
const timer = document.getElementById('timer');

let buttons = [];
let playerInput = [];
const correctSequence = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let startTime;
let timerInterval;

// ボタンの作成と配置
function createButtons() {
gameContainer.innerHTML = '';
buttons = [];
playerInput = [];
const numbers = [...correctSequence];
shuffleArray(numbers);

for (let i = 0; i < 9; i++) {
const button = document.createElement('button');
button.textContent = numbers[i];
button.addEventListener('click', () => recordInput(numbers[i]));
gameContainer.appendChild(button);
buttons.push(button);
}
}

// 配列のシャッフル
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}

// プレイヤーの入力を記録
function recordInput(number) {
playerInput.push(number);
buttons.find(btn => btn.textContent == number).disabled = true;

if (playerInput.length === 9) {
checkResult();
} else {
message.textContent = `${playerInput.length}番目の数字を選択しました。`;
}
}

// 結果の判定
function checkResult() {
stopTimer();
if (JSON.stringify(playerInput) === JSON.stringify(correctSequence)) {
message.textContent = `おめでとうございます！クリアです。`;
clearTime.textContent = `クリアタイム: ${formatTime(getElapsedTime())}`;
} else {
message.textContent = '残念、順序が間違っています。';
}
startButton.textContent = 'もう一度プレイ';
startButton.style.display = 'block';
}

// ゲーム開始
function startGame() {
createButtons();
message.textContent = '1から9まで順番にクリックしてください。';
clearTime.textContent = '';
startButton.style.display = 'none';
startTimer();
}

// タイマーを開始する関数
function startTimer() {
startTime = new Date().getTime();
timerInterval = setInterval(updateTimer, 1000);
}

// タイマーを停止する関数
function stopTimer() {
clearInterval(timerInterval);
}

// タイマー表示を更新する関数
function updateTimer() {
const elapsedTime = getElapsedTime();
timer.textContent = formatTime(elapsedTime);
}

// 経過時間を計算する関数
function getElapsedTime() {
return Math.floor((new Date().getTime() - startTime) / 1000);
}

// 秒を「分:秒」形式にフォーマットする関数
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}

// スタートボタンのイベントリスナー
startButton.addEventListener('click', startGame);
</script>