JQuery+HTML+CSS实现简单打地鼠

不_玩

于 2023-08-25 17:31:21 发布

阅读量181

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/Bu_Wan/article/details/132500270

版权

程序展示图：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现打地鼠</title>
    <link rel="stylesheet " href="all.css">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<h1 id="h1-1"></h1>
<h1 id="h1-2"></h1>
</body>
</html>

<script>
    $(() => {
        //获取表格属性
        let $td = $('td');
        //设置所有表格背景都不显示
        $td.css('background', 'none');
        //分数
        let fraction = 0;
        //难度
        let difficulty = 0;
        let bl = false;
        //地鼠出现时间
        let time = 1000;
        //设置定时器循环执行
        let interval1 = setInterval(() => {
            //循环td对象
            $td.each(() => {
                //设置空字符串用于后面判断
                $td.text('');
                //控制每次循环都只有一个表格显示
                $td.css('background', 'none');
                //随机循环一个表格
                let number = Math.floor(Math.random() * $td.length);
                //给循环的表格一个空格字符串用于后面判断
                $($td[number]).text(' ');
                //设置当前循环的td对象显示背景图片，就是出现地鼠
                $($td[number]).css({'background-image': 'url("1.png")', 'background-size': '200px 200px'});
            });
        }, time);
        $td.click((event) => {
            //获取当前点击对象
            let currentTarget = event.currentTarget;
            //获取当前点击td对象的字符串内容
            let text = $(currentTarget).text();
            if (text === '') {
                //如果为空就本次点击事件就在控制台打印空
                console.log('空')
            } else {
                //如果点击的td表格不为空就说明有空格字符串和背景图片
                fraction++;//分数先加上一
                let $h1 = $('#h1-1');
                $h1.text('当前得分:' + fraction)//再给h1标签设置内容为当前分数
                //判断分数不是0并且和5取余等于0
                if (fraction !== 0 && fraction % 5 === 0) {
                    //定时器执行时间减100毫秒
                    time -= 100;
                    //设置定位器为true
                    bl = true;
                }
                let $h2 = $('#h1-2');//设置h2标签为难度级别
                //每一次改变时间难度级别都增加
                if (bl) {
                    //当时间改变的时候说明已经取得了继上一次获得了五分
                    difficulty++;//难度几级别加一
                    bl = false;
                }
                $h2.text('当前难度级别:' + difficulty)//把难度级别设置给h2标签
            }
            $(currentTarget).text('');//点击后再设置空字符串
            $(currentTarget).css('background', 'none')//背景图片也消失
        });
    })
</script>

CSS代码：

*{
    margin:0;
    padding: 0;
}

table{
    position: relative;
    left:30%;
}

td{
    text-align: center;
    width: 200px;
    height: 200px;
    border: #21c2ff 3px solid;
    cursor: url("2_32x32.png"),pointer;
    background-image:url("1.png");
    background-size: 200px 200px;

}


h1{
    text-align: center;
}