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

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

前言


在决定做什么游戏之前,我们思考过做一个什么样的游戏,来参加此次的活动。比如制作一个全新的活动?或者对之前做过的小游戏进行更新丰富。最终我们选择了另一种方案复刻基本每个人都玩过的经典游戏 扫雷,并进行升级更新(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;
-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,达到所有的运营个数了,就直接胜利。
    实现代码:
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


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


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


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

目录
相关文章
|
27天前
|
前端开发 安全 开发者
贪吃蛇游戏创作手记:从构思到优化
使用通义灵码辅助开发贪吃蛇游戏的过程,从游戏框架搭建到代码优化,详细记录了遇到的问题及解决方案。重点讨论了安全性、逻辑Bug、异常处理、边界条件、性能效率和可维护性等方面的优化措施,最终成功完成游戏开发
贪吃蛇游戏创作手记:从构思到优化
|
6月前
|
Java
普通玩家也能掌握的Java游戏加点系统,专业到让你无敌!
普通玩家也能掌握的Java游戏加点系统,专业到让你无敌!
37 1
|
人工智能
多子棋游戏的玩法设计
多子棋游戏的玩法设计
|
安全 程序员
学做游戏最重要的是学什么
解决问题的能力是一个人的最核心的技能,也是判断一个人游戏开发水平高低的决定性因素。你在做任何事情,尤其是刚接触一个新领域时,一定会遇到各种各样的问题,而其中大部分的问题你都从来没有遇到过。这个时候咋办呢? 最好最快的方式莫过于有一个有经验的老师可以带一带你,他可以指导一些方法和经验,回答你的一些疑问,告诉你哪里可能有“坑”......(小蚂蚁目前做的就是这些事情)。
102 0
|
开发者
游戏要从简单做起
嗨!大家好,我是小蚂蚁。 做游戏要从简单做起,尤其是对于新手开发者,一定要从简单做起。如果在啥也不会的时候,一上来就想做个大而复杂的,那结果只能是以失败告终。 有目标是好事情,但是前提是目标要合理,登顶珠峰是一个好目标,但是对于一个从未登山的人来讲,很显然这不适合当作第一个目标。
88 0
|
定位技术 开发者
如何做一个俄罗斯方块游戏(一)
从今天开始,我将开启一个新的游戏,并且顺带着会写一个新的系列教程,这个游戏就是人人都知道的——俄罗斯方块。 我一直都在做消除类型的游戏,在所有消除类型的游戏里,俄罗斯方块可以称得上是“鼻祖”了,所以,不论怎样这个系列里都不能少的了它。
147 0
|
算法 索引 容器
如何做一个俄罗斯方块游戏(二)
嗨!大家好,我是小蚂蚁。今天我们继续学习如何做一个俄罗斯方块游戏。整个系列教程计划按照这个流程图开展,这也是我制作整个游戏的过程,今天我们就来看一下“随机生成形状”这个模块。想要实现随机的生成形状,首先必须要知道在俄罗斯方块中一共有多少种形状(也就是我们上一节中留下的第二个问题)。
182 0
|
小程序
如何做一个泡泡龙游戏(一)
嗨!大家好,我是小蚂蚁。从今天开始,我将会用几篇文章讲一下如何制作一个泡泡龙游戏,泡泡龙是一个传统经典的消除游戏,也是一个经久不衰永不过时的游戏。 这篇文章我们主要来了解一下如何设置泡泡龙游戏的初始布局。
152 0
|
算法 小程序
如何做一个泡泡龙游戏(六)
嗨!大家好,我是小蚂蚁。 上一节中,我们学习了泡泡龙游戏中的查找算法,这个算法可以帮助我们找到所有相邻的相同颜色的泡泡,在查找完泡泡之后,再通过判断满足条件的泡泡的数量是否大于等于 3,来决定是否应该进行消除。
118 0
|
小程序 索引
如何做一个泡泡龙游戏(二)
嗨!大家好,我是小蚂蚁。今天我们继续学习制作一个泡泡龙游戏。 绝大部分的泡泡龙游戏都是关卡制的,你玩过了一关,然后接着再玩下一关。每个关卡其实都是预先设计好的,闯关的过程就是游戏将一个一个设计好的关卡呈现给玩家的过程。这些关卡都是怎样设计的呢?游戏又是怎样将这些设计好的关卡呈现出来的呢?欢迎带着这两个疑问开启今天的阅读之旅。
143 0