How to make a high or low number game

أقسام الموقع: الإطار الزمني الرياضة معلومات سريعة العلوم الكون الصحة لغة وغيرها المنوعات الحيوانات باختصار

HOW TO MAKE A HIGH OR LOW NUMBER GAME USING HTML, JAVASCRIPT, AND CSS

This code will be about creating a simple number game, where the player will have to guess what the computer chose. The computer will show a message to the player whether his/her number is higher or lower than its number, until the player gets it right.

This game will have numbers from 0 to 99, but if you want to have more or less numbers, you can change them in the area below where the random function is. The maxlength function must be changed as well if you want to input any amount of numbers, which means that if you want to put one number in the box, then maxlength should be 1. Unless you want to make the input unlimited, then you can delete the maxlength function from this code.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>High or Low - 0 to 99</title>
</head>
<body>
    <style>
        #frame001 {
            background-color: lightblue;
            width: 400px;
            height: 400px;
            border: 2px solid black;
            border-radius: 4px;
        }

        #font001 {
            text-align: center;
            font-size: large;
            color: black;
        }
    </style>
    <div id="frame001">
        <div id="font001">
            <h2>High or Low - 0 to 99</h2>
            <text>Attempts: </text><text id="score001">0</text>
            <hr />
            <p id="message001"></p>
            <p id="message002"></p>
            <p id="message003"></p>
            <div id="disappear001">
                <p>Click on Begin to begin the game.</p>
                <button onclick="begin001()">Begin</button>
            </div>
        </div>
    </div>

    <script>
        var a;
        var count001 = 0;
        count001++;

        var numbers001 = Math.floor(Math.random() * 100);

        function begin001() {
            disappear001.innerHTML = "";
            message001.innerHTML = "Choose a number from 0 to 99.";
            message003.innerHTML = "<input type=text id=input001 maxlength=2 size=1 /><br /><br /><button onclick=submit001()>Submit</button>";
        }

        function submit001() {
            score001.innerHTML = count001++;
            var a = input001.value;
            if (a == numbers001) {
                message001.innerHTML = "Congratulations. You have guessed the right number.";
                message003.innerHTML = "<button onclick=repeat001()>Repeat</button>";
            }

            if (a > numbers001) {
                message001.innerHTML = "Your number is high. Try again.";
                message003.innerHTML = "<input type=text id=input001 maxlength=2 size=1 /><br /><br /><button onclick=submit001()>Submit</button>";
            }

            if (a < numbers001) {
                message001.innerHTML = "Your number is low. Try again.";
                message003.innerHTML = "<input type=text id=input001 maxlength=2 size=1 /><br /><br /><button onclick=submit001()>Submit</button>";
            }
        }

        function repeat001() {
            location.reload();
        }
    </script>
</body>
</html>

Here is a video of the above code.

OTHER RELATED PAGES:

Other Topics:

Crosswords- General Area
Human Body Facts
Nutritions Facts