首页 > 专用服务器 > 游戏服务器

Weex 版扫雷游戏开发

游戏服务器 游戏服务器 2020-10-13 0 开源 阿里巴巴 weex

扫雷是一个喜闻乐见的小游戏,今天在看 Weex 文档的过程中,无意中发现用 Weex 完全可以开发一个扫雷出来。当然这个扫雷和 Windows 那个有一点差距,不过麻雀虽小五脏俱全,随机布雷、自动挖雷、标雷那是必须有的。最后的效果是这个样子的:Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

界面是简陋了一点,好歹是可以用的,要啥自行车。其实这个 demo 主要是为了实践几件事情:Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

1. 界面指示器2. 动态数据绑定3. 更复杂的事件扫雷的布局里面只需要用上repeat指示器,表示元素的重复出现,比如说一个 9*9 的雷区,布局文件非常的简单:Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

这样的话我们用 script 里面的 data binding 就能把重复的元素布局好。例如:Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

但是如果真的这么写的话,一个 9*9 的布局不知道要搞到什么时候,幸亏 data-binding 也是支持动态化的。所以在游戏开始后生成这个布局就好了。Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

初始化的时候生成每个节点的值,是否是一个雷,计算周围雷的总数,state表示当前的状态(正常、挖开、标记),同时用tid来标记一个块(tileidentifier)。Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

随机的在雷区布雷,直到满足个数:Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

然后做一次计算,把每个块周围的雷总数计算得到,这里有一个点可以优化,就是当点击第一次之后才去做布雷的操作,这样可以防止用户第一次就挂了。(如果你对扫雷有点了解的话,会知道在 Windows 扫雷里面,是出现过第一次点可能会挂和第一次点一定不会挂这两种的,区别就在这里)Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

这个计算做完之后,通过 Weex 的data-binding就彻底反映到了 View 上面,每个块都有了数据。这里面有个 map 函数,是定义在 script 里面的一个用于枚举位于 (x, y) 的块周围八个点的一个函数:Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

通过枚举把块 callback 回来,这个函数有多次用到。Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

然后绑定onclick和onlongpress函数,实现单击挖雷,长按标雷的功能。这里面的 tile 函数是通过事件发生的 event 对象取到元素的一个方法,值得一提的是这里面我试过官网说的e.target.id方法,拿到的是undefined,所以我才在这里用了 tid 来标记一个元素。Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

玩过扫雷的都知道,当你挖开一个点,发现这个点周围一个雷都没有,那么程序会自动挖开这个点周围的八个点,同时这个行为会递归下去,直到一整片全部被挖开,在程序里面就是上面的 dfs 函数。Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

发现某个点为空之后进入 dfs,递归或者展示某个点。接下来就是对雷区局面的判定动作,分为 onfail 和 judge 两个部分。Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

当点开雷的时候直接进入 onfail,否则进入 judge,如果满足胜利条件则游戏也结束。Weex 的 data 模块里面可以定义一个 JSON 数据,除了做数据绑定,也可以方便的储存其他的数据。Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

最后Weex 提供的指示器和数据绑定是不错的东西,用它们可以完成更灵活的界面布局和数据展现。Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

尤其是数据绑定,他让数值的变化可以直接反馈到界面上,省去了一些繁杂的界面更新逻辑。这也许是一个不太实用的 demo,但我觉得很有趣。下面是源码:Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Weex 版扫雷游戏开发Weex 版扫雷游戏开发Weex 版扫雷游戏开发Weex 版扫雷游戏开发Weex 版扫雷游戏开发Weex 版扫雷游戏开发Weex 版扫雷游戏开发Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

阿里百川(baichuan.taobao.com)是阿里巴巴集团的无线开放平台,通过“技术、商业及大数据”的开放,提供移动场景下的高内聚、开放式、行业领先的技术产品矩阵、成熟的商业组件和完善的服务体系,帮助移动开发者快速搭建APP、加速APP商业化进程,全方位赋能移动开发者及移动创业者。Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

Weex 版扫雷游戏开发Pk3香港云服务器_物理独立服务器_VPS虚拟主机免费备案、租用测评、优惠排名 - VPS巴士

版权声明

本文内容由互联网用户自发贡献,版权归用户所有,本站不为本文内容承担相关法律责任。如有侵犯您的合法权利,请联系本站进行删除。

留言与评论(共有 条评论)

   
验证码:

标签列表

VPS巴士

统计代码 | 京ICP1234567-2号

Powered By VPS巴士

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