打地鼠（HTML/CSS/JS）

鱼丸子蛋汤

于 2024-03-18 23:12:30 发布

阅读量338

点赞数 4

分类专栏：前端项目文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_52841164/article/details/136825098

版权

前端项目专栏收录该内容

7 篇文章 0 订阅

订阅专栏

写了两个版本，第一个dadishu.js更蠢一点；第二个dadishu2.js更节能

打地鼠dadishu.js整体思路

1.制作3*3的表格

2.创建一个地鼠图片并添加到随机单元格中

3.给地鼠图片添加点击事件（2s内需点击一次）

4.点击成功后刷新页面，此时地鼠又会随机出现

补充

将sum值保存在本地存储中，这样sum不会随着reload而清零，sum=4（连续四次2s内都点击了）即成功

打地鼠dadishu2.js整体思路

1.制作3*3的表格

2.每个单元格都添加地鼠的图片，并全部隐藏（添加hidden类）

3.随机生成一个数，显示该数位置的地鼠（去除该位置的hidden类）

4.如果点击到去除hidden类的（即显示的）地鼠，触发点击事件

5.点击事件3s内触发3次，成功；否则失败

完整代码

dadishu.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打地鼠</title>
    <link rel="stylesheet" type="text/css" href="dadishu.css">
</head>

<body>

    <div class="bg">
        <div class="frame">
            <table class="box">
                <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>
        </div>
        <div class="countdown">倒计时：</div>
    </div>
    <script src="dadishu2.js"></script>

</body>

</html>

dadishu.js

// 获取表格
var table = document.querySelector(".box");
// 获取单元格
var cells = table.getElementsByTagName("td");
// 生成随机数，范围在0-8
var randomIndex = Math.floor(Math.random() * 9);
// 随机单元格
var randomCell = cells[randomIndex];

// 创建一个新的老鼠图片元素
var img = document.createElement("img");
img.src = "./image/Mouse5.png"
img.classList.add('img');// 添加样式类

// 将老鼠图片添加到随机单元格中
randomCell.appendChild(img);


//下面被注释的这种方法不行，因为每次reload之后sum=0，永远不会alert("成功");
// var sum=0;
// // 正确点击（即页面重加载）三次输出“成功”
// img.addEventListener("click", function () {
//     console.log(sum);
//     // 如果页面重新加载次数达到 4，则输出 "成功"
//     if (sum === 4) {
//         alert("成功");
//     } else {
//         sum++;
//         // 如果页面重新加载次数未达到 3，则重新加载页面
//         location.reload();
//     }
// });


// 下面这种方法可以，因为将sum值保存在本地存储中，sum不会随着reload而清零

// 获取页面重新加载次数
var sum = parseInt(localStorage.getItem('sum')) || 1;
// 初始倒计时时间（秒）
var timeLeft = 2;

// 显示倒计时器
var timerDisplay = document.createElement('div');
timerDisplay.textContent = '倒计时：' + timeLeft + '秒';
timerDisplay.classList.add('countdown');// 添加样式类
document.body.appendChild(timerDisplay);

// 更新倒计时器
function updateTimer() {
    timeLeft--;
    timerDisplay.textContent = '倒计时：' + timeLeft + '秒';
}

// 给地鼠图片添加点击事件处理程序
img.addEventListener("click", function () {
    // 如果页面重新加载次数达到 4，则输出 "成功"
    console.log(sum);
    if (sum % 4 == 0) {
        alert("成功");
        // 清除本地存储中的 sum 值
        localStorage.removeItem('sum');
        sum = 1;
        clearInterval(countdownTimer); // 停止倒计时器
    } else {
        // 如果页面重新加载次数未达到 4，则重新加载页面并增加 sum 的值
        sum++;
        localStorage.setItem('sum', sum); // 将新的 sum 存储到 localStorage 中
        location.reload();
    }
    // clearInterval(countdownTimer); // 停止倒计时器
    // 重置倒计时
    timeLeft = 2;
    updateTimer();
});


// 设置定时器，在每秒更新倒计时器
var countdownTimer = setInterval(function () {
    if (timeLeft != 0) {
        console.log("倒计时:"+timeLeft);
        updateTimer();
    } else {
        console.log("失败");
        // 倒计时结束
        clearInterval(countdownTimer);
        // 如果在倒计时结束后仍然没有点击，则输出 "失败"
        if (sum % 4 != 0) {
            alert("失败");
            // 清除本地存储中的 sum 值
            localStorage.removeItem('sum');
            sum = 1;
        }else{
            alert("游戏结束");
        }
    }
}, 1000);

dadishu2.js

// 获取表格
var table = document.querySelector(".box");
// 获取单元格
var cells = [...table.getElementsByTagName("td")];

