Using js to implement a number guessing game

Last week, the teacher gave me a small homework, which was to play a number guessing game. I thought it was quite interesting, so I just wrote it casually. The logic in some places is not very reasonable (please don’t criticize me if you are a newbie student). The main content is to randomly generate positive integers from 0 to 100. Guess six times and each time you guess whether you guessed too high or too low. If you make a mistake, the heart will turn black. After the result is completed, a prompt box will pop up to ask whether to continue. If you continue, refresh the page (the principle and content are very simple, just for commemoration)

The sample diagram and code are attached (the correct answer is printed in the console in advance)

The principle and content are very simple, so I won’t go into details (the picture is downloaded from iconfont, you can download it yourself)

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .ran {
        margin: 100px auto;
        padding-left: 40%;
    }
    ul {
        list-style: none;
    }
    ul img {
        width: 20px;
        height: 20px;
        float: left;

    }
</style>
<body>
    <div class="ran">
        <h1>Guess the number</h1>
        <h3>Please enter a positive integer from 0 to 100</h3>
        <input type="text" onchange="handlenum()">
        <button class="but" click="li()">OK</button>
        <ul>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
            <li><img src="./x1.png" alt=""></li>
        </ul>
    </div>
    <script>
        // let but = document.querySelector('but')
        let inp = document.querySelector('input')
        let img = document.querySelectorAll('img')
        let num = Math.round(Math.random()*100)
        let i = 0
        console.log(num);
        function handlenum() {}
        function li () {
            i++
            if (i<6) {
                let guess = parseInt(inp.value)
                0<guess<100? guess :alert('Please enter a positive integer from 0 to 100')

                if (guess === num) {
                    if (confirm('Congratulations, you guessed it right, do you want to continue the game')) {
                            window.location.reload();
                        }
                    } else {
                        guess>num? alert("bigger"):alert('smaller')
                        img[6-i].src = './x2.png'
                    }
            } else {
                if (confirm('The number of times has been used up, do you want to restart')) {
                    window.location.reload();
                } 
            }
        }
    </script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js to implement pop-up window guessing number game
An example of a code for a guessing game based on JavaScript
JS guessing number game example explanation
JavaScript to implement the number guessing game
JS implements a web-based guessing game
jsp+servlet to realize the number guessing game
An example of generating random numbers and guessing the size of numbers implemented by AngularJS
AngularJS implements the function of guessing the size of numbers
js implements a number guessing game
Simple implementation code of js guess number game

<<: Detailed explanation of commands to read and write remote files using Vim in Linux system

>>: Ubuntu 20.04 Chinese input method installation steps