用JS实现的猜数字游戏

落日映苍穹つ 2023-10-09 11:45 94阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script defer type="text/javascript" src="JS/jquery-3.4.1.min.js"></script>
        <script defer type="text/javascript" src="JS/newone.js"></script>
        <style>
            .div1 {
                width: 20%;
                height: 100px;
                border: solid black 1px;
                margin: 0 auto;
                text-align: center;
                font-size: 18px;
            }
    
            p {
                display: block;
            }
    
            .div2 {
                width: 20%;
                display: block;
                margin: 0 auto;
                text-align: center;
            }
    
            .input1 {
                display: inline-block;
                margin: 0 auto;
            }
    
            .button1 {
                display: inline-block;
                margin: 0 auto;
            }
            .div3 {
                width: 100%;
                height: 400px;
                display: block;
                margin: 0 auto;
                text-align: center;
                overflow-y: scroll;
            }
            .div3 p{
                line-height: 20px;
            }
        </style>
    </head>
    <body>
    <div class="div1" id="dva1"></div>
    <div class="div2">
        <input placeholder="请输入1-100之间的值" class="input1" id="inputs" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
        <button class="button1" id="buttons">提交</button>
    </div>
    <div class="div3"></div>
    </body>
    </html>

/*2019年9月25日09:17:48*/
    $(function () {
        var randomnumber = Math.floor(Math.random() * 100) + 1;
        var usernum;
        var none = 0;
        var flag = 0;
        $('#buttons').on('click', function () {
                usernum = $('#inputs').val();
                if (usernum > randomnumber) {
                    if (none == 1) {
                        $('#dva1 p:last-child').remove();
                    }
                    $('#dva1').append("<p>高了</p>");
                    GameKeep(1);
                    none = 1;
                } else if (usernum == randomnumber || usernum == 1) {
                    if (none == 1) {
                        $('#dva1 p:last-child').remove();
                    }
                    $('#dva1').append("<p>恭喜你猜对了！</p>");
                    GameKeep(2);
                    $('#dva1').append("<button class='button1' id='buttons1'>再来一局</button>");
                    none = 1;
                }
                else {
                    if (none == 1) {
                        $('#dva1 p:last-child').remove();
                    }
                    $('#dva1').append("<p>低了</p>");
                    GameKeep(3);
                    none = 1;
                }
            }
        );
        $('#dva1').on('click', '#buttons1', function () {
            GameOver();
        });
        //游戏结束后数据清除
        function GameOver() {
            none = 0;
            flag = 0;
            $('#dva1 p').remove();
            $('#dva1 button').remove();
            $('#inputs').val('');
        }
    
        //游戏进行中的控制，包括数次路径和焦点重置。
        function GameKeep(issum) {
            flag++;
            if (issum == 1) {
                $('.div3').append("<p>" + "第" + flag + "次:输入的值为" + usernum + "。输入的值高了" + "</p>");
            } else if (issum == 2) {
                $('.div3').append("<p>" + "第" + flag + "次:输入的值为" + usernum + "。你猜对了" + "</p>");
            } else {
                $('.div3').append("<p>" + "第" + flag + "次:输入的值为" + usernum + "。输入的值低了" + "</p>");
            }
            $('#inputs').val('');
            $('#inputs').focus();
        }
    });