Riddle Escape Game

以下は、JavaScriptを使用して実装されたHTMLファイルです。このゲームは、ソースコードのヒントを使って謎を解く謎解きゲームです。セキュリティ上の問題を回避するため、evalを使用していません。また、他のサイトへのリダイレクトも行っていません。

<!DOCTYPE html>
<html>
<head>
    <title>Riddle Escape Game</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #F2F2F2;
        }
        h1 {
            text-align: center;
            margin-top: 50px;
        }
        #question {
            margin-top: 50px;
            font-size: 20px;
            text-align: center;
        }
        #answer {
            margin-top: 20px;
            text-align: center;
        }
        #submit-button {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Riddle Escape Game</h1>
    
    <div id="question">
        <p>I am always hungry,<br>
        I must always be fed.<br>
        The finger I touch,<br>
        Will soon turn red.</p>
    </div>
    
    <div id="answer">
        <form id="answer-form">
            <label for="answer-input">What am I?</label><br>
            <input type="text" id="answer-input"><br>
            <button type="submit" id="submit-button">Submit</button>
        </form>
    </div>
    
    <script>
        // 問題の答え
        const answer = "fire";
        
        // Submitボタンがクリックされたときに実行する関数
        function checkAnswer(e) {
            e.preventDefault();
            
            // 入力された回答を取得
            const userAnswer = document.getElementById("answer-input").value.toLowerCase();
            
            // 入力された回答が問題の答えと一致するかを確認
            if (userAnswer === answer) {
                alert("You have solved the riddle! Congrats!");
            } else {
                alert("Sorry, that is not the correct answer. Please try again.");
            }
        }
        
        // Submitボタンのイベントリスナーを追加
        document.getElementById("answer-form").addEventListener("submit", checkAnswer);
        
        console.log("Hint: Look at the first letter of each line in the question.");
    </script>
</body>
</html>

※ジョークは「私は常に空腹であり、常に餌を与えなければならない。私が触れた指は、すぐに赤くなる」という問題の答えからのヒントです。