egret微信小游戏扫雷游戏开发基本思路

简介: egret微信小游戏扫雷游戏开发基本思路
推荐阅读:

今天给大家介绍传统扫雷游戏的制作思路吧,为什么选择这个游戏呢?
1.它太金典了,金典到我们都知道,都玩过,都会玩;
2.它也是一个轻量级的小游戏,比较简单。

我们先来捋一下扫雷游戏中的要素

从上到下的UI:遮罩层——>雷层——>数字层——>底层背景层。

下面来介绍一下制作流程:

1.我们制作的时候需要从底层开始做起,首先是底层背景层,只需要一张图片就ok了,作为游戏的背景;
2.按道理来水,我们应该接下来做数字显示层。可能有些朋友和我一样,一开始认为是先把数字标好再去布雷,其实应该是先布雷,再根据布雷情况给每个格子标数字,所以我们接下来是做雷层。
在这里提供给大家最简单的布雷思路:遍历n*m个格子,每个格子随机指定是否是雷。为了不让生成雷的概率过大,我们可以根据概率来决定是否生成雷。
3.生成每个格子的遮罩层:遍历n*m个格子,分别创建一个Button。
4.根据玩家点击的格子位置,判断周围8个格子雷的数量显示数字。

现在我就来剖析一下扫雷的制作思路:

1.创建地图,并随机生成雷

   在这里我们创建一个m*n的地图,用二维数组存储地图信息,0代表无雷,1代表又雷。由于ts不能直接使用二维数组,需要借助一维数组帮助,使用方法如下:  
let arr = new Array();
for (let i = 0; i < m; i++) 
{
    arr[i] = new Array();
    for (let j = 0; j < n; j++)   
    {
        let num;//num=0或num=-1
        arr[i][j] = num;
    }
}  

2.判断当前点击的是否是雷。

    &nbsp;&nbsp;&nbsp;在玩家点击了一个[i][j]格子时,我们需要判断接下来游戏的状态:
    1.如果不是雷,则计算该格子周围雷的个数。我们需要计算格子周围8个数中雷的个数,显示在当前格子上。 如下图:
![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/img_convert/665ba30350be57a2c3556352a3198ec9.jpeg)

        //不是炸弹,创建数字
            else {
                if (evt.currentTarget.x - this.currentCellW == this.bowContainer.getChildAt(i).x && evt.currentTarget.y - this.currentCellH == this.bowContainer.getChildAt(i).y) { this.bowNum++; }
                if (evt.currentTarget.x - this.currentCellW == this.bowContainer.getChildAt(i).x && evt.currentTarget.y == this.bowContainer.getChildAt(i).y) { this.bowNum++; }
                if (evt.currentTarget.x - this.currentCellW == this.bowContainer.getChildAt(i).x && evt.currentTarget.y + this.currentCellH == this.bowContainer.getChildAt(i).y) { this.bowNum++; }
                if (evt.currentTarget.x == this.bowContainer.getChildAt(i).x && evt.currentTarget.y - this.currentCellH == this.bowContainer.getChildAt(i).y) { this.bowNum++; }
                if (evt.currentTarget.x == this.bowContainer.getChildAt(i).x && evt.currentTarget.y + this.currentCellH == this.bowContainer.getChildAt(i).y) { this.bowNum++; }
                if (evt.currentTarget.x + this.currentCellW == this.bowContainer.getChildAt(i).x && evt.currentTarget.y - this.currentCellH == this.bowContainer.getChildAt(i).y) { this.bowNum++; }
                if (evt.currentTarget.x + this.currentCellW == this.bowContainer.getChildAt(i).x && evt.currentTarget.y == this.bowContainer.getChildAt(i).y) { this.bowNum++; }
                if (evt.currentTarget.x + this.currentCellW == this.bowContainer.getChildAt(i).x && evt.currentTarget.y + this.currentCellH == this.bowContainer.getChildAt(i).y) { this.bowNum++; }
            }
       textNum.text = this.bowNum.toString();

2.如果是雷,则显示所有雷,游戏失败。在第一步生成地图的时候我们顺便也应该生成雷,这时候我们比较友好的做法是把所有的雷装进一个雷的数组,方便这里失败时的显示。

