前言
在决定做什么游戏之前，我们思考过做一个什么样的游戏，来参加此次的活动。比如制作一个全新的活动？或者对之前做过的小游戏进行更新丰富。最终我们选择了另一种方案复刻基本每个人都玩过的经典游戏 扫雷,并进行升级更新(3D化)，带大家回忆经典的同时，体验一个不一样的扫雷。
游戏介绍
游戏预览
如何体验：
首先放上我们的游戏在线体验地址，点击链接即可直接体验。
或者可以在码上掘金运行并体验：
https://code.juejin.cn/pen/7090134661124325409
部分相关设计及实现：
游戏的整体介绍可参见队友的文章 运营大大们来捉迷藏了，你能找到他们吗？，文章中还能得奖励哦！
在这里简单给介绍一下 棋盘的初始化状态及反转后状态渲染 以及 游戏的通关判断
棋盘的初始化状态及反转后状态渲染
在扫雷中，原始的小方块是一个埋雷的坑，当点击了当前小方格时，会变成另一种状态，来标识当前坑已经被挖过雷或者标记棋子了。
在@小包的文章中介绍过，扫雷整体的界面就是一个棋盘式的网格
每个小方块代表着一颗埋雷的坑，会存在未点击 和 以点击两个状态，并显示不一样的颜色渲染。
对于每个立方体的小方块，都有六个面，在我们的视角中 只能看到三个面。我们将初始化能看到的面渲染成一种颜色，
点击后，将颜色替换后背面颜色
<divclass="cube"><divclass="face"></div><divclass="face"></div><divclass="face"></div><divclass="face"></div><divclass="face"></div><divclass="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; user-select: none; user-select: none; 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，达到所有的运营个数了，就直接胜利。
实现代码：
functioncheckFlagVictory() { constflagNum=document.querySelectorAll(".tile--flagged").length; if (flagNum!=tileOptions.length) { return; } letcnt=0; for (lettileoftiles) { letcoordinate=tile.getAttribute("data-id"); if ( tile.classList.contains("tile--flagged") &&bombs.includes(coordinate) ) { cnt++; } } letwin=cnt===tileOptions.length?true : false; if (win) { gameOver=true; overlay.classList.remove("hidden"); infoP.innerHTML="恭喜你，成功找到所有运营!!!"; } }
判断第二种胜利的实现方式
遍历棋盘，然后
- 如果剩被翻过的坑里面，全是雷（运营了），胜利
- 存在不是雷（运行）的，继续游戏。
实现代码：
constcheckVictory= () => { letwin=true; for (lettileoftiles) { letcoordinate=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
如果觉得我们的游戏有意思，可以给我们点个赞。（再说一遍，体验我们的游戏，在@小包的文章中还会送出一份精美礼品哦。说不定就是你的，赶紧去参加吧~🎉 ）
作为一个身处上海的混子选手。这个活动也给居家的我带来了很多解闷的小游戏，很棒。
也希望疫情能够早日结束，更加快乐的玩耍，加油~
