点灯游戏原生JS实现与jQuery实现_jquery 开关灯小游戏-CSDN博客

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123607464

这篇博客介绍了如何使用JavaScript和jQuery分别实现一个点灯游戏。玩家手动输入行数和列数后，游戏开始，点击任一表格会使其及周围表格变黄，已变黄的表格再次点击则变灰。当所有表格都变为黄色时，游戏结束。JavaScript实现通过遍历和修改单元格的class来更新颜色，而jQuery实现利用选择器和事件监听简化了操作。

摘要由CSDN通过智能技术生成

效果图：

需求：

手动输入行数和列数点击开始游戏后生成表格，当点击某个表格时，当前表格以及其上下左右的表格都变为黄色。

如果，所点击的表格以及周围的表格（包含上、下、左、右）已经变为黄色，那就要求还变灰色。直到所有表格都变为黄色后，游戏结束

JavaScript实现：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点灯游戏</title>
    <style>
        * {
            overflow: auto;
            padding: 0px;
            margin: 0px;
        }

        .dd {
            float: left;
            border: 1px solid #000;
            width: 50px;
            height: 50px;
        }

        .gray {
            background: gray;
        }

        #tab {
            margin: 30px;
        }

        .light {
            background: yellow;
        }
    </style>
    <script>
        // 画表格
        function paintTable(row, col){
            var tableCon = ""; // 表格内容字符串
            for(var r = 1; r <= row; r++){ // 控制行数
                tableCon += "<div>";
                for(var c = 1; c <= col; c++){ // 控制列数
                    tableCon += "<div id=col_" + r + "_" + c + " class='dd gray'></div>";
                }
                tableCon += "</div>";
            }
            // 讲表格内容字符串添加到对应标签中
            document.getElementById("tab").innerHTML = tableCon;
        }

        // 开始游戏
        function playGame(){
            // 获取当前行和列
            var ROW = Number(row.value);
            var COL = Number(col.value);
            // 画表格
            paintTable(ROW, COL);
            // 统计总的点击次数
            var totalStep = 0;
            if(totalStep == 0){
                document.getElementById("st").innerText = "你还未开始走";
            }
            // 获取到所有的单元格
            var cellArr = document.getElementsByClassName("dd");
            for(var i = 0; i < cellArr.length; i++){
                // 为每个单元格添加事件
                cellArr[i].onclick = function(){
                    // 总步数加1
                    totalStep++;
                    var targetIdArr = new Array(this.id); // 初始化一个数组, 并添加当前单元格的id
                    // 获取当前单元格的行号和列号
                    var curRow = Number(this.id.split("_")[1]);
                    var curCol = Number(this.id.split("_")[2]);
                    // 获取上、下、左、右的单元格id, 并添加到数组中
                    if(curRow > 1){ // 判断当前单元格是否在第一行
                        targetIdArr.push("col_" + (curRow - 1) + "_" + curCol);
                    }
                    if(curRow < ROW){ // 判断当前单元格是否在最后一行
                        targetIdArr.push("col_" + (curRow + 1) + "_" + curCol);
                    }
                    if(curCol > 1) { // 判断当前单元格是否在第一列
                        targetIdArr.push("col_" + curRow + "_" + (curCol - 1));
                    }
                    if(curCol < COL){ // 判断当前单元格是否在最后一列
                        targetIdArr.push("col_" + curRow + "_" + (curCol + 1));
                    }
                    // 改变数组中存在的单元格的颜色
                    for(var j = 0; j < targetIdArr.length; j++){
                        var curCellClassName = document.getElementById(targetIdArr[j]).className;
                        // 判断当前单元格是否已变色
                        if(curCellClassName.indexOf("gray") != -1){
                            // 如果未变色
                            document.getElementById(targetIdArr[j]).className = "dd light";
                        } else {
                            document.getElementById(targetIdArr[j]).className = "dd gray";
                        }
                    }
                    document.getElementById("st").innerText = "你已经走了" + totalStep + "步";
                    // 游戏结束条件: 当所有单元格均变色
                    if(document.getElementsByClassName("dd gray").length == 0){
                        alert("恭喜你成功了！请提升难度继续开始吧。");
                    }
                }
            }
        }
    </script>
</head>

<body>
<div>
    请输入行数: <input id="row">
    请输入列数: <input id="col">
    <input type="button" value="开始游戏" onclick="playGame()">
    <h3 style="color:tomato" id="st"></h3>
</div>
<div id="tab">
    <!-- 表格内容 -->
</div>
</body>

</html>

jQuery实现：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery实现点灯游戏</title>
    <style>
        * {
            overflow: auto;
            padding: 0px;
            margin: 0px;
        }

        .dd {
            float: left;
            border: 1px solid black;
            width: 50px;
            height: 50px;
        }

        .gray {
            background: gray;
        }

        .light {
            background: yellow;
        }

        #con {
            margin: 30px;
        }

        #showStep {
            color: red;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
        function paint(row, col) {
            var tabContent = "";
            for (var r = 1; r <= row; r++) { // 控制行数
                tabContent += "<div>";
                for (var c = 1; c <= col; c++) { // 控制列数
                    tabContent += "<div id='col_" + r + "_" + c + "' class='dd gray' ></div>";
                }
                tabContent += "</div>";
            }
            // 将表格添加到标签
            $("#con").html(tabContent)
        }

        $(function () {
            $("#btn").click(function () {
                var totalStep = 0;
                $("#showStep").html("你还未开始走");
                // 获取行数和列数
                var ROW = Number($("#row").val());
                var COL = Number($("#col").val());
                // 画表格
                paint(ROW, COL);
                // 获取所有单元格
                $(".dd").each(function () {
                    $(this).click(function () {
                        totalStep++;
                        // 获取当前单元格的id
                        var curCellId = $(this).prop("id");
                        var ids = new Array(curCellId);
                        // 获取当单元格的行
                        var curRow = Number(curCellId.split("_")[1]);
                        var curCol = Number(curCellId.split("_")[2]);
                        // 获取上下左右单元格
                        if (curRow > 1) {
                            ids.push("col_" + (curRow - 1) + "_" + curCol);
                        }
                        if (curRow < ROW) {
                            ids.push("col_" + (curRow + 1) + "_" + curCol);
                        }
                        if (curCol > 1) {
                            ids.push("col_" + curRow + "_" + (curCol - 1));
                        }
                        if (curCol < COL) {
                            ids.push("col_" + curRow + "_" + (curCol + 1));
                        }
                        // 将单元格变色
                        $(ids).each(function (i, v) {
                            if ($("#" + v).hasClass("gray")) {
                                $("#" + v).removeClass("gray");
                                $("#" + v).addClass("light");
                            } else {
                                $("#" + v).removeClass("light");
                                $("#" + v).addClass("gray");
                            }
                        })
                        $("#showStep").html("你已经走了" + totalStep + "步")
                        // 判断游戏是否结束
                        if ($(".gray").size() == 0) {
                            alert("恭喜你成功了, 游戏结束");
                        }
                    })
                })
            })
        })
    </script>
</head>

<body>
    <div>
        请输入行数: <input id="row">
        请输入列数: <input id="col">
        <input type="button" value="开始游戏" id="btn"><br>
        <font id="showStep"></font>
    </div>
    <div id="con">

    </div>
</body>

</html>