index.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta content="stick man,耍棍,小游戏,手机游戏,webAPP" name="Keywords">
  6. <meta name="description" content="Webapp游戏新体验,Developed by woody">
  7. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8. <div id='wx_pic' style='margin:0 auto;display:none;'>
  9. <img src='photo.jpg' />
  10. </div>
  11. <title>智商超过130的人才能玩到第40关哦</title>
  12. <link rel="stylesheet" type="text/css" href="css/style.css"/>
  13. <script src="js/WeixinApi.js" type="text/javascript" charset="utf-8"></script>
  14. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  15. <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
  16. <style type="text/css">
  17. <!--
  18. .STYLE2 {
  19. font-size: 18px;
  20. color: #0000FF;
  21. }
  22. -->
  23. </style>
  24. </head>
  25. <body>
  26. <div class="point">
  27. 0
  28. </div>
  29. <!--
  30. <div class="shouji">
  31. <img src="img/bg1.png" class="img" />
  32. </div>
  33. -->
  34. <div class="point">
  35. 0
  36. </div>
  37. <div class="tips">
  38. 将手放在屏幕,使竿变长,据说智商超过130的人,<br />
  39. 才能玩到第40关,您能到几关呢?<br />
  40. 把您的成绩截图发到公众号“mkongzhong”<br />
  41. 超过180关赠送公共号运营教程<br />
  42. </div>
  43. <div id="main">
  44. <div class="wall">
  45. </div>
  46. <div class="wall new" style="left: 50%;">
  47. </div>
  48. <div class="stick"></div>
  49. <div class="stickMan">
  50. <!--<img src="img/stick.gif" width="5%"/>-->
  51. <img src="images/stick_stand.png" width="5%"/>
  52. </div>
  53. </div>
  54. <!-- 游戏结束弹层-->
  55. <div class="gameOver">
  56. <h3>游戏结束!</h3>
  57. <div class="showPoint">
  58. <p>分数</p>
  59. <p class="newPoint">0</p>
  60. <p>最佳</p>
  61. <p class="bestPoint">0</p>
  62. <p><a href="http://mp.weixin.qq.com/s?__biz=MzI4MjA2MjE0MQ==&mid=246005295&idx=1&sn=490f8141976d607ba079d48f52a3fcd7#rd" target="_self" style=" font-size:18px; color:#0000FF">空中传媒</a></p>
  63. </div>
  64. <div class="btn share">分享</div>
  65. <div class="btn again">再玩一次</div>
  66. </div>
  67. <div id="mask">
  68. <img src="images/share_img01.gif"/>
  69. </div>
  70. <div class="reloadImg" style="display: none;">
  71. <img src="images/stick.gif" />
  72. </div>
  73. </body>
  74. <script type="text/javascript">
  75. var longStick;
  76. var shortStick;
  77. var screenWidth = document.documentElement.clientWidth;
  78. var point = 0;
  79. var speed = "5%";
  80. function touchSatrtFunc(evt) {
  81. if(point>=2){
  82. $(".tips").hide();
  83. }
  84. evt.preventDefault();
  85. document.addEventListener('touchend', touchEndFunc, false);
  86. initStick();
  87. //longStick = setInterval(function(){
  88. // $('.stick').css({width:'+='+speed});
  89. //},30);
  90. getLong();
  91. document.removeEventListener('touchstart', touchSatrtFunc, false);
  92. }
  93. function getLong() {
  94. if(point>5){
  95. //alert(point);
  96. speed="5%";
  97. }
  98. longStick = setInterval(function() {
  99. var stickWidth = getWidthNumber($('.stick').css('width'));
  100. if(stickWidth<=screenWidth){
  101. $('.stick').css({width:'+='+speed});
  102. }else{
  103. clearInterval(longStick);
  104. getShort();
  105. }
  106. },30);
  107. }
  108. function getShort() {
  109. if(point>5){
  110. //alert(point);
  111. speed="10%";
  112. }
  113. shortStick = setInterval(function() {
  114. var stickWidth = getWidthNumber($('.stick').css('width'));
  115. if(stickWidth>0){
  116. $('.stick').css({width:'-='+speed});
  117. }else{
  118. clearInterval(shortStick);
  119. getLong();
  120. }
  121. },30);
  122. }
  123. function getWidthNumber(ele){
  124. if (ele) {
  125. var WidthNumber = ele.substr(0,ele.length-2);
  126. WidthNumber = Number(WidthNumber);
  127. return WidthNumber;
  128. }
  129. }
  130. function touchEndFunc(evt) {
  131. clearBind();
  132. evt.preventDefault();
  133. clearInterval(longStick);
  134. clearInterval(shortStick);
  135. setTimeout(function(){
  136. $('.stick').css('transition','.6s');
  137. $('.stick').css('transform','rotate(0deg)');
  138. setTimeout('checkStickLong.check()',600);
  139. },200);
  140. }
  141. function touchMoveFunc(evt){
  142. evt.preventDefault();
  143. }
  144. function initStick() {
  145. $(".stick").css({'transition':'0','transform':'rotate(-90deg)','width':'0','left':'20%'});
  146. }
  147. function init(){
  148. $(".stick").css({'transform-origin':'0 0','transform':'rotate(-90deg)'});
  149. addBind();
  150. document.addEventListener('touchmove', touchMoveFunc, false);
  151. $(".again").click(function(){
  152. $(".gameOver").css('display','none');
  153. addBind();
  154. $(".point,.tips").css('display','block');
  155. point = 0;
  156. speed="5%";
  157. $(".point").html(point);
  158. $(".wall").eq(0).css({'left':'0','width':'20%'});
  159. $(".new").css({'left':'50%','width':'20%'});
  160. $(".stick").css('transition','0')
  161. $(".stick").css('width','0');
  162. $(".stickMan").css({'left':'15.5%','bottom':'66.5%'});
  163. $("body").css('background-position-x', '0');
  164. $(".stickMan img").attr({'src':'images/stick_stand.png'});
  165. $(".shouji").css({"left":"0%"});
  166. });
  167. $(".share").click(function(){
  168. $("#mask").css('display','block');
  169. });
  170. $("#mask").click(function(){
  171. $("#mask").css('display','none');
  172. });
  173. }
  174. function addBind() {
  175. document.addEventListener('touchstart', touchSatrtFunc, false);
  176. }
  177. function clearBind() {
  178. document.removeEventListener('touchstart', touchSatrtFunc, false);
  179. document.removeEventListener('touchend', touchEndFunc, false);
  180. }
  181. function orientationChange() {
  182. switch(window.orientation) {
  183.   case 0:
  184. addBind();
  185. $("body").css('transform','');
  186. break;
  187.   case -90:
  188. clearBind();
  189. alert("游戏要竖屏玩哟!!!");
  190. $("body").css('transform','rotate(90deg)');
  191. break;
  192.   case 90:
  193. clearBind();
  194. alert("游戏要竖屏玩哟!!!");
  195. $("body").css('transform','rotate(-90deg)');
  196. break;
  197.   case 180:
  198. addBind();
  199. $("body").css('transform','rotate(0deg)');
  200.   break;
  201. }
  202. }
  203. $(document).ready(function(){
  204. init();
  205. orientationChange();
  206. window.onorientationchange = orientationChange;
  207. shareToWeixin();
  208. })
  209. </script>
  210. </html>