Weex 版扫雷游戏开发 1
扫雷是一个喜闻乐见的小游戏,今天在看 Weex 文档的过程中,无意中发现用 Weex 完全可以开发一个扫雷出来。当然这个扫雷和 Windows 那个有一点差距,不过麻雀虽小五脏俱全,随机布雷、自动挖雷、标雷那是必须有的。
最后的效果是这个样子的:
界面是简陋了一点,好歹是可以用的,要啥自行车。其实这个 demo 主要是为了实践几件事情:
界面指示器
动态数据绑定
更复杂的事件
扫雷的布局里面只需要用上 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商业化进程,全方位赋能移动开发者及移动创业者。
Weex 版扫雷游戏开发 1相关推荐
- Weex 版扫雷游戏开发
2019独角兽企业重金招聘Python工程师标准>>> 扫雷是一个喜闻乐见的小游戏,今天在看 Weex 文档的过程中,无意中发现用 Weex 完全可以开发一个扫雷出来.当然这个扫雷和 ...
- 利用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数学基础图形与游戏开发第二版_游戏开发完整学习路线,都在这里了
在软件开发中,游戏开发这个方向看起来目标很明确,但其实是个领域很广的方向,入门的时候如果得不到指点一二,很容易误入歧途,相反,如果走这条路之前能得到前人的一些指路,是可以事半功倍的. 平台与编程语言选 ...
最新文章
- Linux下独立添加PHP扩展模块 mssql
- 从C语言的角度重构数据结构系列(四)-静态链表动态链表
- 存储过程中同一语句多个聚合函数时 into 用法
- Class-dump
- JavaScript 检查对象属性
- Hadoop的SequenceFile读写实例
- 博客系统知多少:揭秘那些不为人知的学问(四)
- Spring_01_IoC初级总结
- java streams_使用Stream.peek在Java Streams内部进行窥视
- python+mysql库+json_用python写爬虫-5.1json用pandas入mysql库
- VMware设置及linux静态ip设置
- 我的世界1.6.2 java_我的世界Java版1.16.2
- 【JVM】垃圾回收器
- python调用函数的优点_python基础之函数
- android token机制_Android之window机制token验证
- 死于决斗的数学天才伽罗瓦-人生的有限域
- 虚拟机克隆MAC地址变更后的网络配置
- txt转mobi格式
- ERC20 智能合约整数溢出系列漏洞披露
- 云服务器搭建好,出现 拒绝了我们的连接请求。