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

墨蓝 2022-06-03 03:05 197阅读 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库

图片：![Center][]

[Center]: /images/20220603/f4812bbefc0b4d979a84108713ec0769.png