Weex开发小游戏是件很high的事儿

作为一个移动端初学者、爱好者&＃xff0c;能使用前端技术开发原生游戏一直是一件渴望而不可及的事情&＃xff0c;暂且不说游戏逻辑的复杂度&＃xff0c;算法的健壮性&＃xff0c;单单是场景、画布、布局就让我们无处下手。

几年前曾经参与 Appcan 技术的技术孵化和推广&＃xff0c;尝试使用 Hybrid 技术写过一个小游戏&＃xff0c;《Hybrid混合实现app小游戏》&＃xff0c;由于此游戏结构场景比较简单&＃xff0c;所以未使用大型的游戏引擎&＃xff0c;Cocos2d-x游戏引擎&＃xff0c;所有逻辑全部手工。同样也是可「三端同构」&＃xff0c;但本质上还是一个 H5小游戏&＃xff0c;只是在真机上&＃xff0c;执行环境是一个 UIWebview&＃xff0c;所以&＃xff0c;H5可以做的&＃xff0c;他都可以做&＃xff0c;H5不能做到&＃xff0c;他未必不能做&＃xff0c;如摄像头、陀螺仪等。但缺点也很致命&＃xff0c;执行效率完全受限于原生控件 UIWebview&＃xff0c;要知道对于一个游戏来讲&＃xff0c;流畅度是第一要义。

总的来讲&＃xff0c;使用 Hybrid 技术开发游戏的方案虽然可行&＃xff0c;但是&＃xff0c;效果并不是我想要的。

自从 ReactNative 开源以来&＃xff0c;一直想着要使用 ReactNative 开发游戏。个人原因&＃xff0c;一直未付诸实践。直到上周有网友问我&＃xff0c;「Weex是否能拿来做游戏开发」&＃xff0c;试试就知道&＃xff0c;那就先拿 Weex 开刀&＃xff0c;来挑战下 game app 同构的能力&＃xff0c;给还没上车的朋友带波节奏。

如果你还未入门&＃xff0c;没关系&＃xff0c;就当看个热闹了&＃xff0c;知道 Weex 能不能快速开发游戏就可以了。

如果你想先入门&＃xff0c;以下几篇文章你可以当作是导读。

• 《Native、Web App、Hybrid、React Native 和 Weex》
• 《Weex 快速创建工程 Hello World》
• 《网易严选 App 感受 Weex 开发》

官方提供的 WeexPlayground 中也提供了一个游戏 demo 扫雷&＃xff0c;如下图

此 demo 是为了实践以下三件事&＃xff1a;

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

总体表现还是不错的。更多细节&＃xff0c;可详读《Weex版扫雷游戏开发》

别人的东西再炫酷也始终是别人的&＃xff0c;不自己动手码一个说话都不硬气&＃xff01;

没有实践就没有发言权&＃xff0c;此处献上源码的 Github 链接&＃xff1a;https://github.com/zwwill/just-do-8&＃xff0c;欢迎「Star」「Fork」&＃xff0c;支持瞎搞 ψ(&＃xff40;∇´)ψ

先来感受下最终的效果

界面

体验

IOS已上线 https://itunes.apple.com/cn/a...

也可以直接使用 Weex Playground 扫码体验 Weex Playground下载地址

近期将发布到应用市场&＃xff0c;届时还望大家多多支持。

规则

规则很简单&＃xff0c;会玩「俄罗斯方块」和「2048」就一定会玩这款小游戏

一期功能

由于要快速产出&＃xff0c;界面随便就别太在意了&＃xff0c;另外很多功能还没有开发&＃xff0c;如&＃xff0c;全球排名、分享、游戏设置等&＃xff0c;这些都放在后面慢慢迭代吧&＃xff08;如果有第二版的话(&＃xffe3;.&＃xffe3;)&＃xff09;

源码分析

接下来是一大波源码分析&＃xff0c;不感冒&＃xff1f;那就直接跳过。
由于篇幅有限&＃xff0c;此处只做简要介绍&＃xff0c;详细请见工程源码&＃xff0c;地址请爬楼

项目结构

只有三个文件&＃xff08;一个场景两个组件&＃xff09;。我来逐一讲解下每个文件的职能。

index.vue

【index.vue】是一个场景文件&＃xff0c;用于根据状态切换场景&＃xff0c;以及监听处理所有的手势

【模版 | 简码】

