游戏-猜数字

最新推荐文章于 2023-12-11 13:57:20 发布

奋斗中的切图猿

最新推荐文章于 2023-12-11 13:57:20 发布

阅读量230

点赞数

分类专栏： js练习题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44573096/article/details/106017370

版权

js练习题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

结果如下：
在这里插入图片描述代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #div1{
        width:270px;
        height:372px;
        background:url("img/timg.jpg") no-repeat;
        margin:0 auto;
        position:relative;
    }
    #div1 p{
        position:absolute;
        bottom:60px;
        left:0;
        width:100%;
        text-align:center;
    }
    </style>
</head>
<body>
    <button id="start">游戏开始</button>
    <input type="text" placeholder="请输入你猜的数字" id="number">
    <button id="btn">确定</button>
    <p>本次游戏猜测的次数：<span>0</span>次</p>
    <p>游戏最快记录：<span>0</span>次</p>       <!--表示最快几次猜到-->
    <div id="div1">
        <p id="p1"></p>
    </div>
    <script>
        var oStart=document.getElementById("start");
        var oNumber=document.getElementById("number");
        var oBtn=document.getElementById("btn");
        var aSp=document.getElementsByTagName("span");
        var oP=document.getElementById("p1");
        var iRandom=0;     //随机生成数
        var flag=false;   //控制是否开启游戏，否则没点开始游戏按钮，就能开始
        var iNow=0;    //当前游戏猜测的次数
        oStart.onclick=function(){
            iRandom=Math.round(Math.random()*99+1);
            oP.innerHTML="我已经记住了一个数字";
            flag=true;    //点击开始按钮，让flag开启
            // iNow=0;        //因为iNow是全局变量，所以每次游戏开始之前要让它请0
            aSp[0].innerHTML=iNow=0;
            oNumber.value="";
        }
        oBtn.onclick=function(){
            if(flag){
                if(oNumber.value!="" && parseInt(oNumber.value)==oNumber.value){//判断输入的是不是数字
                    // iNow++;    //每点击一次确认，让次数增加1
                    aSp[0].innerHTML = ++iNow;

                    // if(oNumber.innerHTML>iRandom+20){
                    //     oP.innerHTML="你的数字太大了";
                    // }else{
                    //     oP.innerHTML="你的数字有点大";
                    // }
                    // 换成三元运算
                    if(oNumber.value>iRandom){
                        oP.innerHTML=oNumber.value>iRandom+20 ? "你的数字太大了" :"你的数字有点大";
                    }else if(oNumber.value<iRandom){
                        oP.innerHTML=oNumber.value<iRandom-20 ? "你的数字太小了" :"你的数字有点小";
                    }else{
                        oP.innerHTML="你猜对了!";
                        flag=false;   //当猜对了就关掉flag，然后重新点击开始按钮，进行新一轮的游戏
                        if(aSp[1].innerHTML=="0"){
                            aSp[1].innerHTML=iNow;
                        }else if(iNow<aSp[1].innerHTML){
                            aSp[1].innerHTML=iNow;
                        }
                    }
                }else{
                    oP.innerHTML="请输入一个正整数";
                }
            }else{
                oP.innerHTML="请先开始游戏";
            }
        }
    </script>
</body>
</html>