奎特尔数字大冒险

2018年1月4日，从想法到实现用了368天《奎特尔数字大冒险》终于上线微信小游戏！

不知道大家还记得在2018年1月1日，微信小游戏刚出来时，Shawn发过一篇文章《元旦快乐—小游戏！小游戏！小游戏！》当时还发了一个自己做的Demo，不知道是否还有人记还得，看下图：

image.png

1. 大家关心的问题

猜一猜，这两天收到最多的问题是什么？

手写数字识别怎么做的？

我想这是大多数程序员同学体验了《奎特尔数字大冒险》最为关注的问题，也引起不少群中的讨论！

数字大冒险中没有图像识别的技术，是用的轨迹近似匹配实现的。

记得很久以前玩过一个叫《刀剑封魔录》的游戏，就是使画“一”、“V”、“Z”等书写轨迹发大招，看下图：

数字轨迹模版

首先是将0~9的数字写一遍，将每个数字的轨迹坐标点保存下来，大概数据结构如下：

[
  {name: '1',  data: [{x, y},{x, y},{x, y},{x, y},{x, y}]}
  {name: '2',  data: [{x, y},{x, y},{x, y},{x, y},{x, y}]}
  {name: '3',  data: [{x, y},{x, y},{x, y},{x, y},{x, y}]}
  {name: '3',  data: [{x, y},{x, y},{x, y},{x, y},{x, y}]}
  ...
]

为了适应大多数人的书写方式，需要为每个数字多保存几个书写轨迹！看下面视频：

数字轨迹播放

视频地址：https://v.qq.com/x/page/i0823npmetu.html

我这里做了一个轨迹播放器，大家有兴趣可以看一下，按照这种近似的路径去写就容易被匹配上，里面还有更多sample示例。

轨迹匹配

在游戏中监听写字板节点的TouchStart、TouchMove事件绘制轨迹，同时保存轨迹坐标点，在TouchEnd时将收集到的坐标点数组与事先录入的模版数据挨个做对比，看与那个近似，将最接近的轨迹name值拿出来。

在这里4和5比较特殊，他们是由两笔写成，因此将4、5的第一笔也做了单独的轨迹模板，如果识别到写的是4或5的第一笔时，就等待用户输入第二笔。

Shawn目前还不能把代码直接拿出来，暂且只能分享大致原理，后面有时间我会再做更多这方面的分享，也欢迎大家讨论！

2. 冒险之旅

Shawn是从2018年7月开始独自踏上冒险之旅，一边四处打游击做点小外包和Creator的入门培训，一边写点公众号文章，想把数字大冒险游戏给做出来！想的是比较美好，但总是一拖再拖，拖到了12月才正式全身心投入！

手写识别在半年前就解决了，用它来做一个什么样的游戏呢？当时唯一的想法就是，一定是要意义的游戏，可以真实帮助到小朋友学习数学运算、锻炼思维记忆。

其中的意义就是来自于我的女儿，一个老爸想在女儿面显得很厉害！在她幼儿园的时候，我经常对女儿说：

“这个游戏不错，爸爸也可以给你做一个，还可以永远不会死掉”，
“这个游戏太没意思了，爸爸给你做一个更好玩的！”

但每一次熬更赶夜换来的无一都是鄙视的表情，太丑了！

但每一次熬更赶夜换来的无一都是鄙视的表情：“太丑了，全是方方块的！“。不过还好，我送女儿上学的路上，我们会不时讨论一下，怎么做她会接受！

游戏的创意也不是Shawn发明的，任天堂早在10前就有不少这类益智游戏了，Shawn也是任天堂的粉丝，从Wii到NDS、3DS、Switch一个没落下，如果大家有兴趣做小游戏，任天堂的益智游戏绝对是一个不错的老师!

怀揣着一颗萌动的心，一个朝夕相处鞭策你的用户，一个可以学习模仿的老师，开始独自踏出了第一步！

3. 冒险计划

任天堂的益智游戏，咋一眼看起来简单，但深入体验你会感受到作品的中无比的诚意。

《奎特尔数字大冒险》匆忙上线微信小游戏，明显也缺乏诚意，导致大家所关注的焦点是手写识别，而非游戏本身！游戏难度颇大，其实更适合大朋友，而非小朋友！说的是帮助小朋友锻炼思维记忆，却是惹的小朋友玩的冒火想打人！

静下心来，把自己当成一个小孩子，我能从《奎特尔数字大冒险》学习到什么呢？带着这种想法，我思考了好几天，整理了一份粗略的计划！

奎特尔数字大冒险计划

一年来的想法和思考始终没有记录下来，不能踏实去执行，这次将所有的想法写下来，一条一条地死磕下去！

显然上面的工作量是非常巨大的，Shawn是一个程序员，同时扮演一个伪策划，好几次使用PhotoShop切点图，想把电脑给炸了！

有人问：“狼居然会天上飞，你想象力还真丰富！”

回答说：“不是猪也会飞的吗？我这是没资源嘛，先做出来再说吧！”

没有美术就像有枪没子弹、有锅没米，而且今年冬天也特别冷，储藏的食物也快用尽，先把东西做出来再说，先让狼飞一会儿吧！终于在1月4号把第一颗子打出去了！

Shawn在此感谢帮助过我的朋友们，成都村雨科技的「大白」、「onescc」近乎无尝给我提供部分美术资源；感谢「丁丁猫」的骨骼动画，以及对游戏的建议，让我好好看下女儿的课本给了我不少启发；感谢「jacklling」在微信小游戏程序开发中提供的帮助！也感谢帮助我分享分享、传播的同学们！

4. 帮助更多的人

对程序员来说，美术与推广是最难的，今天算是为自己写了一篇广告！
如果你也有个人开发的小游戏与有趣的故事，欢迎来奎特尔星球，免费为大家提供推荐，帮助他人就是帮助自己，愿我们一起成长！

---

欢迎关注「奎特尔星球」公众号，欢迎大家投稿，来我们一起成长！

奎特尔星球公众号 奎特尔星球个人网站