我们监听了 Weex 的一堆事件来「合成」我们需要的【切换】【左右滑动】【下降】等主要游戏操作。如&＃64;swipe、&＃64;click、&＃64;panstart、&＃64;panend和&＃64;horizontalpan&＃xff0c;同时给组件注册&＃64;screenLock、&＃64;screenUnlock、&＃64;over和&＃64;win等事件&＃xff0c;用于游戏场景切换。

• &＃64;swipe&＃xff1a;swipe的属性direction提供在屏幕上滑动时触发的方向&＃xff0c;本项目用到up、down&＃xff0c;官方给的说法是『direction的值可能为up、left、bottom、right』但实际上我得到的却是down而不是bottom&＃xff0c;具体请客还在和Weex的开发团队进行沟通&＃xff0c;确认后会更新上来。另外要注意的是&＃64;swipe、&＃64;click、&＃64;panstart、&＃64;panend和&＃64;horizontalpan这些事件同时使用时会出现冲突问题&＃xff0c;Android 平台下问题比较多&＃xff0c;具体大家在做的时候需要做好兼容
• &＃64;click&＃xff1a;常规的click事件
• &＃64;panstart、&＃64;panend、&＃64;horizontalpan&＃xff1a;用于计算左右滑动距离&＃xff0c;每滑动40个显示像素就向组件发起滑块左右滑动的指令

具体事件的使用姿势&＃xff0c;大家可以详读官方文档

每一个事件方法的功能实现和视觉此处就略去了。

stoneMap.vue

【stoneMap.vue】就像是「大内总管」&＃xff0c;一切闲杂喽啰的事都归他管。主要管理的数字块的布局、状态、游戏分值等

【简码】

• this.stones&＃xff1a;用于管理所有实例进来的数字块&＃xff0c;将他们投影到界面上
• this.map&＃xff1a;是一个6*9的逻辑网&＃xff0c;标记 this.stones 中的的数字块的逻辑位置

此处主要介绍下事件的控制分发和逻辑网的计算&＃xff0c;讲解在注释中

【action() | 简码】

