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

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

前言

在队长战场小包和队员Ylimhs的齐心协力下，捉迷藏的运营大大们的小游戏算是成功上线了，之前队长战场小包有对整个游戏的总体进行了一个大概的介绍和主要模块的展示，那今天由我来带大家看看，我们当初是如何设计翻牌模块的。

一.游戏的设计思路

其实大家也看出来了，这个是扫雷的变种版，所以核心的设计思想还是再不触碰到'雷'的前提下，把事先设置好的所有运营'找出来'，全部找到则代表赢得胜利，反之则失败。

二.游戏效果和体验地址

1)游戏效果

code.juejin.cn/pen/7088118…

2)体验地址：

体验地址

三.主要剖析的点

1.如何实现鼠标点击后，小方块翻面及判断是否是'雷'

1)进入页面后会预先随机生成小方块并随机给这些小方块赋值，可能是某个运营也可能是'雷'，如下图所显示的这么一个效果

2)鼠标点击小方块后，小方块翻面，包含踩雷判断

3)AC代码：

function clickTile(tile) {
//当点击每个小方块的时候都会做如下判断
1.该方块是否已被点击，即已经翻面，显示数字或运营头像
2.该方块是否已被标记，即插上旗帜
  if (
    tile.classList.contains("tile--checked") ||
    tile.classList.contains("tile--flagged") ||
    tile.classList.contains("flipped")
  )
    return;
  tile.classList.add("flipped");
  let coordinate = tile.getAttribute("data-id");
  let isMine = tile.getAttribute("data-tile");
  if (isMine) {
    gameOver = true;
    //如果触碰到'雷'或者将所有运营找到则游戏结束，显示相应文案
    endGame(tile);
  } else {
    let num = tile.getAttribute("data-num");
    if (num != null) {
      tile.classList.add("tile--checked");
      tile.querySelectorAll(".face")[2].innerHTML = num;
      tile.querySelectorAll(".face")[2].style.color = numberColors[num - 1];
      setTimeout(() => {
        checkVictory();
      }, 100);
      return;
    }
    //
    checkTile(tile, coordinate);
  }
  tile.classList.add("tile--checked");
}

四.在游戏的开发中遇到了哪些问题&解决方案

1)在初始3D效果化小方块时前期的效果渲染很慢，一卡一卡的，非常影响体验

解决方案：从动态的js方法改成css来渲染

2)翻转小方块时如果不控制速度有问题

解决方案：将翻转的速度控制在200左右

结束语

在这个小游戏的开发过程中遇到很多问题，因为不是经常写前端代码，对这些效果渲染什么的不是很得心应手，得亏有小包大佬引导还有队员Ylimhs的协助，不然游戏写出来会有很多样式和功能bug。另外，掘友们做的小游戏都很有意思，也希望这款小游戏你们也能喜欢，谢谢。

捉迷藏的运营大大们之[翻牌]剖析