复刻经典童年游戏扫雷之运营大大们来捉迷藏了

我正在参加掘金社区游戏创意投稿大赛团队赛，详情请看：游戏创意投稿大赛

我正在参加码上掘金体验活动，详情：show出你的创意代码块

队伍队员

前言

在决定做什么游戏之前，我们思考过做一个什么样的游戏，来参加此次的活动。比如制作一个全新的活动？或者对之前做过的小游戏进行更新丰富。最终我们选择了另一种方案复刻基本每个人都玩过的经典游戏扫雷,并进行升级更新(3D化)，带大家回忆经典的同时，体验一个不一样的扫雷。

游戏介绍

游戏预览

如何体验：

首先放上我们的游戏在线体验地址，点击链接即可直接体验。

或者可以在码上掘金运行并体验：

code.juejin.cn/pen/7090134…

部分相关设计及实现：

游戏的整体介绍可参见队友的文章运营大大们来捉迷藏了，你能找到他们吗？，文章中还能得奖励哦！

在这里简单给介绍一下 棋盘的初始化状态及反转后状态渲染 以及 游戏的通关判断

`棋盘的初始化状态及反转后状态渲染`

在扫雷中，原始的小方块是一个埋雷的坑，当点击了当前小方格时，会变成另一种状态，来标识当前坑已经被挖过雷或者标记棋子了。

在@小包的文章中介绍过，扫雷整体的界面就是一个棋盘式的网格

每个小方块代表着一颗埋雷的坑，会存在未点击 和 以点击两个状态，并显示不一样的颜色渲染。对于每个立方体的小方块，都有六个面，在我们的视角中只能看到三个面。我们将初始化能看到的面渲染成一种颜色，点击后，将颜色替换后背面颜色

<div class="cube">
  <div class="face"></div>
  <div class="face"></div>
  <div class="face"></div>
  <div class="face"></div>
  <div class="face"></div>
  <div class="face"></div>
</div>

未点击状态

.face:nth-child(1) {
  background-color: wheat;
  cursor: pointer;
  transform: rotateY(0deg) translateZ(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 30px;
  font-weight: bold;
}

点击后的已点击状态

.flipped .face:nth-child(1),
.flipped .face:nth-child(2),
.flipped .face:nth-child(6),
.flipped .face:nth-child(4),
.flipped .face:nth-child(5){
  background-color: #fdcb6e;
}

从而来达到不同状态的状态对比

`游戏的通关判断`

游戏的通关胜利有两种方式

用旗子标记出所有的雷
剩下没有点击的全是雷每次点击一个坑以后，进行判断。关键标识：
data-id 存放当前网格的横纵坐标
data-tile 存放当前是否为运营，如果是运营，则属性值不为空
data-num 存放周围运营数量的提示

判断第一种胜利的实现方式

找到所有插旗子的位置，判断旗子的数量和运营个数

当数量小于运营个数时，不会这种方式胜利，直接返回
数量等于大于时，当旗子正确标记到了运营，计数+1，达到所有的运营个数了，就直接胜利。实现代码：

    function checkFlagVictory() {
      const flagNum = document.querySelectorAll(".tile--flagged").length;
      if (flagNum != tileOptions.length) {
        return;
      }
      let cnt = 0;
      for (let tile of tiles) {
        let coordinate = tile.getAttribute("data-id");
        if (
          tile.classList.contains("tile--flagged") &&
          bombs.includes(coordinate)
        ) {
          cnt++;
        }
      }
      let win = cnt === tileOptions.length ? true : false;
      if (win) {
        gameOver = true;
        overlay.classList.remove("hidden");
        infoP.innerHTML = "恭喜你，成功找到所有运营!!!";
      }
    }

判断第二种胜利的实现方式

遍历棋盘，然后

如果剩被翻过的坑里面，全是雷（运营了），胜利
存在不是雷（运行）的，继续游戏。

实现代码：

const checkVictory = () => {
  let win = true;
  for (let tile of tiles) {
    let coordinate = tile.getAttribute("data-id");
    if (
      !tile.classList.contains("tile--checked") &&
      !bombs.includes(coordinate)
    ) {
      win = false;
    }
  }
  if (win) {
    gameOver = true;
    overlay.classList.remove("hidden");
    infoP.innerHTML = "恭喜你，成功找到所有运营!!!";
  }
};

源码仓库

源码地址: 3d寻找运营游戏在线体验

项目地址: 3d寻找运营游戏源码

如果大家觉得好玩，可以给点个 ⭐ 。

Ending

如果觉得我们的游戏有意思，可以给我们点个赞。（再说一遍，体验我们的游戏，在@小包的文章中还会送出一份精美礼品哦。说不定就是你的，赶紧去参加吧~🎉 ）

作为一个身处上海的混子选手。这个活动也给居家的我带来了很多解闷的小游戏，很棒。

也希望疫情能够早日结束，更加快乐的玩耍，加油~