前言
在决定做什么游戏之前,我们思考过做一个什么样的游戏,来参加此次的活动。比如制作一个全新的活动?或者对之前做过的小游戏进行更新丰富。最终我们选择了另一种方案复刻基本每个人都玩过的经典游戏 扫雷,并进行升级更新(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
如果觉得我们的游戏有意思,可以给我们点个赞。(再说一遍,体验我们的游戏,在@小包的文章中还会送出一份精美礼品哦。说不定就是你的,赶紧去参加吧~🎉 )
作为一个身处上海的混子选手
。这个活动也给居家的我带来了很多解闷的小游戏,很棒。
也希望疫情能够早日结束,更加快乐的玩耍,加油~