// 计时器变量
var timer;
// 获取倒计时显示
var timerDisplay = document.querySelector(".countdown");

// 胜利条件
var winCondition = 3;

// 给每个单元格增加点击监听事件：点击老鼠->老鼠消失->再随机出现老鼠
cells.forEach(function (cell) {
    cell.addEventListener('click', function () {
        var clickedImg = cell.querySelector("img");
        if (clickedImg && !cell.classList.contains("hidden")) {// 点击了出现的老鼠
            clickedImg.style.display = "none";// 该老鼠消失
            cell.classList.add("hidden"); // 隐藏被点击的老鼠
            clickCount++;// 点击次数+1
            console.log("点击次数" + clickCount);
            if (clickCount >= winCondition) {
                alert("成功");
                initGame(); // 重新开始游戏
            } else {
                show();// 再重新随机显示一只老鼠
            }
        }
    });
});

//------随机显示一只老鼠
function show() {
    // 隐藏所有老鼠
    cells.forEach(function (cell) {
        cell.classList.add("hidden");
    });
    var randomIndex = Math.floor(Math.random() * 9); // 生成一个随机索引，范围为0-8
    cells[randomIndex].classList.remove("hidden"); // 移除hidden=显示老鼠
    console.log("老鼠出现在" + randomIndex);
}

// //------随机显示1-3只老鼠
// function show() {
//     // 隐藏所有老鼠
//     cells.forEach(function (cell) {
//         cell.classList.add("hidden");
//     });

//     // 随机选择1-3个单元格显示老鼠，并添加标记
//     var numMiceToShow = Math.floor(Math.random() * 3) + 1; // 随机选择1-3
//     var shownMice = 0;
//     while (shownMice < numMiceToShow) {
//         var randomIndex = Math.floor(Math.random() * 9); // 生成一个随机索引，范围为0-8
//         if (cells[randomIndex].classList.contains("hidden")) {
//             cells[randomIndex].classList.remove("hidden");
//             cells[randomIndex].classList.add("shown-mouse"); // 添加标记
//             shownMice++;
//         }
//     }
//     console.log("显示了" + numMiceToShow + "只老鼠");
// }

//------开始计时器，判断输赢
function startTimer() {
    var timeLeft = timeLimit; // 剩余时间
    timer = setInterval(function () {
        timeLeft--;
        timerDisplay.textContent = '倒计时：' + timeLeft + '秒';
        if (timeLeft < 0 && clickCount < winCondition) {// 时间到且点击次数小于获胜条件（3次）
            alert("时间到，失败");
            initGame(); // 重新开始游戏
        }
    }, 1000);
}

//------初始化游戏
function initGame() {
    clickCount = 0;// 点击次数0
    timeLimit = 3;// 倒计时3s

    for (var i = 0; i < cells.length; i++) {
        // 移除单元格内已有的老鼠图片
        // 此处非常重要，因为每次调用initGame()时都向每个单元格添加了新的老鼠图片，
        // 而没有移除之前添加的老鼠图片，导致单元格内老鼠图片的堆叠，最终导致单元格变得越来越大
        var existingImg = cells[i].querySelector("img");
        if (existingImg) {
            cells[i].removeChild(existingImg);
        }

        var img = document.createElement("img");
        img.src = "./image/Mouse5.png";
        img.classList.add('img');// 添加img样式类
        cells[i].appendChild(img);// 添加老鼠图片
    }
    clearInterval(timer); // 清除计时器
    startTimer(); // 开始计时器
    show(); // 随机显示一只老鼠
}

// 初始化游戏
initGame();

dadishu.css

* {
    margin: 0;
    padding: 0;
}

/* 草地背景 */
.bg {
    background-image: url('image/back.jpg');
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

/* 游戏界面背景 */
.frame {
    background-image: url('image/Map.png');
    height: 550px;
    width: 750px;
    margin: auto;
    cursor: url('image/Poke.png'), auto;
    /* border: 2px solid pink; */
}

/* 表格：九个坑 */
.box {
    border-collapse: collapse;
    width: 570px;
    margin: auto;
    position: relative;
    /* 设置为相对定位 */
    top: 180px;
    /* 使用 top 属性来往下移动 */

}

/* 单元格 */
.box td {
    width: 150px;
    height: 100px;
    /* border: 1px solid black; */
}

/* 地鼠图片 */
.img {
    width: 90px;
    height: 80px;
    margin-left: 60px;
}

/* 倒计时 */
.countdown {
    font-size: 30px;
    /* 设置字体大小 */
    margin-left: 100px;
    color: white;
}

/* 隐藏 */
.hidden {
    visibility: hidden;
}