1.4　“一秒钟有多长”小游戏

经过1.2节的学习，读者应该已经下载安装了微信Web开发者工具，并且了解了常用的操作。本节开发一个名为“一秒钟有多长”的小程序，带领大家领略一下小程序的开发流程。

1.4.1　游戏规则

你能精确按出一秒钟吗？用手指按住屏幕，感觉一秒钟到了松开，看看是否为精确的一秒钟。

游戏的操作规则是：

用户手指放到圆形按钮上，触发touchstart事件，此时记下开始时间start_time。

用户手指离开圆形按钮时，触发touchend事件，此时记下结束时间end_time。

计算用户操作圆形按钮的时间差，与一秒钟相比较，根据不同的误差显示不同的文案。游戏界面如图1-15所示。

图1-15

1.4.2　下载与运行

本DEMO可以在weixinbook.net网站免费下载，下载后将ch01/1sec解压到本地目录。

打开微信Web开发者工具，单击“添加项目”，进入“添加项目”页面，如图1-16所示。

图1-16

AppID选择“无AppID”，项目名称填写“1sec”（也可以随意填写），项目目录选择上述解压目录，单击“添加项目”即可打开，如图1-17所示。

图1-17

此后如无特殊说明，各章节的示例程序都可以用这种方法打开。

下面用小程序开发工具实现这个小游戏，领略移动端开发的最新技术。

1.4.3　界面、样式与脚本

游戏界面如图1-17所示，页面顶部是文本形式的游戏介绍：

一秒钟有多长？

你能精确地按出一秒钟吗？

中间是玩法介绍：

拇指放在圆圈上。

Ready? Go!

底部是一个橘色圆形按钮。

    源码pages/index/index.wxml

{{result}}的数据来自对应Page的data。

catchtouchstart与catchtouchend分别绑定touchstart和touchend事件的处理函数。icon标签展示一个橘色的圆。

对应的样式文件如下：

    源码pages/index/index .wxss

JS脚本

catchtouchstart与catchtouchend分别绑定touchstart和touchend事件的处理函数。前者是一个触摸事件的起始事件，后者是该触摸事件的结束事件。

在touchstart事件里，记录开始时间start_time。

在touchend事件里，记录结束时间end_time。

计算start_time与end_time之间的时间差，与一秒钟相比较，根据不同的误差显示不同的文案（见表1-1）。

表1-1　文案

    源码pages/index/index.js

第34到36行显示文案的操作如下：

通过操作data属性的result字段改变{{result}}里的显示内容。

综上所述，我们用小程序框架实现了一个“一秒钟有多长”小游戏。这个框架类似于React Native和Vue.js等非常流行的移动网页开发MVVM类型的框架，我们将在第2章详细讲解这个框架。