Weex 版扫雷游戏开发
2019独角兽企业重金招聘Python工程师标准>>>
扫雷是一个喜闻乐见的小游戏,今天在看 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商业化进程,全方位赋能移动开发者及移动创业者。
转载于:https://my.oschina.net/alibaichuan/blog/702671
Weex 版扫雷游戏开发相关推荐
- Weex 版扫雷游戏开发 1
扫雷是一个喜闻乐见的小游戏,今天在看 Weex 文档的过程中,无意中发现用 Weex 完全可以开发一个扫雷出来.当然这个扫雷和 Windows 那个有一点差距,不过麻雀虽小五脏俱全,随机布雷.自动挖雷 ...
- 利用java开发简易版扫雷游戏
1.简介 学了几周的Java,闲来无事,写个乞丐版的扫雷,加强一下Java基础知识. 2.编写过程 编写这个游戏,一共经历了三个阶段,编写了三个版本的游戏代码. 第一版:完成了扫雷游戏的基本雏形,实现 ...
- Cocos2d-xna : 横版战略游戏开发实验5 TiledMap实现关卡地图
Cocos2d-xna : 横版战略游戏开发实验5 TiledMap实现关卡地图 在前面的几篇中动手实验使用了CCSprite.CCScene.CCLayer.CCAction.CCMenu等coco ...
- python3.7魔塔游戏_基于Funcode平台的“火锅版魔塔”游戏开发与设计
2019 年第 2 期 信息与电脑 China Computer & Communication 软件开发与应用 基于 Funcode 平台的"火锅版魔塔"游戏开发与设计 ...
- Java版AVG游戏开发入门示例 3 ——脚本引擎的制作及应用
源码下载地址:http://code.google.com/p/loon-simple/downloads/list 根据wikipedia的解释:脚本语言(Script language,scrip ...
- Java版AVG游戏开发入门示例[3]——脚本引擎的制作及应用
源码下载地址:http://code.google.com/p/loon-simple/downloads/list 根据wikipedia的解释:脚本语言(Script language,scrip ...
- c++简易版扫雷游戏
c++简易版扫雷游戏,代码如下: #include<iostream> #include<cstdlib> #include<time.h> using names ...
- Cocos2d-x 3.x版2048游戏开发
Cocos2d-x 3.x版2048游戏开发 本篇博客给大家介绍如何快速开发2048这样一款休闲游戏,理解整个2048游戏的开发流程,从本篇博客你将可以学习到以下内容: 这里注明一下,本教程来自极客学 ...
- 3d数学基础图形与游戏开发第二版_游戏开发完整学习路线,都在这里了
在软件开发中,游戏开发这个方向看起来目标很明确,但其实是个领域很广的方向,入门的时候如果得不到指点一二,很容易误入歧途,相反,如果走这条路之前能得到前人的一些指路,是可以事半功倍的. 平台与编程语言选 ...
最新文章
- 代码结构中 Dao,Service,Controller,Util,Model 是什么意思,为什么划分?
- UT斯达康XV6700上网终极设置
- 如何正确的进行网站入侵渗透测试
- Ubuntu下安装vscode c++环境
- 转:org.apache.maven.archiver.MavenArchiver.getManifest错误
- 【NC140 排序】手写快速排序
- curl 的用法指南
- Q107:Mac系统下GDB对PBRT-V3进行debug
- Win11任务栏怎么变小?Win11任务栏变小的设置方法
- 联想V480(扬天) EI Capitan 完美驱动教程
- android 自定义图片裁剪,Android自定义View实现照片裁剪框与照片裁剪功能
- idea禁用双击shift、double shift 快捷键
- Visual Studio NuGet程序包找不到源
- 嵌入式Linux--制作根文件系统--buildroot
- 2013中国企业500强榜单出炉
- 小程序获取用户唯一id php_微信小程序配合PHP获取用户OpenID标识
- 一套ASP.NET优惠券领取微信小程序源码(前台+后台)
- 一个光棍的经典呐喊 【转】
- 大连外国语大学linux主机名,大连外国语大学
- 浙江大学mooc的数据结构_课后习题01-复杂度2 Maximum Subsequence Sum
热门文章
- 零售流通ERP系统——基础信息的确立与实施
- 《中国人工智能学会通讯》——5.31 制造服务的产生与聚合
- 自适应滤波:最小二乘法
- Visual Studio 15改进C++工程加载
- 使用批处理实现mysql数据库备份与上传
- 求数组最大数,该数为数组中某两个数相加
- 如何退出Activity?如何安全退出已调用多个Activity的Application?
- 维基链(WICC)当前币值应该还远远没有达到它本身应有的高度
- BCH钱包的“现金”支持比特币现金NFC交易
- Bitcoin ABC发布11月BCH升级要点,快看做了哪些改变?