JavaScript实现颜色反转小游戏：点击变色过关

结果或目标

本游戏的核心目标是利用纯前端技术（HTML5 + CSS3 + JavaScript）实现一个交互式的益智游戏。玩家需要在网格中点击方块，触发连锁反应，最终达到特定条件以通关。

• 核心玩法：单击任意方块，该方块及其上下左右相邻的方块会发生颜色反转（蓝变橙，橙变蓝）。
• 胜利条件：当网格内所有方块均变为橙色时，判定关卡完成。
• 进阶机制：每过一关，网格规模将扩大（如从 $1\times1$ 到 $2\times2$ 再至 $3\times3$），且重新随机生成盘面，考验玩家的逻辑思维。

准备条件

实现该项目主要依赖以下技术手段，无需安装任何第三方库：

1. HTML 结构：用于定义标题、游戏规则说明、计分板及放置方块的游戏容器。
2. CSS 样式：负责布局居中、方块大小动态计算以及视觉反馈效果。
3. JavaScript 逻辑：作为核心驱动，处理点击事件、坐标判断、DOM 节点增删以及状态管理。

真实操作顺序

第1步：搭建页面基础框架

首先创建一个 HTML 文件。我们需要两个主要区域：左侧的信息区（显示规则、重置按钮和统计信息），右侧的主游戏区（存放色块）。

<div class="title">
  <h1>颜色翻转</h1>
  <!-- 规则与按钮 -->
  <div class="operBtn">
    <input type="button" id="reset" value="重新开始"/>
  </div>
</div>
<div class="main" id="main"></div>

第2步：设计布局与样式

使用 CSS 绝对定位让内容在屏幕中央显示。关键在于设置 .main 容器的大小固定（例如 600px），而内部的小方块数量随关卡变化，因此方块的宽高需要通过 JS 动态计算或在 CSS 中配合 Flex/Grid 布局处理。

/* 简单的中心布局示意 */
.main {
  width: 600px;
  height: 600px;
  background: #555;
  border-radius: 8px;
}
.blue, .orange {
  /* 初始尺寸，后续由JS控制 */
}

第3步：编写初始化逻辑

使用 window.onload 确保 DOM 加载完毕后再执行脚本。我们需要定义全局变量记录当前等级（level）、点击次数等数据。

创建方块的方法是遍历 n x n 的网格，根据当前等级动态计算每个方块的宽和高，并为每个方块添加唯一的 ID 属性以便通过坐标查找。

var level = 1; // 初始等级
function createNewDiv() {
  var divWidth = mainWidth/level-margin;
  var divHeight = mainHeight/level-margin;
  mainNode.innerHTML = ""; // 清空旧方块
  
  for(var i=1; i<=level; i++) {
    for(var j=1; j<=level; j++) {
      var colorNodes = document.createElement("div");
      // 设置唯一ID格式：r行_c列
      colorNodes.setAttribute("id", "r"+i+"_c"+j);
      colorNodes.onclick = function() { nodesChangeColor(this); };
      // 插入DOM...
    }
  }
}

第4步：实现核心变色算法

这是游戏最关键的步骤。当用户点击某个方块时：

1. 获取坐标：解析被点击元素的 ID，提取出行号 (r) 和列号 (c)。
2. 变色操作：切换自身以及上下左右四个方向相邻元素的颜色 Class（blue ↔ orange）。
3. 边界检查：在改变相邻元素前，必须判断坐标是否越界（例如：r-1 > 0）。

function nodesChangeColor(obj) {
  changeColor(obj); // 变色自己
  
  var obj_r = parseInt(obj.getAttribute("r"));
  var obj_c = parseInt(obj.getAttribute("c"));
  
  // 变上方
  if(obj_r-1>0) {
    var topObj = document.getElementById("r"+(obj_r-1)+"_c"+obj_c);
    changeColor(topObj);
  }
  // ... 类似处理左、右、下 ...
  
  setTimeout(function() { orangeDivNum(); }, 500); // 延迟检测胜利
}

第5步：判定胜利与升级

每次变换结束后，统计当前页面上所有橙色方块的数量。如果数量等于总方块数（即 level * level），则判定闯关成功。

function orangeDivNum() {
  var o_nodes = document.getElementsByClassName("orange");
  if(o_nodes.length == level*level) {
    level += 1; // 提升等级
    createNewDiv(); // 重新生成更大网格
    // 提示玩家过关
  }
}

完成判断

当你在浏览器中打开该 HTML 文件时，若看到全屏居中的网格界面，点击任意色块周围色块随之变色，且在全部变为橙色后能自动弹出提示并增加网格密度，即表示游戏逻辑完整闭环。

简要总结

这个项目虽小，但涵盖了 Web 开发中最基础的“渲染-交互-逻辑反馈”循环。它展示了如何通过字符串拼接 ID 来模拟二维数组的邻接关系，以及如何利用 DOM API 进行高效的 UI 更新。对于初学者而言，这是一个非常好的练手题目，后续可尝试引入更复杂的 AI 算法（如搜索最短步骤）来实现电脑自动求解功能。