首先Html代码如下:
<html lang="zh-cn"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="screen-orientation" content="portrait"> <title>HTML5兔子奔月吃月饼游戏源码</title> <link rel="stylesheet" type="text/css" href="static/css/index.css"> <script src="static/js/zepto.min.js"></script> </head> <body> <div id="container"> <div id="guidePanel"></div> <div id="gamepanel"> <div class="score-wrap"> <div class="heart"></div> <span id="score">0</span> </div> <canvas id="stage" width="320" height="568"></canvas> </div> <div id="gameoverPanel"></div> <div id="resultPanel"> <div class="weixin-share"></div> <a href="javascript:void(0)" class="replay"></a> <div id="fenghao"></div> <div id="scorecontent"> 您在<span id="stime" class="lighttext">2378</span>秒内抢到了<span id="sscore" class="lighttext">21341</span>个月饼<br>超过了<span id="suser" class="lighttext">31%</span>的用户! </div> <div class="textc"> <span class="btn1 share">请小伙伴吃月饼</span> </div> </div> </div> <script src="static/js/index.js"></script> </body> </html>演示效果如下:http://www.erdangjiade.com/js/2738.html