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章詳細講解這個框架。