猜数字游戏

最新推荐文章于 2024-03-16 15:50:03 发布

sun_wz

最新推荐文章于 2024-03-16 15:50:03 发布

阅读量295

点赞数

分类专栏：程序员小姿文章标签：小游戏 js html

本文链接：https://blog.csdn.net/L6_6LXXX/article/details/100542812

版权

程序员小姿专栏收录该内容

15 篇文章 0 订阅

订阅专栏

猜数字游戏

界面：

初始状态

$[外链图片转存失败(img-Ahi4BtJE-1567587823225)(C:\Users\13467\AppData\Roaming\Typora\typora-user-images\1567587460526.png)]$

运行时

在这里插入图片描述

css:

<style>
    #body{
        width: 500px;
        height: 400px;
        background: url(img/timg.jpg) no-repeat;
        background-size: cover;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        border: 5px dotted chocolate;
        box-shadow: 10px 10px 10px #FFDAB9;
        border-radius: 10px;
    }
    #title{
        height:50px;
        font: arial;
    }
    #rule{
        height:20px;
        color: red;
        font-size: 15px;
        font: arial;
        margin-left: 10px;
    }
    #hint{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: peachpuff;
        margin: auto;
        position: relative;
        font: 50px;
        line-height: 200px;
        box-shadow: 5px 5px 5px coral;

    }


    #count{
        margin: 10px ;

        font-size: 20px;
        font: arial;
    }

    #inputNum{
        width: 500px;
        height: 200px;
        margin: 10px;
    }
    #num{
        width: 350px;
        height: 40px;
    }

    .button{
        width: 50px;
        height: 45px;
    }
    .close {
        width: 38px;
        height: 37px;
        position: absolute;
        top: 0;
        right: 0;
        background: url(img/关闭.png);
        background-position: 0px -1px;
    }

    .close:hover {
        width: 38px;
        height: 37px;
        position: absolute;
        top: 0;
        right: 0;
        background-position: -43px -1px;
        cursor:pointer;
    }
</style>

html:

<div class="close" onclick="close0();">
    <a href="#"></a>
</div>
<div id="title" align="center"><h1>欢迎来到数字猜猜乐</h1></div>
<div id="rule">规则：随机生成 1~100，看看几次能猜对啊！</div>
<div id="hint" align="center" style="font-size: 30px;"></div>
<div id="count">
    <span class="countt">已猜次数：</span>
    <span class ="countv"></span>
</div>
<div id="inputNum">
    <input type="text" placeholder="请输入数字" id="num" onfocus="this.select();"  onmouseup="this.select();" />
    <button type="button" class="button" onclick="game()">提交</button>
</div>

js:

<script>
    var num1 = parseInt(Math.random()*101);
    var count = 0;
    console.log(num1);
    document.getElementsByClassName("countv")[0].innerText = count;
    function game(){
        count++;
        document.getElementsByClassName("countv")[0].innerText = count;
        var num = 	(document.getElementById("num").value);
        if(num==num1){
            var b = confirm("恭喜你答对了,要不要再来一次啊 @v@ ");
            if(b){
                count = 0;
                document.getElementsByClassName("countv")[0].innerText = count;
                document.getElementById("hint").innerHTML = "";
                num1 = parseInt(Math.random()*101);
                console.log(num1);
            }else{
                window.location.href="http://127.0.0.1:8020/Demo05/gameMain.html"; 
            }

        }else if(num<num1){
            document.getElementById("hint").innerHTML = "猜小啦！~_~";
        }else if(num>num1){
            document.getElementById("hint").innerHTML = "猜大啦！n_n";
        }

    }

    function close0() {
        document.getElementById("body").style.display = 'none';
    };	
</script>