///点击某个方格后显示对应信息
        //遍历雷,看当前对象是否是雷
        for (var i = 0; i < this.bowContainer.numChildren; i++) {
            //如果是雷,显示所有雷
            if (evt.currentTarget.x == this.bowContainer.getChildAt(i).x && evt.currentTarget.y == this.bowContainer.getChildAt(i).y) {
                this.gamePanel.addChildAt(this.bowContainer, 4);
                this.failM.play(0, 1);
                //地图上所有按钮不可点击
                this.lockAllBtn();
                this.showBannerAd("adunit-4a5e80c193902450");
                // this.showVideoAd("adunit-4ad7c6693898c4b0", this.VideoAdSuccess, this.VideoAdfail);
                break;
            }

3.自动展开无雷区域

&nbsp;&nbsp;&nbsp;先给大家讲讲标题的含义。即当前点击的格子不是雷,寻找周围的8个格子,如果8个格子中其中至少有一个不存在雷,找到该种格子,继续寻找周围8个格子判断是否存在不为雷的。如此反复迭代  

上述方法采用的是迭代递归的思想,其实该方法效率并不高,但作为初学者我们能实现此功能就ok了。
4.胜利判断

&nbsp;&nbsp;&nbsp;就差最后一步了,当然是判断胜利了,其实方法很简单,只需要判断剩下未点击的格子数是否等于雷的个数。
扫雷的算法就介绍给大家了,这个算法是我第一次做扫雷时候使用的,可能不是特别完美,有什么建议或意见的,大家可以在下方留言哦!
相关文章
|
5月前
|
存储 缓存 Unix
微信小游戏制作工具中实现计时功能
微信小游戏制作工具中实现计时功能
148 0
|
4月前
|
编解码 数据可视化 小程序
微信小游戏开发(第一篇
微信小游戏开发(第一篇
156 0
|
12月前
|
存储 Serverless
微信小游戏制作工具中的函数应该如何使用
在微信小游戏制作工具中是没有私有函数这个概念的,也就是说所有的函数都是公共的,大家都可以使用,而且函数也没有返回值的概念,想拿到函数运行的结果只能通过设置一个全局变量,将结果存储在全局变量中,然后通过这个全局变量来使用。这种方法有很多的弊端,尤其是在有大量的克隆体存在时,每个克隆体都使用同一个函数,都去设置同一个全局变量,就会造成意想不到的结果。
219 0
|
12月前
|
移动开发 数据可视化 开发工具
微信小游戏制作工具与 Scratch 的区别
不少同学问微信小游戏制作工具跟 Scratch 有什么不同,它们看上去是有一些类似的,比如说都是使用的积木化的编程方式(这应该是最大的相似点),它们之间到底是不是一个东西呢?我要学习的话应该选择哪个呢? 我今天专门录制了一段短视频,从两个角度来分析了它们之间的区别。如果你更愿意看视频的话,可以忽略下方的文字,直接看视频(另外欢迎大家关注我的视频号,学习更多与做游戏有关的知识和内容)。
210 0
|
12月前
微信小游戏无代码开发视频教程合集3
嗨!大家好,我是小蚂蚁。 昨天给大家整理了一份图文教程的合集资料,有同学问了,有没有视频学习资料呀!俺就喜欢喜欢看视!这个咱也有。这篇给大家整理一下今年录制的几个视频的合集,建议收藏,假期安排时间,好好学习。悄悄的做个游戏,然后惊艳很多人。 这些视频都是免费的,强烈建议收藏,另外如果对你有帮助的话,欢迎点赞,分享鼓励小蚂蚁继续创作。
80 0
|
12月前
微信小游戏无代码开发视频教程合集2
嗨!大家好,我是小蚂蚁。 有同学问了,有没有视频学习资料呀!俺就喜欢喜欢看视频学呢!这个咱也有。这篇给大家整理一下今年录制的几个视频教程的合集,建议收藏,假期安排时间,好好学习。悄悄的做个游戏,然后惊艳很多人。 强烈建议收藏,另外如果视频对你有帮助的话,欢迎点赞,分享鼓励小蚂蚁继续创作。
65 0
|
12月前
|
开发工具
微信小游戏无代码开发视频教程合集1
昨天给大家整理了一份图文的合集资料,有同学问了,有没有视频学习资料呀!俺就喜欢喜欢看视频学呢!这个咱也有。这篇给大家整理一下今年录制的几个视频教程的合集,建议收藏,假期安排时间,好好学习。悄悄的做个游戏,然后惊艳很多人。 强烈建议收藏,另外如果视频对你有帮助的话,欢迎点赞,分享鼓励小蚂蚁继续创作。
80 0
|
12月前
|
缓存 小程序 数据库
微信小游戏开发系列教程
嗨!大家好,我是小蚂蚁。这里整理了一下公众号中写过的一些教程文章,它们已经帮助过很多人做出了自己的第一款游戏,希望还能够继续帮助更多想要做游戏的朋友,进入游戏开发世界的大门。
77 0
|
12月前
|
小程序 开发工具
彻底搞清微信小游戏开发中的循环的使用
本文主要内容为游戏开发中常用的循环的使用方法。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
128 0
|
12月前
|
小程序 开发者
两个月之后,我终于成功申请到了微信小游戏公测
在精致1010游戏上线两个月之后,我终于成功的申请到了游戏公测的资格,在此记录一下整个过程以及一些对于做微信小游戏的一些思考。 对于每一个上线的微信小游戏,官方都会提供一次“游戏公测”的机会,所谓的游戏公测就是指官方会给你一些初期的用户,大概是在几千个左右,一是帮助开发者尽快的达到开通流量主的条件(需要累积 1000 个用户才可开通),另一个也算是送给微信小游戏开发者的一项福利了。
260 0

热门文章

最新文章