Simple HTML Number Guessing Game - Fun and Easy to Play - 常规

<!DOCTYPE html>
<html>
<head>
    <title>Guess the Number</title>
    <style>
        body {
            background-color: #d2b48c;
            font-family: sans-serif;
            font-size: 18px;
            color: #000000;
        }
        #game {
            margin: auto;
            padding: 20px;
            width: 400px;
            background-color: #c0c0c0;
            text-align: center;
            border-radius: 10px;
        }
        #guess {
            font-size: 20px;
            width: 40px;
            padding: 5px;
            margin: 10px;
            border-radius: 10px;
            border: none;
        }
    </style>
</head>
<body>
    <div id='game'>
        <h1>Guess the Number</h1>
        <p>I'm thinking of a number between 1 and 10. Can you guess it?</p>
        <form>
            <input id='guess' type='text' name='guess'>
            <input type='submit' value='Guess'>
        </form>
    </div>
    <script>
        let randomNumber = Math.floor(Math.random() * 10) + 1;
        let guess = document.querySelector('#guess');
        let submit = document.querySelector('input[type=submit]');
        let form = document.querySelector('form');
<pre><code>    form.addEventListener('submit', checkGuess);

    function checkGuess(e) {
        e.preventDefault();
        if (parseInt(guess.value) === randomNumber) {
            alert('You guessed it! Congratulations!');
        } else {
            alert('Sorry, that's not the number I'm thinking of. Try again!');
        }
    }
&lt;/script&gt;
</code></pre>
</body>
</html>