HTML+CSS+JavaScript------你画我猜

半糖不加奶

于 2023-04-01 11:02:09 发布

阅读量289

点赞数 2

文章标签： javascript html css 开发语言前端

本文链接：https://blog.csdn.net/qq_51365907/article/details/129894307

版权

这里利用静态页面和js写一个你画我猜的小游戏，页面做的比较丑，但是基本功能都实现了，倒计时，答对加一分，答错不加分等。具体见代码。

页面：

HTML代码：

<body>
<div id="content">
    <div id="box">
        <div id="box_left">
            <span id="text_time">本局剩余时间(单位:秒)</span>
            <span id="raminf_time">200</span>
        </div>
        <div id="box_right">
            <div id="box_right_top1">第几题</div>
            <div id="box_right_top2">得分</div>
            <h2 id="title" class="font_center">你画我猜</h2>
            <h2 id="text" class="font_center">你准备好了吗</h2>
            <button id="start">开始游戏</button>
            <button id="yes">对</button>
            <button id="no">错</button>
        </div>
    </div>
</div>
</body>

css代码：

<style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #content{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #box_left{

            width: 300px;
            height: 200px;
            background: #6f6f6f;
            position: absolute;
            text-align: center;
            left: 30%;
            top: 25%;
        }
        #box_right{
            width: 300px;
            height: 200px;
            background: rgba(169, 50, 50, 0.99);
            position: absolute;
            text-align: center;
            left: 54%;
            top: 25%;
        }
        #text_time{
            position: relative;
            top: 30px;
            text-align: center;
        }
        #raminf_time{
            position: absolute;
            top: 80px;
            left: 120px;
            font-size: 35px;
            color: #a70000;
        }
        #box_right_top1{
            position: absolute;
            left: 15px;
        }
        #box_right_top2{
            position: absolute;
            right: 35px;
        }
        #start {
            position: absolute;
            bottom: 15px;
            left: 125px;
        }
        #title{
            position: absolute;
            top: 50px;
            left: 100px;
        }
        #text{
            margin-top: 100px;
        }
        #yes{
            position: absolute;
            bottom: 15px;
            left: 125px;
            display: none;
        }
        #no{
            position: absolute;
            bottom: 15px;
            right: 115px;
            display: none;
        }
    </style>

JavaScript代码：

<script type="text/javascript">
    $(document).ready(function () {
        var nexttext=["鬼哭狼嚎","飞檐走壁","凤姐","犀利哥",
            "三长二短","抱头鼠窜","鸡鸣狗盗",
            "头破血流","坐井观天","眼高手低","目瞪口呆",
            "胸无点墨","父亲","黑猫警长","僵尸","老六",
            "山清水秀","高瞻远瞩","五丈原","长明灯","盗墓笔记",
            "金三胖","武警","火警","天涯海角","九寨沟","稻城亚丁",
            "日照金山",
            "鸡飞狗跳","鼠目寸光","盲人摸象","画蛇添足",
            "画龙点睛","抱头鼠窜","狗急跳墙","虎背熊腰",
            "守株待兔","亡羊补牢","对牛弹琴","如鱼得水",
            "打草惊蛇","打草惊蛇","走马观花","三头六臂",
            "东施效颦","面条","米饭","牛肉面","豆腐","擀面皮","肉夹馍",
            "吕布","曹操","关羽","周杰伦","西安","兰州","鄂尔多斯","神木","包头"];
        //题目数
        var num=0;
        //成绩
        var score=0;
        //时间
        var time1 =200;
        //定时器
        var dsq=null;


    function next() {
      var next=Math.random()*nexttext.length;
      next=Math.floor(next);
      var Text1 = nexttext[next];
      $("#text").html(Text1);
  }


        $("#start").click(function () {
            next();
            $("#start").css("display","none");
            $("#yes").css("display","block");
            $("#no").css("display","block");

            dsq = setInterval(function() {
                if (time1 == 0) {
                    dsq=clearInterval(time1);
                    alert("本次得分："+score);
                    location.reload();
                }else{
                    time1--;
                  $("#raminf_time").html(time1);
                }
            },1000);
        });

        $("#yes").click(function () {
            score++;
            num++
            //$("#box_right_top2").html("得分",score);
            $("#box_right_top2").html("得分:" + score);
            $("#box_right_top1").html("第"+num+"题");
            next();
        });
        ("#no").click(function () {
            num++
            $("#box_right_top1").html("第"+num+"题");


            next();
        });
    })
</script>