はじめに

こんにちは。今回はタイマーをピッタリ10秒で止める遊び「10秒チャレンジ」を少し変えて
例えばクリスマスなら12.25秒にピッタリタイマーを止められたら成功という風に
選んだイベントの日付でピッタリタイマーを止めるゲームを作ってみました。

制作

今回使ったものとして
Googleスプレッドシート
SheetDB
HTML
JavaScript
を使いました。

1.Googleスプレッドシートの作成とAPI作成

Googleスプレッドシートにこのようにイベントの名前と日付を入力します。

次にこのシートをAPIに変えます。
今回はSheetDBを使いました。

2.コードの作成

今回はこのようなコードにしました。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>あ</title>
    <style>
        h1 {
            margin: 0;
            font-size: 50px;
        }

        body {
            text-align: center;
            margin-top: 50px;
            background-size: cover;
            background-repeat: no-repeat;
            color: black;
            font-size: 20px;
        }

        #timer {
            font-size: 100px;
            margin: 20px;
            transition: opacity 1s linear;
        }

        #result {
            font-size: 40px;
            margin-top: 20px;
            margin-bottom: 50px;
            color: black;
            min-height: 10px;
        }

        button {
            font-size: 24px;
            padding: 10px 20px;
            background-color: rgb(85, 195, 75);
            color: white;
            border: none;
            border-radius: 5px;
            display: inline-block;
            margin: 10px;
        }

        button:hover {
            background-color: rgb(0, 6, 128);
        }

        #resetButton {
            display: none;
        }

        #eventSelect {
            font-size: 20px;
            margin: 20px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <h1>〇〇秒チャレンジ</h1>
    <div id="timer">0.00秒</div>
    <p id="instructionText">Enterキーでスタートとストップできます</p>
    <button id="resetButton">リセット</button>
    <div id="result"></div>

    <h2>イベントを選択してください</h2>
    <select id="eventSelect"></select>
    <div id="selectedEvent"></div>

    <script>
        const apiUrl = 'SheetDBのエンドポイントURLをここに書く'; 
        let targetTime = 10; 
        let displayedTime = 0; 
        let timerInterval = null; 
        const eventSelect = document.getElementById('eventSelect');
        const selectedEventDiv = document.getElementById('selectedEvent');
        const timerDiv = document.getElementById('timer');
        const resultElement = document.getElementById('result');
        const resetButton = document.getElementById('resetButton');

        function getEventsFromAPI() {
            fetch(apiUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTPエラー ステータス: ${response.status}`);
                    }
                    return response.json(); 
                })
                .then(events => {
                    updateEventSelect(events);
                })
                .catch(error => console.error("データ取得エラー:", error));
        }

        function updateEventSelect(events) {
            eventSelect.innerHTML = '<option value="">イベントを選択</option>'; 
            events.forEach(eventItem => {
                const option = document.createElement('option');
                option.value = eventItem.date; 
                option.textContent = eventItem.event; 
                eventSelect.appendChild(option);
            });
        }

        eventSelect.addEventListener('change', function () {
            const selectedDate = this.value;
            if (selectedDate) {
                const [month, day] = selectedDate.split('/').map(Number);
                targetTime = parseFloat(`${month}.${day}`); 
                selectedEventDiv.textContent = `選択したイベント: ${this.options[this.selectedIndex].text}（目標: ${targetTime.toFixed(2)}秒）`;
            } else {
                targetTime = 10; 
                selectedEventDiv.textContent = "イベントが選択されていません";
            }
        });

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Enter') {
                toggleTimer(); 
            }
        });

        function toggleTimer() {
            if (timerInterval) {
                clearInterval(timerInterval);
                checkTime();
                resetButton.style.display = 'inline-block'; 
            } else {
                resetButton.style.display = 'none'; 
                timerInterval = setInterval(() => {
                    displayedTime += 0.01; 
                    timerDiv.textContent = displayedTime.toFixed(2) + "秒";
                }, 10);
            }
        }

        resetButton.addEventListener('click', () => {
           
            clearInterval(timerInterval);
            timerInterval = null; 
            timerDiv.textContent = "0.00秒"; 
            resultElement.innerHTML = ""; 
            displayedTime = 0; 
            resetButton.style.display = 'none'; 
            eventSelect.value = ""; 
            selectedEventDiv.textContent = "イベントが選択されていません"; 
        });

        function checkTime() {
            const timeDifference = Math.abs(targetTime - displayedTime);
            if (timeDifference <= 0.01) { 
                resultElement.innerHTML = `成功！ピッタリ ${targetTime.toFixed(2)}秒！おめでとう！`;
            } else if (timeDifference <= 0.5) {
                resultElement.innerHTML = `惜しい！${displayedTime.toFixed(2)}秒！`;
            } else {
                resultElement.innerHTML = `残念！${displayedTime.toFixed(2)}秒！`;
            }
        };

        getEventsFromAPI();
    </script>

</body>

</html>

3.動かした実際の画面

こちらが実際に動かした時の画面です。

このように例えば下のプルダウンでクリスマスを選べば12.25秒ピッタリを目指すゲームに、
ハロウィンを選べば10.31秒ピッタリを目指すゲームに変えることが出来ます。

最後に

今回このようなゲームを作ってみましたが元々10秒チャレンジ自体制作していて、
ハロウィンのイベントとして使っていました。そこで遊んでくれた人からせっかくの
ハロウィンだし10.31秒でタイマーを止めてみると発言していたところから今回のゲームを
制作しようと考えました。
このような機会がなければ作ろうと思わなかったかもしれないので
制作できてよかったです。
皆さんも是非、単純なゲームですがとても楽しいので作ってみてください。