本文共 2500 字，大约阅读时间需要 8 分钟。
由发表在
HTML5提供了很多新的语义标签，以及更加丰富的浏览器API。与此同时，移动设备优先的Web框架也大量涌现。甚至出现了很多的HTML5游戏引擎，并且可以获得相当好的性能。微信的流行，使得HTML5的应用越来越火爆。于是小编也来凑凑热闹，出品一个牛刀小试的HTML5游戏：“”。本文便来记述整个开发流程，非常简单！先点击右上角的“参考代码”，并下载源码，跟着小编十分钟便能开发自己的游戏！
可以来体验一把这个游戏：
打开后首页是这样的：
点击开始后，用户开始狂戳屏幕正中间的按钮，直到5秒的倒计时结束。最后给出提示：
首先，我们新建一个HTML文件，比如就叫index.html。在里面添加一个基本的空HTML文档：
然后在<body></body>之间加入我们的页面主体部分，先来一个计时器：
其中<div class="timer">是整个计时器，里面的<span id="time">用来显示倒计时的数字。给它们添加样式吧：
body{ background: #f7565b;}.timer{ text-align: center; color: white;}.timer #time{ color: lightgreen; background: #5a5a5a; padding: 3px 20px; border: 10px solid #111; border-radius: 15px;} 把上述文件存为
main.css，放在index.html同一目录下就可以了~
先来把body的背景设为红色，然后让.timer中的文字居中，并显示为白色。显示时间的数字#timer则要显示成浅绿色，背景5a5a5a是一个接近黑色的颜色。padding给它来点内边距，上下是3px，左右是20px。然后边框要有10像素宽，#111是比5a5a5a还要黑的一个颜色~border-radius则设置了它的边框圆角。现在计时器的样式便做好了！
然后来做一个绿色的大按钮。首先我们需要在<head>中添加一行：
这一行引入了一个有用的样式库buttons.css，它提供了丰富的按钮样式。你可以从参考代码中下载到这个文件！
同样地，先在<body>里面添加对应的HTML，紧接着计时器的代码就可以~
你能戳几下？
其中的
button-wrap便是buttons.css提供的样式。
.clickarea只是用来包裹.button-wrap和p的，设置它的text-align可以让按钮和文字都居中：
.clickarea{ text-align: center;} 绿色的大按钮就这样做好了！
页面脚本便是我们说的javascript文件。在开始写脚本之前，我们还是要引入一个叫做jQuery的库，只需要在<head>中添加一行：
文件jquery-2.1.4.min.js也可以在参考代码中找到~ 然后在index.html同一目录下创建一个main.js，在里面就可以写脚本了：
$(function () { var $time = $('#time'), // 获得显示时间的 $btn = $('#btn'), // 获得显示按钮的 status = 'init', // 初始状态为init time = 5000, // 计时5秒！5000毫秒 count = 0; // 戳了多少下！初始值为0 // 添加按钮被触摸、或者被点击的事件处理函数 $btn.on('touchstart click', function () { switch (status) { case 'init': start(); break; case 'started': $btn.html(++count); break; } });}); 如果当前状态是init（游戏尚未开始），就开始游戏；如果已经开始了，就把点击次数加一，并把它设置为按钮的文字。start方法是这样实现的：
function start() { status = 'started'; // 设置状态为游戏已经开始 var counter = setInterval(timer, 7), // 7毫秒执行一次timer函数 curTime; function timer() { time -= 7; // 倒计时减7毫秒 if (time <= 0) { time = 0; // 时间到 clearInterval(counter); } curTime = (time / 1000).toFixed(3); // 获取三位小数的倒计时 if (curTime == '0.000') $time.html('时间到'); // 设置的内容为“时间到” else $time.html(curTime + ' 秒'); // 设置的内容为剩余时间 }} 至此，“”已经完成啦！点击此处的“”，可以获取完整的源码！
转载地址：http://jijii.baihongyu.com/