The Girl Who Leapt Through Time's game | AI game creator

Click here for free DL of the app version that can save data.

No:7162

988

The Girl Who Leapt Through Time
Developer User3977｜Date and time 23/7/5 21:43:45
Build time 22.724 sec｜Game capacity 3.865KB｜

60

→ 　

1　

0　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>時をかける少女</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #timer {
            font-size: 48px;
            margin-top: 100px;
        }
        #start-button {
            font-size: 24px;
            padding: 10px 20px;
            margin-top: 20px;
            cursor: pointer;
        }
        #game-area {
            display: none;
        }
        #result {
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="timer">60</div>
    <button id="start-button">Start</button>
    <div id="game-area">
        <div id="question"></div>
        <input type="text" id="answer-input">
        <button id="check-button">Check</button>
        <div id="result"></div>
    </div>

<script>
        var time = 60;
        var timerInterval;
        
        // ゲームスタートの処理
        function startGame() {
            document.getElementById('start-button').disabled = true; // Startボタンを無効化
            document.getElementById('game-area').style.display = 'block'; // ゲームエリアを表示
            generateQuestion(); // 問題を生成
            startTimer(); // タイマーを開始
        }
        
        // 問題生成の処理
        function generateQuestion() {
            var operand1 = Math.floor(Math.random() * 10) + 1; // 1から10までのランダムな数を生成
            var operand2 = Math.floor(Math.random() * 10) + 1;
            var question = operand1 + ' × ' + operand2 + ' = ??'; // 問題文を作成
            document.getElementById('question').textContent = question; // 問題文を表示
            document.getElementById('answer-input').value = ''; // 答えの入力欄をクリア
            document.getElementById('result').textContent = ''; // 結果メッセージをクリア
        }
        
        // タイマーの処理
        function startTimer() {
            timerInterval = setInterval(function() {
                time--; // 1秒ごとにカウントダウン
                document.getElementById('timer').textContent = time; // タイマーを表示
                
                if (time === 0) {
                    clearInterval(timerInterval); // タイマーを停止
                    endGame(); // ゲーム終了
                }
            }, 1000);
        }
        
        // プレイヤーの答えのチェック
        function checkAnswer() {
            var answer = parseInt(document.getElementById('answer-input').value);
            var operands = document.getElementById('question').textContent.split(' × ');
            var product = parseInt(operands[0]) * parseInt(operands[1]);
            
            if (answer === product) {
                document.getElementById('result').textContent = 'Correct!'; // 正解メッセージを表示
                generateQuestion(); // 次の問題を生成
            } else {
                document.getElementById('result').textContent = 'Incorrect. Try again.'; // 不正解メッセージを表示
            }
        }
        
        // ゲーム終了の処理
        function endGame() {
            document.getElementById('start-button').disabled = false; // Startボタンを有効化
            document.getElementById('game-area').style.display = 'none'; // ゲームエリアを非表示
            document.getElementById('timer').textContent = '60'; // タイマーをリセット
            time = 60; // 時間をリセット
        }
        
        document.getElementById('start-button').addEventListener('click', startGame);
        document.getElementById('check-button').addEventListener('click', checkAnswer);
    </script>
</body>
</html>