[模仿]html5游戏_兔子踩铃铛

VIP文章望星辰1988

于 2015-01-30 19:09:10 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/wangxsh42/article/details/43310537

版权

在模仿着做了一个html5手机游戏—兔子踩铃铛，和flash版兔子踩铃铛差的不多吧

效果图：

代码：

index.htm

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="description" content="An HTML5 canvas game.">
 6         <meta name="keywords" content="html5, canvas, web, game">
 7         <meta name="author" content="Wang Xin Sheng">
 8         <meta name="apple-mobile-web-app-capable" content="yes">
 9         <meta name="apple-mobile-web-app-status-bar-style" content="black">
10         <meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no">
11         <meta http-equiv="X-UA-Compatible" content="chrome=1">
12         <meta http-equiv="Pragma" content="no-cache">
13         <meta http-equiv="Cache-Control" content="no-cache">
14         <meta equiv="Expires" content="0">
15         <meta http-equiv="content-script-type" content="text/javascript">
16         <title>[WXS]兔子跳铃铛</title>
17         <script src="requestNextAnimationFrame.js"></script>
18         <style type="text/css">
19          html {
   color:#000;background:#222;margin:0px;}
20          body {
   -webkit-user-select:none;margin:0px;}
21         #gameWorld{
   cursor:pointer;}
22         #btn_start{
   color:white;font-size:38px;font-weight:bold;z-index:999;display:none;background:rgba(150,150,150,0.8);text-align:center;cursor:pointer;}
23         </style>
24     </head>
25     <body>
26     <section>
27         <div style='position:absolute;left:0px;top:0px;width:100%;height:100%;overflow:hidden;' id='btn_start'></div>
28         <canvas id="gameWorld" style="position: absolute; left: 0px; top: 0px;">
29             <p>You need a <a href="http://www.google.com/chrome">modern browser</a> to view this.</p>
30         </canvas>
31     </section>
32     </body>
33     <script src="CGM010.js"></script>
34 </html>

CGM010.js:

  1 ;
  2 var gameWorld = new function () {
  3     function doSize() {
  4         caW = window.innerWidth;
  5         caH = window.innerHeight;
  6         caObj.width = caW;
  7         caObj.height = caH;
  8         caObj.style.width = caW + "px";
  9         caObj.style.height = caH + "px";
 10         bellLst = [];
 11         birdLst = [];
 12         explLst = [];
 13         snowLst=[];
 14         rabit = null;
 15         birdGenTime = 20; // 每几个生成一个bird
 16         genBellCount = 0;
 17         bellW = 20;//caH * 0.06;
 18         bellH = bellW;
 19         bellGap = caH * 0.05;
 20         rabitH = 20;
 21         rabitW = rabitH;
 22         bellDownSpeed = bellH * 0.15;
 23         genTop = caH * 0.9;
 24         bellOutScreenTop = genTop;
 25         birdSpeed = bellW * 0.3;
 26         rabitSpeed = 0;
 27         rabitA = 0;
 28         rabitD = -1; //-1:left,1:right
 29         mouseTObj = {x:null,y:null};
 30         rabitOnAirFlg = false;
 31         lastFpsUpdateTime = new Date;
 32         scoreB = 1;
 33         score = 0;
 34         scoreOne = 10;
 35         flyFlg = false;
 36     }
 37     function gen(name) {
 38         switch(name){
 39             case "bell":
 40                 while(genTop>=-caH){
 41                     if(genBellCount>=birdGenTime){
 42                         gen("bird");
 43                     }
 44                     bellLst.push(new bell(genTop, Math.random()*(caW-bellW), bellW, bellH, 0, bellPicLst.length));
 45                     genTop -= (bellGap + bellH);
 46                     genBellCount++;
 47                     if(genBellCount>=birdGenTime)
 48                         genTop += bellGap - bellH * 0.5;
 49

最低0.47元/天解锁文章

望星辰1988

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[模仿]html5游戏_兔子踩铃铛

在模仿着做了一个html5手机游戏—兔子踩铃铛，和flash版兔子踩铃铛差的不多吧效果图：代码：index.htm 1 DOCTYPE html> 2 html> 3 head> 4 meta charset="utf-8"> 5 meta name="description" content="An HTML5 ca
复制链接

扫一扫