index.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta content="yes" name="apple-mobile-web-app-capable"/>
  7. <meta content="yes" name="apple-touch-fullscreen"/>
  8. <meta content="telephone=no" name="format-detection"/>
  9. <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  10. <div id='wx_pic' style='margin:0 auto;display:none;'>
  11. <img src='photo.jpg' />
  12. </div>
  13. <title>感恩节到了,吃货大作战!</title>
  14. <link rel="stylesheet" type="text/css" href="css/game_min.css"/>
  15. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  16. <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
  17. <script type="text/javascript" src="js/game.min.js"></script>
  18. <style type="text/css">
  19. html,body{ width:100%; height:100%; margin:0 auto; padding:0; text-align:center; overflow:hidden; }
  20. div{margin:0; padding:0;}
  21. .layer1{ width:100%; height:100%; background: url(img/loading.jpg) top center no-repeat; background-size: auto 100%;}
  22. .layer2{ display:none; width:100%; height:100%; background: url(img/1.jpg) top center no-repeat; background-size: auto 100%;}
  23. .next2{ width:40%; height:20%; top:70%; position:relative; }
  24. .layer3{ display:none; width:100%; height:100%; }
  25. .layer4{ display:none; width:100%; height:100%; background: url(img/bg.jpg) 0 0 no-repeat; background-size: 100% 100%;}
  26. .layer4_img1{ width:80%; height:60%; top:3%; left:10%; }
  27. .layer4_img2{ width:38%; height:18%; top:70%; left:12%; }
  28. .layer4_img3{ width:38%; height:18%; top:70%; left:50%; }
  29. .layer4_result{ width:100%; height:10%; top:60%; text-align:center; font-size:18px; color:Red;}
  30. .shareinfo{ display:none; width:100%; height:100%; left:0;top:0; position:absolute;background: url(img/share.png) 0 0 no-repeat;
  31. background-size: 100% 100%; z-index:9999;filter:alpha(opacity=90);opacity:0.9; background-color:#404040;}
  32. #teach{padding:40px 32px}#teach div.info{float:left}
  33. #teach .info{text-align:middle}#teach .info span{vertical-align:middle}
  34. #game{background:#fff;position:absolute;left:0;top:0;right:0;bottom:0;background: url(img/bg.jpg) 0 0 no-repeat; background-size: 100% 100%;}
  35. #game.shake{-webkit-animation:shake 120ms}
  36. #game img{display:block;position:absolute}
  37. #game #current{height:40%;width:60%; top:25%; left:20%;}
  38. #game #next{width:50px;height:50px;top:20px;left:30px}
  39. #score{position:absolute;right:20px;top:20px;font-size:28px;color:#f00}
  40. #slash{position:absolute;left:0;top:0;bottom:0;right:0;opacity:0;-webkit-animation-duration:100ms}#slash.play{-webkit-animation:fadeout}
  41. #timer{display:none;position:absolute;left:20px;right:20px;bottom:20%;height:10px;font-size:20px;text-align:center;padding:0;line-height:1.5em}
  42. </style>
  43. </head>
  44. <body>
  45. <center>
  46. <div id="layer1" class="layer1"></div>
  47. <div id="layer2" class="layer2">
  48. <div id="start" class="next2" onclick="start();"></div>
  49. </div>
  50. <!-- 游戏部分start-->
  51. <div id="layer3" class="layer3">
  52. <div id="teach" style="display: none;">
  53. <div class="info">
  54. <img src="img/red.png" width="130" height="130">
  55. </div>
  56. <div class="info">
  57. <img src="img/green.png" width="130" height="130">
  58. </div>
  59. </div>
  60. <!-- <div id="start" style="display: block;">再来一盘</div>-->
  61. <div id="game" style="display: none;">
  62. <img id="current" src="img/red.png">
  63. <img id="next" src="img/red.png">
  64. <div id="score">战果:0</div>
  65. <div id="slash" class="" style="-webkit-animation: 3000ms; background: red;"></div>
  66. </div>
  67. <div id="timer" style="display: block;">15,00</div>
  68. <div id="share" style="display: block;"></div>
  69. <!-- <div id="share-mask"></div>-->
  70. </div>
  71. <!-- 游戏部分end-->
  72. <div id="layer4" class="layer4">
  73. <img class="layer4_img1" src="img/result.png" />
  74. <div class="layer4_result">吃货大作战,好厉害吃掉 <strong>1</strong> 盘!牛叉~</div>
  75. <img class="layer4_img2" src="img/share_btn.png" onclick="fnshare();"/>
  76. <img class="layer4_img3" src="img/again.png" onclick="newgame();"/>
  77. </div>
  78. <div class="shareinfo" onclick="fnsharehidd();">
  79. </div>
  80. </center>
  81. <script language="javascript" type="text/javascript">
  82. var dh = $(document).height();
  83. var dw = $(document).width();
  84. var present = parseInt($(document).height()) / 960;
  85. //var dw = parseInt(640 * present);
  86. if (dw > parseInt(640 * present)) {
  87. dw = parseInt(640 * present);
  88. }
  89. $("#layer1").css("height", dh + "px");
  90. $("#layer1").css("width", dw + "px");
  91. $("#layer2").css("height", dh + "px");
  92. $("#layer2").css("width", dw + "px");
  93. $("#layer3").css("height", dh + "px");
  94. $("#layer3").css("width", dw + "px");
  95. $("#layer4").css("height", dh + "px");
  96. $("#layer4").css("width", dw + "px");
  97. var imgNum = 0;
  98. var images = [];
  99. preLoadImg();
  100. function preLoadImg() {
  101. images.push("img/1.jpg");
  102. images.push("img/again.png");
  103. images.push("img/bg.jpg");
  104. images.push("img/green.png");
  105. images.push("img/loading.jpg");
  106. images.push("img/red.png");
  107. images.push("img/result.png");
  108. images.push("img/share.png");
  109. images.push("img/share_btn.png");
  110. $.imgpreload(images,
  111. {
  112. each: function() { },
  113. all: function() {
  114. // $(".fakeloader").fadeOut(200);
  115. // $(".layer1").show();
  116. timer();
  117. }
  118. });
  119. }
  120. var timeID;
  121. var times = 0;
  122. function timer() {
  123. timeID = setTimeout("timer()", 2000);
  124. if (parseInt(times) > 0) {
  125. $(".layer1").hide();
  126. $(".layer2").show();
  127. clearTimeout(timeID);
  128. }
  129. else {
  130. times++;
  131. }
  132. }
  133. function newgame() {
  134. $(".layer4").hide();
  135. //$(".layer3").show();
  136. start();
  137. }
  138. function fnshare() {
  139. $(".shareinfo").show();
  140. }
  141. function fnsharehidd() {
  142. $(".shareinfo").hide();
  143. }
  144. </script>
  145. <script src="js/tiger.js"></script>
  146. </body>
  147. </html>