一个简单网页游戏--丑陋的连连看

最新推荐文章于 2024-07-26 10:36:56 发布

choosezzz

最新推荐文章于 2024-07-26 10:36:56 发布

阅读量757

点赞数 1

分类专栏： web前端文章标签： html js jquery

本文链接：https://blog.csdn.net/dingse/article/details/78818814

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

主页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>连连看</title>
    <style type="text/css">
        span{color: red}
        table{background-color: #dca7d4}
        td{border-style: solid;border-color: midnightblue;width: 100px;height: 100px;text-align: center;font-size: large}
        .change {background-color: #6d60dc;opacity:0.8}
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function(){

            $("#start").click(function(){

                $(this).attr("disabled",true);
                var time=60;
                var i=0;//记录每次点击的个数
                var a=new Array();//存放点击事件的值
                var count=0;
                $("#s").show();
                $("#div").slideDown();

                //计时器
                var timer=setInterval(function(){
                    $("#time").html(time);
                    time--;
                    if(time<0){
                        clearInterval(timer);
                        $("#div").slideUp();
                        $("#div2").slideDown();
                    }
                },1000);
                /**
                 * 对表格的初始化以及点击事件绑定
                 */
                $("td").each(function(){
                    $(this).html(parseInt(Math.random()*300)%10);
                    //为每个表格绑定点击事件
                    $(this).click(function(){
                        if($(this).prop("class")=="change"){
                            //不执行任何操作
                        }else{
                            $(this).prop("class","change");//将点击过的表格添加class属性
                            a.push($(this).html());//记录当前点击的数值
                            i++;//记录点击次数
                            if(i%2==0){//每两次点击事件判断一下是否相等
                                //弹出最后两个数值
                                var t1= a.pop();
                                var t2= a.pop();
                                //alert(t1+";"+t2);
                                if(t1==t2){
                                    //如果两个值相等，则重新为两个表格赋值
                                    $(".change").each(function(){
                                        $(this).html(parseInt(Math.random()*300)%10);
                                    });
                                    count++;//分数增加
                                }
                                //点击两次之后重新清除class属性
                                $(".change").prop("class","");
                            }
                        }
                        //显示分数信息
                        $("#score").html(count);
                    });
                });
            });
        });
    </script>
</head>
<body>
<input type="button" value="开始游戏" id="start"/>
<div style="display:none" id="s">
    <h2>你的得分：<span id="score">0</span></h2>
    剩余时间：<span id="time"></span> s
    <hr/>
</div>
<div style="display: none;position: absolute;top: 135px" id="div">
    <table boder="1">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

<div style="display: none;position: absolute;top: 135px;background-image: url('GameOver.jpg');width: 530px;height: 530px;" id="div2">
    <a href="linkTest.html">再来一次</a>
    <a href="exitTest.html">退出游戏</a>
</div>
</body>
</html>

退出页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script>
        window.close();
    </script>
</head>
<body>

</body>
</html>

用到了JQuery1.1库

图片：