輕輕鬆鬆開發HTML5遊戲
由David發表在天碼營
HTML5提供了很多新的語義標籤，以及更加豐富的瀏覽器API。與此同時，移動設備優先的Web框架也大量湧現。甚至出現了很多的HTML5遊戲引擎，並且可以獲得相當好的性能。微信的流行，使得HTML5的應用越來越火爆。於是小編也來湊湊熱鬧，出品一個牛刀小試的HTML5遊戲：「你能戳幾下」。本文便來記述整個開發流程，非常簡單！先點擊右上角的「參考代碼」，並下載源碼，跟著小編十分鐘便能開發自己的遊戲！
可以來體驗一把這個遊戲：你能戳幾下？
頁面框架
打開後首頁是這樣的：
點擊開始後，用戶開始狂戳屏幕正中間的按鈕，直到5秒的倒計時結束。最後給出提示：
首先，我們新建一個HTML文件，比如就叫index.html。在裡面添加一個基本的空HTML文檔：
<html>n<head lang="en">n <meta charset="UTF-8">n <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>n <link rel="stylesheet" href="main.css">n <script src="main.js"></script>n</head>n<body>n</body>n</html>n
計時器
然後在<body></body>之間加入我們的頁面主體部分，先來一個計時器：
<div class="timer">n <span id="time"></span>n</div>n
其中<div class="timer">是整個計時器，裡面的<span id="time">用來顯示倒計時的數字。給它們添加樣式吧：
body{n background: #f7565b;n}n.timer{n text-align: center;n color: white;n}n.timer #time{n color: lightgreen;n background: #5a5a5a;n padding: 3px 20px;n border: 10px solid #111;n border-radius: 15px;n}n
把上述文件存為main.css，放在index.html同一目錄下就可以了~
先來把body的背景設為紅色，然後讓.timer中的文字居中，並顯示為白色。顯示時間的數字#timer則要顯示成淺綠色，背景5a5a5a是一個接近黑色的顏色。padding給它來點內邊距，上下是3px，左右是20px。然後邊框要有10像素寬，#111是比5a5a5a還要黑的一個顏色~border-radius則設置了它的邊框圓角。現在計時器的樣式便做好了！
按鈕
然後來做一個綠色的大按鈕。首先我們需要在<head>中添加一行：
<link rel="stylesheet" href="lib/buttons.css">n
這一行引入了一個有用的樣式庫buttons.css，它提供了豐富的按鈕樣式。你可以從參考代碼中下載到這個文件！
同樣地，先在<body>裡面添加對應的HTML，緊接著計時器的代碼就可以~
<div class="clickarea">n <span class="button-wrap">n <a href="#" id="btn">Ready?</a>n </span>nn <p>你能戳幾下？</p>n</div>n
其中的button-wrap便是buttons.css提供的樣式。
.clickarea只是用來包裹.button-wrap和p的，設置它的text-align可以讓按鈕和文字都居中：
.clickarea{n text-align: center;n}n
綠色的大按鈕就這樣做好了！
頁面腳本
頁面腳本便是我們說的javascript文件。在開始寫腳本之前，我們還是要引入一個叫做jQuery的庫，只需要在<head>中添加一行：
<script src="lib/jquery-2.1.4.min.js"></script>n
文件jquery-2.1.4.min.js也可以在參考代碼中找到~ 然後在index.html同一目錄下創建一個main.js，在裡面就可以寫腳本了：
$(function () {n var $time = $(#time), // 獲得顯示時間的<span>n $btn = $(#btn), // 獲得顯示按鈕的<a>n status = init, // 初始狀態為initn time = 5000, // 計時5秒！5000毫秒n count = 0; // 戳了多少下！初始值為0nn // 添加按鈕被觸摸、或者被點擊的事件處理函數n $btn.on(touchstart click, function () {n switch (status) {n case init:n start();n break;n case started:n $btn.html(++count);n break;n }n });n});n
如果當前狀態是init（遊戲尚未開始），就開始遊戲；如果已經開始了，就把點擊次數加一，並把它設置為按鈕的文字。start方法是這樣實現的：
function start() {n status = started; // 設置狀態為遊戲已經開始n var counter = setInterval(timer, 7), // 7毫秒執行一次timer函數n curTime;nn function timer() {n time -= 7; // 倒計時減7毫秒n if (time <= 0) { n time = 0; // 時間到n clearInterval(counter);n }nn curTime = (time / 1000).toFixed(3); // 獲取三位小數的倒計時n if (curTime == 0.000)n $time.html(時間到); // 設置<span id="time">的內容為「時間到」n elsen $time.html(curTime + 秒); // 設置<span id="time">的內容為剩餘時間n }n}n
至此，「你能戳幾下」已經完成啦！點擊右上角的「參考代碼」，可以獲取完整的源碼！
歡迎關注天碼營微信公眾號： TMY-EDU
小編重點推薦：
Spring MVC實戰入門訓練
Spring Data JPA實戰入門訓練
Java Web實戰訓練
Node.js全棧開發
更多精彩內容請訪問天碼營網站推薦閱讀：
※請問有什麼可以代替texturepacker的？
※在H5+App領域，白鷺、Layabox、Cocos Creator各自的優劣是什麼？
※想嘗試開發些HTML5小遊戲，請大大們推薦款JS遊戲引擎，輕量的，簡單的有么？
※白鷺引擎（egret）如何盈利？
※我想做html5遊戲，該如何上手？