Weex 版扫雷游戏开发

扫雷是一个喜闻乐见的小游戏,今天在看 Weex 文档的过程中,无意中发现用 Weex 完全可以开发一个扫雷出来。当然这个扫雷和 Windows 那个有一点差距,不过麻雀虽小五脏俱全,随机布雷、自动挖雷、标雷那是必须有的。

最后的效果是这个样子的:

界面是简陋了一点,好歹是可以用的,要啥自行车。其实这个 demo 主要是为了实践几件事情:

1. 界面指示器
2. 动态数据绑定
3. 更复杂的事件

扫雷的布局里面只需要用上 repeat 指示器,表示元素的重复出现,比如说一个 9*9 的雷区,布局文件非常的简单:

这样的话我们用 script 里面的 data binding 就能把重复的元素布局好。例如:

但是如果真的这么写的话,一个 9*9 的布局不知道要搞到什么时候,幸亏 data-binding 也是支持动态化的。所以在游戏开始后生成这个布局就好了。

初始化的时候生成每个节点的值,是否是一个雷,计算周围雷的总数,state 表示当前的状态(正常、挖开、标记),同时用 tid 来标记一个块(tile identifier)。

随机的在雷区布雷,直到满足个数:

然后做一次计算,把每个块周围的雷总数计算得到,这里有一个点可以优化,就是当点击第一次之后才去做布雷的操作,这样可以防止用户第一次就挂了。(如果你对扫雷有点了解的话,会知道在 Windows 扫雷里面,是出现过第一次点可能会挂和第一次点一定不会挂这两种的,区别就在这里)

这个计算做完之后,通过 Weex 的 data-binding 就彻底反映到了 View 上面,每个块都有了数据。这里面有个 map 函数,是定义在 script 里面的一个用于枚举位于 (x, y) 的块周围八个点的一个函数:

通过枚举把块 callback 回来,这个函数有多次用到。


然后绑定 onclick 和 onlongpress 函数,实现单击挖雷,长按标雷的功能。这里面的 tile 函数是通过事件发生的 event 对象取到元素的一个方法,值得一提的是这里面我试过官网说的 e.target.id 方法,拿到的是 undefined,所以我才在这里用了 tid 来标记一个元素。

玩过扫雷的都知道,当你挖开一个点,发现这个点周围一个雷都没有,那么程序会自动挖开这个点周围的八个点,同时这个行为会递归下去,直到一整片全部被挖开,在程序里面就是上面的 dfs 函数。

发现某个点为空之后进入 dfs,递归或者展示某个点。接下来就是对雷区局面的判定动作,分为 onfail 和 judge 两个部分。

当点开雷的时候直接进入 onfail,否则进入 judge,如果满足胜利条件则游戏也结束。Weex 的 data 模块里面可以定义一个 JSON 数据,除了做数据绑定,也可以方便的储存其他的数据。

最后

Weex 提供的指示器和数据绑定是不错的东西,用它们可以完成更灵活的界面布局和数据展现。

尤其是数据绑定,他让数值的变化可以直接反馈到界面上,省去了一些繁杂的界面更新逻辑。

这也许是一个不太实用的 demo,但我觉得很有趣。下面是源码:








阿里百川(baichuan.taobao.com)是阿里巴巴集团的无线开放平台,通过“技术、商业及大数据”的开放,提供移动场景下的高内聚、开放式、行业领先的技术产品矩阵、成熟的商业组件和完善的服务体系,帮助移动开发者快速搭建APP、加速APP商业化进程,全方位赋能移动开发者及移动创业者。

时间: 2024-11-09 20:56:09

Weex 版扫雷游戏开发的相关文章

wpf版扫雷游戏

近来觉得wpf做出来的界面很拉风,于是就去自学,发现感觉很不错,可是属性N多,太多了,而且质料也少,很多不会用,只会写基本的操作,样式直接百度黏贴在自己改改,于是属于自己的扫雷就出来了,也只能做这等游戏了,用的知识少,代码也不多,还能帮助自己提高熟练度,最后的感言还是多做才是王道啊,码农就是苦逼啊,wpf属性真是多啊,不过还是得学啊,下面也没什么好说的了,贴代码,扫雷也就一个递归而已 XAML 1 <Window x:Class="SweepMineUI.MainWindow"

c++ 控制台版 扫雷游戏

