index.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <!DOCTYPE html>
  2. <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <meta charset="UTF-8">
  4. <title>疯狂手臂,翻滚吧,是时候运动一下手臂了</title>
  5. <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="full-screen" content="true">
  8. <meta name="screen-orientation" content="portrait">
  9. <meta name="x5-fullscreen" content="true">
  10. <meta name="360-fullscreen" content="true">
  11. <script type="text/javascript" src="jquery.js"></script>
  12. <style type="text/css" media="screen">
  13. body {
  14. text-align: center;
  15. background: #ccc;
  16. overflow: hidden;
  17. }
  18. * {
  19. -webkit-touch-callout: none;
  20. -webkit-user-select: none;
  21. -khtml-user-select: none;
  22. -moz-user-select: none;
  23. -ms-user-select: none;
  24. user-select: none;
  25. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  26. }
  27. html {
  28. -ms-touch-action: none;
  29. /* Direct all pointer events to JavaScript code. */
  30. }
  31. #score {
  32. -webkit-transition: .3s;
  33. padding: 0;
  34. background: #eee;
  35. font-size: 1.5em;
  36. margin: 0 auto;
  37. margin-top: 50px;
  38. border-radius: 100%;
  39. border: 1px solid #eee;
  40. vertical-align: baseline;
  41. zoom: 1;
  42. width: 100px;
  43. height: 100px;
  44. line-height: 100px;
  45. }
  46. .time {
  47. font-size: 2em;
  48. color: #fff;
  49. }
  50. .share {
  51. color: #eee;
  52. width: 100%;
  53. height: 100%;
  54. position: absolute;
  55. top: 0;
  56. left: 0;
  57. background: rgba(0, 0, 0, .5);
  58. padding-top: 240px;
  59. }
  60. .btn {
  61. margin-right: 10px;
  62. font-size: 1.5em;
  63. display: inline-block;
  64. background: #999;
  65. padding: 15px;
  66. border-radius: 15px;
  67. }
  68. .fx {
  69. width: 100%;
  70. height: 100%;
  71. position: absolute;
  72. top: 0;
  73. left: 0;
  74. display: none;
  75. }
  76. </style>
  77. </head>
  78. <body style="">
  79. <p class="time"><span id="sec">10.00</span>秒</p>
  80. <p>点击开始,狂摇手机吧</p>
  81. <p id="score">开始</p>
  82. <div class="share" style="display: none; ">
  83. <span class="btn again">再来一次</span>
  84. <span class="btn go">炫耀一下</span>
  85. </div>
  86. <img class="fx" src="share.png" alt="share" ontouchstart="document.querySelector(&#39;.fx&#39;).style.display=&#39;none&#39;;">
  87. <div class="ads" style="width: 100%; height: 69px; margin: 0px; margin-top: 150px; padding: 0px; border: none; background: none; ">
  88. <a align="center" style="color:white" href="http://game.ikongzhong.cn/">更多游戏</a>
  89. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  90. <a align="center" style="color:white" href="http://game.ikongzhong.cn/games/dianji">疯狂点击屏幕</a>
  91. </div>
  92. <audio src="shake.m4r"></audio>
  93. <script type="text/javascript" charset="utf-8">
  94. var audio = document.querySelector('audio');
  95. audio.src = 'shake.m4r';
  96. var mebtnopenurl = 'http://game.ikongzhong.cn';
  97. function goHome()
  98. {
  99. window.location =
  100. "http://game.ikongzhong.cn/games/yao";
  101. }
  102. function dp_submitScore(score)
  103. {
  104. dp_share();
  105. }
  106. function onShareComplete(res)
  107. {
  108. document.location.href = mebtnopenurl;
  109. }
  110. window.shareData = {
  111. "imgUrl": "http://game.ikongzhong.cn/games/yao/logo.jpg",
  112. "timeLineLink": "http://game.ikongzhong.cn/games/yao",
  113. "tTitle": "疯狂手臂,翻滚吧,是时候治一下肩周炎了!",
  114. "tContent": "在10秒内疯狂的摇一摇,想赢?不容易。"
  115. };
  116. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady()
  117. {
  118. WeixinJSBridge.on('menu:share:appmessage', function(argv)
  119. {
  120. WeixinJSBridge.invoke('sendAppMessage',
  121. {
  122. "img_url": window.shareData.imgUrl,
  123. "link": window.shareData.timeLineLink,
  124. "desc": window.shareData.tContent,
  125. "title": window.shareData.tTitle
  126. }, onShareComplete);
  127. });
  128. WeixinJSBridge.on('menu:share:timeline', function(argv)
  129. {
  130. WeixinJSBridge.invoke('shareTimeline',
  131. {
  132. "img_url": window.shareData.imgUrl,
  133. "img_width": "640",
  134. "img_height": "640",
  135. "link": window.shareData.timeLineLink,
  136. "desc": window.shareData.tContent,
  137. "title": window.shareData.tTitle
  138. }, onShareComplete);
  139. });
  140. }, false);
  141. document.addEventListener('touchmove', function(e)
  142. {
  143. e.preventDefault();
  144. }, false);
  145. if (window.DeviceMotionEvent)
  146. {
  147. window.addEventListener('devicemotion', deviceMotionHandler, false);
  148. }
  149. var SHAKE_THRESHOLD = 600;
  150. var last_update = 0;
  151. var x, y, z, last_x, last_y, last_z;
  152. var ds = document.querySelector('#score');
  153. var sec = document.querySelector('#sec');
  154. var share = document.querySelector('.share');
  155. var go = document.querySelector('.go');
  156. var again = document.querySelector('.again');
  157. var score = 0;
  158. var begin = false;
  159. var time = 1000;
  160. var end = false;
  161. ds.textContent = '开始';
  162. share.style.display = 'none';
  163. again.addEventListener('touchstart', function()
  164. {
  165. location.reload();
  166. end = false;
  167. time = 1000;
  168. score = 0;
  169. share.style.display = 'none';
  170. ds.textContent = '开始';
  171. sec.textContent = '10.00';
  172. //run();
  173. });
  174. go.addEventListener('touchstart', function()
  175. {
  176. var fx = document.querySelector('.fx');
  177. fx.style.display = 'block';
  178. dp_share();
  179. });
  180. function dp_share()
  181. {
  182. if (score > 0)
  183. {
  184. document.title = '10秒我能摇' + score + '下,你行你试试.'
  185. }
  186. else
  187. {
  188. document.title = '疯狂摇一摇,玩完之后我的胳膊已经不是我的了.';
  189. }
  190. window.shareData.tTitle = document.title;
  191. }
  192. function run()
  193. {
  194. if (begin || end) return;
  195. audio.loop = true;
  196. audio.play();
  197. begin = true;
  198. ds.textContent = 0;
  199. var tid = setInterval(function()
  200. {
  201. time--;
  202. document.body.style.backgroundColor = '#' + (time + 700).toString(
  203. 16);
  204. if (time < 0)
  205. {
  206. audio.loop = false;
  207. audio.pause();
  208. document.body.style.backgroundColor = '#ccc';
  209. clearInterval(tid);
  210. begin = false;
  211. end = true;
  212. share.style.display = 'block';
  213. return;
  214. }
  215. sec.textContent = (time / 100).toPrecision(time.toString().length);
  216. }, 10);
  217. }
  218. ds.addEventListener('touchstart', function()
  219. {
  220. run();
  221. });
  222. function deviceMotionHandler(eventData)
  223. {
  224. if (!begin)
  225. {
  226. ds.style.webkitTransform = 'translate3d(0px,0px,0px)';
  227. return;
  228. }
  229. var acceleration = eventData.accelerationIncludingGravity;
  230. var curTime = new Date().getTime();
  231. var diffTime = curTime - last_update;
  232. if (diffTime > 100)
  233. {
  234. last_update = curTime;
  235. x = acceleration.x;
  236. y = acceleration.y;
  237. z = acceleration.z;
  238. var xdiff = (x - last_x);
  239. var ydiff = (y - last_y);
  240. var zdiff = (z - last_z);
  241. ds.style.webkitTransform = 'translate3d(' + xdiff + 'px,' + ydiff +
  242. 'px,' + zdiff + 'px)';
  243. var value = x + y + z;
  244. var lastvalue = last_x + last_y + last_z;
  245. var speed = Math.abs(value - lastvalue) /
  246. diffTime * 10000;
  247. if (speed > SHAKE_THRESHOLD)
  248. {
  249. ds.textContent = score++;
  250. }
  251. last_x = x;
  252. last_y = y;
  253. last_z = z;
  254. }
  255. }
  256. </script>
  257. <img src="http://img.tongji.linezing.com/3455448/tongji.gif">
  258. <script type="text/javascript" src="http://tajs.qq.com/stats?sId=36313548" charset="UTF-8"></script></body></html>