/*** 事件的控制分发* */
action(_action) {if (!!this.actionLock) return;switch (_action) {case &＃39;click&＃39;:case &＃39;up&＃39;:// click 和 up 触发上方三个活动数字块的互相切换this.actionChange();break;case &＃39;left&＃39;:case &＃39;right&＃39;:// left 和 right 触发上方三个活动数字块的的整体平移this.actionSliderMove(_action);break;case &＃39;down&＃39;:case &＃39;bottom&＃39;:// down 触发上方三个活动数字块进场// bottom 起到兼容的作用this.actionDown();break;default:break;}
}

【mapCalculator() | 全码】

/*** 计算map* */
mapCalculator: (function () {var updateStone &＃61; function (_stones, _id, _s) {/** * 此方法控制得分规则* 横竖对角线&＃43;1分* 十字、X型&＃43;2分* 8字型、9宫格分别&＃43;3分、&＃43;4分&＃xff0c;当然&＃xff0c;不可能存在这两种情况* */if (_stones[_id]) {_s !&＃61; 0 && _s <8 && (_stones[_id][&＃39;score&＃39;] &＃61;&＃61; 0 ? _stones[_id][&＃39;score&＃39;] &＃61; _s : _stones[_id][&＃39;score&＃39;]&＃43;&＃43;);} else {_stones[_id] &＃61; {id: _id,score: _s}}};return function (_map) {let hasChange &＃61; false,activeStones &＃61; {},height &＃61; _map.length - 1,width &＃61; _map[0].length - 1,_tp_id, _s;// 全逻辑网遍历for (let y &＃61; height; y >&＃61; 0; y--) {for (let x &＃61; 0; x <&＃61; width; x&＃43;&＃43;) {_tp_id &＃61; _map[y][x] || "";// 排除四角if (!_tp_id || (x &＃61;&＃61; 0 || x &＃61;&＃61; width) && (y &＃61;&＃61; 0 || y &＃61;&＃61; height)) continue; _s &＃61; parseInt(this.$refs[_tp_id][0].num);let _p1, _p2;if (x &＃61;&＃61; 0 || x &＃61;&＃61; width || y &＃61;&＃61; 0 || y &＃61;&＃61; height) {// 侧边&＃xff0c;将其单独提炼出来是为了减少计算量三分之一的计算量if (x &＃61;&＃61; 0 || x &＃61;&＃61; width) {// 竖排if (!_map[y - 1][x] || !_map[y &＃43; 1][x]) continue;_p1 &＃61; this.$refs[_map[y - 1][x]][0];_p2 &＃61; this.$refs[_map[y &＃43; 1][x]][0];} else if (y &＃61;&＃61; 0 || y &＃61;&＃61; height) {// 横排if (!_map[y][x - 1] || !_map[y][x &＃43; 1]) continue;_p1 &＃61; this.$refs[_map[y][x - 1]][0];_p2 &＃61; this.$refs[_map[y][x &＃43; 1]][0];}if (_p1 && _p2 && _p1.num &＃61;&＃61; _s && _p2.num &＃61;&＃61; _s) {hasChange &＃61; true;updateStone(activeStones, _tp_id, &＃43;&＃43;_s);updateStone(activeStones, _p1.id, 0);updateStone(activeStones, _p2.id, 0);}} else {// 中间可形成九宫格区域const _map_matrix &＃61; [[[0, 1], [0, -1]],[[-1, 1], [1, -1]],[[-1, 0], [1, 0]],[[-1, -1], [1, 1]]];for (let _i &＃61; 0, _mm; _i <_map_matrix.length; _i&＃43;&＃43;) {_mm &＃61; _map_matrix[_i];if (!_map[y &＃43; _mm[0][0]][x &＃43; _mm[0][1]] || !_map[y &＃43; _mm[1][0]][x &＃43; _mm[1][1]]) continue;_p1 &＃61; this.$refs[_map[y &＃43; _mm[0][0]][x &＃43; _mm[0][1]]][0];_p2 &＃61; this.$refs[_map[y &＃43; _mm[1][0]][x &＃43; _mm[1][1]]][0];if (_p1 && _p2 && _p1.num &＃61;&＃61; _s && _p2.num &＃61;&＃61; _s) {hasChange &＃61; true;updateStone(activeStones, _tp_id, _s &＃43; 1);updateStone(activeStones, _p1.id, 0);updateStone(activeStones, _p2.id, 0);}}}}}// 存在更新块if (hasChange) {setTimeout(() &＃61;> {for (let s in activeStones) {this.sChange(s, undefined, activeStones[s].score);}// 数字块整理setTimeout(() &＃61;> {this.stonesTrim();}, 100)}, 400)} else {let _errorStone &＃61; "";for (let _i &＃61; 0; _i this.highScore) {storage.setItem(&＃39;H-SCORE&＃39;, this.totalScore)}} else {this.$emit(&＃39;screenUnlock&＃39;);setTimeout(() &＃61;> {this.pushStones();}, 100);}}}
})()

【stonesTrim | 全码】

/*** 整理数字块&＃xff0c;堆积下降* */
stonesTrim() {let hasChange &＃61; false,height &＃61; this.map.length - 1,width &＃61; this.map[0].length - 1,_tp_id, _step &＃61; 0;for (let x &＃61; 0; x <&＃61; width; x&＃43;&＃43;) {_step &＃61; 0;for (let y &＃61; height; y >&＃61; 0; y--) {_tp_id &＃61; this.map[y][x] || "";if (!_tp_id) {_step&＃43;&＃43;;continue;} else if (_step > 0) {hasChange &＃61; true;this.sChange(_tp_id, {y: _step});this.map[y &＃43; _step][x] &＃61; _tp_id;this.map[y][x] &＃61; "";}}}setTimeout(() &＃61;> {this.mapUpdate();}, hasChange ? 200 : 0);
}

stone.vue

【stone.vue】就像被「大内总管」管理着的「小太监」&＃xff08;数字块&＃xff09;&＃xff0c;「小太监」的一举一动都是被「总管」支配的&＃xff0c;包括其长相&＃xff08;颜色&＃xff09;、品级&＃xff08;数字&＃xff09;以及生死&＃xff08;生命周期&＃xff09;&＃xff0c;但状态的改变都是由自己执行&＃xff0c;直接自己整容&＃xff0c;自己升级&＃xff0c;还要。。自杀。底层人民好无奈 ╮(╯_╰)╭

【简码】

好了&＃xff0c;辣么乐色的代码我都不好意思再唠叨了。换个话题&＃xff0c;来讲讲这个小游戏从无到有中间的一些方案的变更吧。

由于对 Weex 的过高期望&＃xff0c;导致很多最初的方案都被「阉割」或者「整容」。

动画

想让元素动起来&＃xff0c;传统前端一般有两种方式

1、CSS 动画
2、JS 动画
在 Weex 上由多了一个
3、animation 内建模块&＃xff0c;可执行原生动画

由于 css3 的 transition 在 Weex 的 0.16.0&＃43; 版本才能使用&＃xff0c;官方提供的 demo 框架引用的 SDK 版本低于此版本&＃xff0c;方案1&＃xff0c;无效&＃xff01;

Weex 上的视觉是通过解析 VDom&＃xff0c;在调用原生控件渲染成的&＃xff0c;完全没有 DOM &＃xff0c;所以 JS 动画的方案&＃xff0c;无效&＃xff01;

看了只剩下 Weex 的 animation 内建动画模块了。

虽然不太喜欢&＃xff0c;用起来也很别扭&＃xff0c;但是没办法&＃xff0c;有总比没有强。知促常乐吧。

来看一下 animation 的使用姿势

animation.transition(this.$refs.test, {styles: {color: &＃39;#000&＃39;,transform: &＃39;translate(100px, 100px) sacle(1.3)&＃39;,backgroundColor: &＃39;#CCC&＃39;},duration: 800, // mstimingFunction: &＃39;ease&＃39;,needLayout:false,delay: 0 // ms}, function () {// animation finished.})


想实现一个多态循环的动画&＃xff0c;还要写一个方法&＃xff0c;想想就难受

音乐

没有声音还能算是游戏吗&＃xff1f;&＃xff01;

嗯 ~ ~ ~ 好像可以算

无所谓啦~ 开心最重要 ︿(&＃xffe3;︶&＃xffe3;)︿

尴尬的是 Weex 官方压根就没给咱们提供这样的 API&＃xff0c;好在有三方的插件可用&＃xff0c;Nat&＃xff0c; 刚好可以用上。

Weex 提倡使用网络资源&＃xff0c;所有我把音频文件上传到了 CDN 上&＃xff0c;为了能快一点。。

当然不可能一路顺风&＃xff01;

我们来看看 Nat Audio 模块的使用方式

Nat.audio.play(&＃39;http://cdn.instapp.io/nat/samples/audio.mp3&＃39;)

然而 Nat.audio 只提供了 play() | pause() | stop() 三个 API。

为什么没有 replay() 重放&＃xff1f;我想用的就是重放。这都不是事儿&＃xff0c;使用 play() 硬着头皮上吧&＃xff01;

由于 Nat.audio 不支持 Web 端&＃xff0c;每次修改都是真机调试&＃xff0c;那个速度&＃xff0c;唉~~~我终于理解原生小伙伴们的痛苦了。。

这也不是事儿&＃xff0c;最气愤的就是&＃xff0c;Nat.audio.play() 每次播放相同的音频竟然不是走的缓存&＃xff01;难道缓存机制还要自己做&＃xff1f;&＃xff01;&＃xff1f;&＃xff01;ヽ(&＃xff40;⌒´)&＃xff89; 我的天&＃xff01;

最后还是乖乖的用背地文件吧。还要写平台路径适配。。

没想到音频的槽点这么多&＃xff01;还要我没用 Weex 做网易云音乐。

手势指令

前文也有讲过&＃xff0c;小游戏用到了&＃64;swipe、&＃64;click、&＃64;panstart、&＃64;panend和&＃64;horizontalpan这么多事件监听。官方也有友情提醒「horizontalpan 手势在 Android 下会与 click 事件冲突」&＃xff0c;但实际上 ios 平台上也会有冲突。

具体的我就不再描述了。此处只想说明&＃xff0c;Weex 在手势指令上虽然可以满足游戏的基础指令要求&＃xff0c;但细节上还是不太理想。

总的来讲&＃xff0c;Weex 算是满足了我做小游戏的要求。如果想做大游戏&＃xff0c;就不建议使用 Weex 了&＃xff0c;Weex 确实做不了&＃xff0c;但者也不是 Weex 诞生的意义。

好了&＃xff0c;此次尝试就到这吧。为了不让思路断掉&＃xff0c;我又通宵了&＃xff0c;罪过&＃xff0c;罪过 ~ ~ ~&＃xff0c;希望此文对感兴趣的小伙伴有所帮助。

mark: 03:05