白天看了一天书看累了,晚上瞅见扫雷游戏,就自己琢磨着做一个呗.想了一会,也没看别人怎么做的,大概1个多小时完成了这个简单版本的扫雷游戏,由于没怎么学过c#,界面的事情可能迟几天再做,明天要回家啦,哈哈! 先说思路,其实挺简单的. (1) 随机生成10个雷,标记到二维数组里,然后计算八个方向的雷的总数记录下来,这是预处理阶段. (2)输入要翻开的位置的坐标,如果是数字直接显示,是空白的话,这里采用bfs即宽度优先搜索解决,搜到最外层是数字(仅一层)时结束,具体详见代码. // 扫雷程序 #incl

Js 网页版扫雷游戏代码实现

这个游戏是自己在大约一年前联系js熟练度时做的,用的都是基础的东西,最近比较忙没时间整理.直接发给大家,有兴趣的可以看一下.欢迎大家提出建议.如果你有什么新的想法也可以提出来,或者你并不擅长编程.你想做什么东西可以告诉我.我尽量帮你实现.不要在意标点符号什么的,,哈哈 废话不说了上代码: <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>zwcai

Cocos2d-x 3.x版2048游戏开发

今天给大家介绍如何快速开发2048这样一款休闲游戏,理解整个2048游戏的开发流程,从中你将可以学习到以下内容: 2048游戏的逻辑 Cocos2d-x中上下左右手势的识别 游戏中卡片类的创建 添加卡片到游戏中 游戏中的逻辑实现 游戏中随机卡片的生成 游戏结束判断 游戏分数的添加 游戏美化 笔者的开发环境:    Cocos2d-x 3.1.1(开发引擎)    Visual Studio 2012(Win32)    Xcode 5.1(Mac系统下) 这里注明一下,本教程来自极客学院,小巫对

C++实现简单的扫雷游戏(控制台版)

C++新手的代码,请各位多包涵. 用C++写的一个简单的控制台版扫雷游戏.玩家通过输入方块的坐标来翻开方块. 只是一个雏形,能够让玩家执行翻开方块的操作并且判断输赢,还未添加标记方块.游戏菜单.记录游戏时间.重新开一局等等的功能. 玩家输入坐标的方式来翻开方块只适用于小型的“雷区”,若“雷区”大了,用坐标会变得很不方便. 代码片段扫雷V1.1 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

红包扫雷游戏软件开发

微信红包扫雷游戏开发,微信红包扫雷软件开发,联系微电188-2624-7572. 微信扫雷游戏模式介绍:1.选 择做庄家的粉丝,发红包可设置多少金额,多少红包数,多少红包尾数为雷, 2.发出去红包后其它粉丝可抢,如果抢的红包尾数是庄家设置的尾数那则是中雷,则需把庄家发的红包金额发给庄家.   以上是做庄家发红包,庄家不会亏本的,总会有一个中雷的,每做一次庄平台会送相对应的积分,积分可去换购产品,做庄家稳赚不亏 再说说如果你做为玩家抢红包,首先条件是你余额需有你抢庄家红包对等的钱,打个比方,庄家发

C++游戏开发需要阅读的书籍

如果要自学游戏程序开发的话,可以看看下面的,呵呵. 游戏开发资料(PDF书都是中文版的,非英文,很多是本人自己扫描制作,从未网上发布过,所以独家啦):  1.Gamebryo 2.2游戏引擎(盛大.腾讯等公司制作网络游戏常用)+Gamebryo v2.2.1说明文档 2.游戏PDF书及其代码:  3D游戏编程.3D游戏编程大师技巧.Direct3D游戏编程入门教程第2版.DirectX角色扮演游戏编程  DirectX特效游戏程序设计.MFC windows程序设计第2版.MFC深入浅出.VC+

GuidelinesOfGameDevelopment游戏开发新手指引

# GuidelinesOfGameDevelopment Just give out some experience or directions on game development to green hands.分享经验或路线给新手们 正文:最新指引链接 游戏类型:手游.端游.页游.家用游戏(电视) 游戏相关职位: 客户端: 游戏逻辑(常见功能和特色功能开发),将用户体验做到极致,未来方向应该是主程.游戏制作人和游戏玩法创新.C#或Lua.js.我想说,让Lua滚出游戏界,算了,还是我退出

Unity3D游戏开发之如何发布Android游戏

怎么在Unity3D游戏开发软件里,发布Android游戏?如果你感到有疑问,不如看看下面笔者的介绍. 新装的软件会自带一个demo,我们的讲解就是拿demo打不一款Android游戏,点击File -> build seting.如果你已经创建好一个场景需要发布,也可以加载进来跟着以下的步骤进行. 我们要发布到Android平台上,所以在这里就需要选择Android平台,再点击player settings.当然这里还需要你对游戏的部署信息进行写修改,值得注意的是:如果你使用的是破解版Unit