홈 탐색 도움말
가입하기 로그인
root
/
tv_xiaoyouxi
Watch 1
Star 0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
트리: d1c3c48a01
브랜치 태그
tv_xiaoyouxi
/
games
/
cbd
/
index.html

index.html 21 KB
히스토리 Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418 
  1. <!DOCTYPE HTML>
    2. 

  2. <head>
    3. 

  3. <meta charset="utf-8">
    4. 

  4. <meta name="author" content="Tencent-TGideas">
    5. 

  5. <meta name="format-detection" content="telephone=no" />
    6. 

  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    7. 

  7. <meta name="apple-mobile-web-app-capable" content="yes" />
    8. 

  8. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    9. 

  9. <title>抽绷带-全民打怪兽</title>
    10. 

  10. <!-- 设计：yafeezhou| 重构：brucewan | 创建：2014/05/08 | 更新：| 团队博客：http://tgideas.qq.com/ -->
    11. 

  11. <script>
    12. 

  12. 	var _speedMark = new Date();
    13. 

  13. </script>
    14. 

  14. <style>
    15. 

  15. /* global */
    16. 

  16. html,body,ul,h1,h2,h3,p,input,img,figure{margin: 0;padding: 0;}
    17. 

  17. ul,ol{list-style: none;}
    18. 

  18. html{overflow: hidden;}
    19. 

  19. body{width: 100%;height: 100%;overflow: hidden;-webkit-user-select: none;}
    20. 

  20. body{font:12px/21px  Arial,\5FAE\8F6F\96C5\9ED1;color: #fff;}
    21. 

  21. @font-face {font-family: 'icon';src: url('./res/hero.woff') format('woff'), url('./res/hero.ttf')  format('truetype');}
    22. 

  22.  [class^="icon-"]:before, [class*=" icon-"]:before {display: inline-block; width: 1em;margin-right: .2em;font-family: "icon";font-style: normal;font-weight: normal;text-align: center;speak: none;line-height: 1em; margin-left: .2em;}
    23. 

  23. .icon-more:before { content: '\e800'; } 
    24. 

  24. .icon-share:before { content: '\e801'; } 
    25. 

  25. .icon-play:before { content: '\e802'; }
    26. 

  26. a{color: #33234f;text-decoration: none;}
    27. 

  27. a:active{-webkit-tap-highlight-color: rgba(0,0,0,0);}
    28. 

  28. 

  29. @-webkit-keyframes jump {
    30. 

  30. 	0% { -webkit-transform: translate(0, 0);}
    31. 

  31. 	100% { -webkit-transform: translate(0, 100px);}
    32. 

  32. }
    33. 

  33. @-webkit-keyframes wave {
    34. 

  34. 	0% { -webkit-transform: scale(1, 1);opacity: 0.5;}
    35. 

  35. 	100% { -webkit-transform: scale(2, 2);opacity: 0;}
    36. 

  36. }
    37. 

  37. 

  38. 

  39. /* layout */
    40. 

  40. .screen-slide{position: absolute;height: 300%;width: 100%;}
    41. 

  41. .screen-slide .s{height: 33.4%;position: relative;overflow: hidden;}
    42. 

  42. .screen-slide .content{position: absolute;left: 50%;top: 50%;width: 360px;height: 575px;margin-left: -180px;margin-top: -288px;background: #ff0;}
    43. 

  43. 

  44. .s1{background-color: #4bb8a4;}
    45. 

  45. .s1 .content{background: url(./images/bg-s1.jpg);-webkit-background-size: 360px 575px;background-size: 360px 575px;}
    46. 

  46. .s1 .progress{position: absolute;right: 100px;top: 243px;width: 130px;font-size: 24px;text-align: center;}
    47. 

  47. .s1 .progress .num{margin-right: 5px;font-size: 42px}
    48. 

  48. 

  49. 

  50. .s2{background-color: #4bb8a4;}
    51. 

  51. .s2 .content{background: url(./images/bg-s2.jpg);-webkit-background-size: 360px 575px;background-size: 360px 575px;}
    52. 

  52. .s2 .paper-box{-webkit-transform:skew(0,-8deg);transform:skew(0,-8deg);position: absolute;top: 232px;left: 118px;width: 176px;height: 400px;background:  url(./images/bg-paper.jpg) repeat-y;-webkit-background-size: 176px 143px;background-size: 176px 143px;}
    53. 

  53. .s2 .tips{position: absolute;top: 100px;left: 0;width: 360px;height: 400px;text-align: center;line-height: 1}
    54. 

  54. .s2 .tips p{margin: 8px 0;}
    55. 

  55. .s2 .tips .f1{font-size: 14px;}
    56. 

  56. .s2 .tips .f2{font-size: 30px;font-weight: bold;}
    57. 

  57. .s2 .tips .f3{font-size: 14px;line-height: 18px;color: #066355}
    58. 

  58. .s2 .tips .f4{font-size: 40px;color: #1d8172;}
    59. 

  59. .s2 .tips .f5{font-size: 16px;}
    60. 

  60. .s2 .tips .f6{font-size: 28px;color: #ff0}
    61. 

  61. .s2 .tips .f7{font-size: 24px;color: #fff}
    62. 

  62. .s2 .guide{position: absolute;top: 280px;left: 116px;z-index: 1;width: 130px;height: 200px;color: #000;font-weight: bold;font-size: 16px;text-align: center;pointer-events: none;-webkit-transition:.5s opacity;}
    63. 

  63. .s2 .guide .hand{width: 75px;height: 65px;margin: 10px 0 0 28px;background: url('./images/icon-hand.png') no-repeat;-webkit-background-size: 75px 65px;background-size: 75px 65px;-webkit-animation: jump 2s infinite;}
    64. 

  64. .s2 .guide .f8{font-size: 12px;font-weight: normal;}
    65. 

  65. .s2 .guide.hide{opacity: 0}
    66. 

  66. .s2 .logo{position: absolute;left:10px;top: 10px;z-index: 2;opacity: .2;}
    67. 

  67. 

  68. .s3{background-color: #556573;}
    69. 

  69. .s3 .content{background: url(./images/bg-s3.jpg);-webkit-background-size: 360px 575px;background-size: 360px 575px;}
    70. 

  70. .s3 .tips{width: 200px;margin-left: 80px;padding-top: 110px;text-align: center;}
    71. 

  71. .s3 .tips .f1{font-size: 14px;}
    72. 

  72. .s3 .tips .f2{font-size: 14px;color: #fffb87}
    73. 

  73. .s3 .tips .f3{margin-top: 10px;font-size: 20px;color: #fffb87}
    74. 

  74. .s3 .tips .f3 .num{margin: 0 5px;font-size: 28px;}
    75. 

  75. .s3 .img img{width: 120px;height: 125px;}
    76. 

  76. .s3 .tips .f4{font-size: 12px;color: #b5c8d8}
    77. 

  77. .s3 .logo{position: absolute;left:10px;top: 10px;z-index: 2;opacity: .2;}
    78. 

  78. 

  79. .s3 .fuc{margin-top: 15px;text-align: center;}
    80. 

  80. .s3 .fuc .btn-wrap{display: inline-block;position: relative;}
    81. 

  81. .s3 .fuc .btn-wrap .bg{position: absolute;left: 10px ;top: 0;width: 60px;height: 60px;border-radius: 30px;background: #e6f6ff;-webkit-animation: wave 2s infinite;}
    82. 

  82. .s3 .fuc .btn-wrap .about{position: absolute;left: -22px;width: 120px;top: 70px;border-radius: 3px; background-color: rgba(255,255,255,0.2);color: #fff}
    83. 

  83. .s3 .fuc .btn{position: absolute;left: 0;top: 0;z-index: 2;display: inline-block;width: 60px;height: 60px;border-radius: 30px;margin: 0 10px;background-color: #76a6c8;position: relative;-webkit-box-shadow:0 3px rgba(0,0,0,.4);box-shadow:0 3px rgba(0,0,0,.4);}
    84. 

  84. .s3 .fuc .btn span{position: absolute;width: 60px;height: 60px;top: -3px;left: 0;border-radius: 30px;background-color: #e6f6ff;color: #5d90ab;font-size: 12px;line-height: 18px;}
    85. 

  85. .s3 .fuc .btn span::before{display: inline-block;width: 100%;margin: 12px 0 0 0;font-size: 20px}
    86. 

  86. .s3 .fuc .btn-em{background-color: #c9950c;}
    87. 

  87. .s3 .fuc .btn-em span{background-color: #f3c856;color: #ab6c21}
    88. 

  88. 

  89. .share-guide{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8) url(./images/icon-arrow.png?33) no-repeat 90% 20px;-webkit-background-size: 40px 80px;background-size: 40px 80px;color: #fff;}
    90. 

  90. .share-guide p{padding: 100px 30px 30px;text-align: right;font-size: 20px;line-height: 30px;}
    91. 

  91. .share-guide .em{color: #ff734d;}
    92. 

  92. 

  93. </style>
    94. 

  94. <script>
    95. 

  95. 	document.documentElement.style.height = window.innerHeight + 'px';
    96. 

  96. </script>
    97. 

  97. </head>
    98. 

  98. 

  99. <body>
    100. 

  100. 	<div class="screen-slide">
    101. 

  101. 		<div class="s s1">
    102. 

  102. 			<div class="content">
    103. 

  103. 				<div class="progress"><span class="num">0</span>%</div>
    104. 

  104. 			</div>
    105. 

  105. 		</div>
    106. 

  106. 		<div class="s s2">
    107. 

  107. 			<a href="#" class="logo"><img src="./images/logo.png" width="59" height="42" alt="全民打怪兽"></a>
    108. 

  108. 			<div class="content">
    109. 

  109. 				<div class="tips">
    110. 

  110. 					<div class="ready">
    111. 

  111. 						<p class="f1">　</p>
    112. 

  112. 						<p class="f2">“抽绷带 救怪兽”</p>
    113. 

  113. 						<p class="f3">12秒内看看你能抽出多长的绷带</p>
    114. 

  114. 					</div>
    115. 

  115. 					<div class="run" style="display:none">
    116. 

  116. 						<p class="f4">“00:12:00”</p>
    117. 

  117. 						<p class="f5">已抽出绷带 <span class="f6"><span class="dis">0</span> <span class="f7">m</span></span></p>		
    118. 

  118. 					</div>
    119. 

  119. 				</div>
    120. 

  120. 				<div class="guide">
    121. 

  121. 					<p><span class="f8">提示</span><br/>手指下向滑动<br/>开始游戏</p>
    122. 

  122. 					<div class="hand"></div>
    123. 

  123. 				</div>
    124. 

  124. 				<div class="paper-box"></div>
    125. 

  125. 			</div>
    126. 

  126. 		</div>
    127. 

  127. 		<div class="s s3">
    128. 

  128. 			<a href="#" class="logo"><img src="./images/logo.png" width="59" height="42" alt="全民打怪兽"></a>
    129. 

  129. 			<div class="content">
    130. 

  130. 				<div class="tips">
    131. 

  131. 					<p class="f1">你神一样的手速，碉堡了</p>
    132. 

  132. 					<p class="f2">本次抽出绑带<span class="f3"><span class="num">7</span>m</span></p>
    133. 

  133. 					<p class="img"><img src="./images/pic1.jpg" alt=""></p>
    134. 

  134. 					<p class="f4">“我还需要更多绑带”</p>
    135. 

  135. 				</div>
    136. 

  136. 				<div class="fuc">
    137. 

  137. 					<div class="btn"><span class="icon-more">再来</span></div>
    138. 

  138. 					<div class="btn"><span class="icon-share">分享</span></div>
    139. 

  139. 					<div class="btn-wrap">
    140. 

  140. 						<div class="btn btn-em"><span class="icon-play">去战场</span></div>
    141. 

  141. 						<div class="bg"></div>
    142. 

  142. 						<p class="about">去玩全民打怪兽吧！</p>
    143. 

  143. 					</div>
    144. 

  144. 				</div>
    145. 

  145. 			</div>
    146. 

  146. 		</div>
    147. 

  147. 

  148. 	</div>
    149. 

  149. 

  150. 	<div class="share-guide" style="display:none;">
    151. 

  151. 		<p>点击上面按钮<br/>将成绩 <span class="em">分享到朋友圈</span></p>
    152. 

  152. 	</div>
    153. 

  153. 

  154. 	<script>
    155. 

  155. 		(function(e){if(e)return;var t=["webkit","moz","o"],e={extend:function(e,t,n,r){n===undefined&&(n=!0);for(var i in t)if(n||!(i in e))r?r(i):e[i]=t[i];return e},support:{translate3d:function(){var e="translate3d(0px, 0px, 0px)",t=document.createElement("div");t.style.cssText=" -moz-transform:"+e+"; -ms-transform:"+e+"; -o-transform:"+e+"; -webkit-transform:"+e+"; transform:"+e;var n=/translate3d\(0px, 0px, 0px\)/g,r=t.style.cssText.match(n),i=r!==null&&r.length==1;return i}()},css:function(e,n,r){var i=/transform/i;if(i.test(n))for(var s=0;s<t.length;s++)e.style[t[s]+n.substr(0,1).toUpperCase()+n.substr(1)]=r;e.style[n]=r}};window.m=e})(window.m),m.Tab=function(e){this.config=m.extend(m.extend({},m.Tab.config),e,!0),this.init()},m.Tab.config={touchMove:!1,animTime:500,touchDis:40,direction:"x",touchSpeed:1,currentClass:"current",progressBar:!1},m.Tab.prototype={init:function(){var e=this,t=e.config;e._data={},e.target=t.target,e.length=e.target.length,e.trigger=t.trigger,e.num=e.target.length,e.wrap=e.target[0].parentNode,m.support.translate3d&&(e.wrap.style.webkitTransition="-webkit-transform "+t.animTime+"ms ease-out"),m.css(e.wrap,"transform","translate(0,0)"),e.width=e.wrap.parentNode.clientWidth;if(t.progressBar===!0){var n=document.createElement("ul");n.classList.add("progress-bar");for(var r=0;r<e.length;r++){var i=document.createElement("li");n.appendChild(i)}e.progressBar=e.wrap.parentNode.appendChild(n).childNodes}e._attach(),e.playTo(0)},_attach:function(){var e=this,t=e.config;window.addEventListener("resize",e.update.bind(e));if(e.trigger){var n=e.trigger.length;for(var r=0;r<n;r++)(function(t){e.trigger[t].addEventListener("touchend",function(n){e.playTo(t)})})(r)}var i=e._data,s=!1,o,u,a;t.touchMove&&e.wrap.addEventListener("touchstart",function(n){if(t.ontouchstart&&t.ontouchstart.apply(e,[n])===!1)return!1;i.pageX=n.touches[0].pageX,i.pageY=n.touches[0].pageY,e.wrap.style.webkitTransitionDuration="0ms",e.wrap.addEventListener("touchmove",u),e.wrap.addEventListener("touchend",a),o=""}),u=function(n){i.disX=n.touches[0].pageX-i.pageX,i.disY=n.touches[0].pageY-i.pageY,t.direction=="x"?i.dis=i.disX:i.dis=i.disY,o||(Math.abs(i.disX/i.disY)>1?o="x":o="y");if(t.ontouchmove&&t.ontouchmove.apply(e,[i.dis,n])===!1)return!1;t.direction==o&&(t.direction=="x"?m.css(e.wrap,"transform","translate3d("+(i.dis-e.target[e.current].offsetLeft)+"px,0,0)"):m.css(e.wrap,"transform","translate3d(0,"+(i.dis-e.target[e.current].offsetTop)+"px,0)"))},a=function(){if(o&&t.direction!=o)return;if(i.dis===undefined||isNaN(i.dis))i.dis=0;e.wrap.style.webkitTransitionDuration=t.animTime+"ms",e.wrap.removeEventListener("touchmove",u),e.wrap.removeEventListener("touchend",a);var n=!0;t.ontouchend&&t.ontouchend.apply(e,[i.dis])===!1&&(n=!1);if(!i.dis||Math.abs(i.dis)<t.touchDis||!n){e.playTo(e.current);return}i.dis>0?e.playTo(e.current-t.touchSpeed):e.playTo(e.current+t.touchSpeed),i.dis=0},e.wrap.addEventListener("click",function(n){t.onclick&&t.onclick.call(e,n)})},playTo:function(e){var t=this,n=t.config;t.wrap.style.webkitTransitionDuration=n.animTime+"ms";if(n.onchangebefore&&n.onchangebefore.apply(t,[e])===!1)return;e>=t.num-1&&(e=t.num-1),e<0&&(e=0),m.support.translate3d?n.direction=="x"?m.css(t.wrap,"transform","translate3d("+ -t.target[e].offsetLeft+"px,0,0)"):m.css(t.wrap,"transform","translate3d(0,"+ -t.target[e].offsetTop+"px,0)"):n.direction=="x"?m.css(t.wrap,"transform","translate("+ -t.target[e].offsetLeft*e+"px,0)"):m.css(t.wrap,"transform","translate(0,"+ -t.target[e].offsetTop*e+"px)");if(e===t.current)return;t.trigger&&t.trigger[t.current]&&t.trigger[t.current].classList.remove(n.currentClass),t.progressBar&&t.progressBar[t.current]&&t.progressBar[t.current].classList.remove(n.currentClass),t.prevPage=t.current,t.current=e,t.trigger&&t.trigger[t.current]&&t.trigger[t.current].classList.add(n.currentClass),t.progressBar&&t.progressBar[t.current]&&t.progressBar[t.current].classList.add(n.currentClass),n.onchangebefore&&n.onchangebefore.apply(t,[e]),n.lazyClass&&t.lazy(e),window.setTimeout(function(){n.onchange&&n.onchange.apply(t,[e])},n.animTime)},prev:function(){this.playTo(this.current-1)},next:function(){this.playTo(this.current+1)},update:function(e){var t=this;t.width=t.wrap.parentNode.clientWidth},lazy:function(e){var t=[];targetWrap=this.target[e],targetWrap.classList.contains(this.config.lazyClass)&&t.push(targetWrap);var n=Array.prototype.slice.call(targetWrap.querySelectorAll("."+this.config.lazyClass),0);t=t.concat(n);for(var r=0;r<t.length;r++){var i=t[r],s=i.getAttribute("data-url");s&&(/img/i.test(i.tagName)?i.src=s:i.style.backgroundImage="url("+s+")",i.removeAttribute("data-url"))}}},m.Pop=function(e){this.config=m.extend(e,m.Pop.config),this.init()},m.Pop.config={animTime:300},m.Pop.prototype={init:function(){var e=this,t=e.config;e.target=t.target,e.target.style.webkitPerspective="1000px",e.target.style.webkitBackfaceVisibility="hidden",e.context=t.target.querySelector(".pop-content"),e.context.style.webkitTransition="-webkit-transform "+t.animTime+"ms ease-out",e.context.style.webkitTransformOrigin="50% 0",e.hide()},show:function(){var e=this,t=e.config;e.target.style.display="block",window.setTimeout(function(){e.context.style.webkitTransform="translate3d(0,0,0) rotateX(0)"},0)},hide:function(){var e=this,t=e.config;e.context.style.webkitTransform="translate3d(0,-50%,0) rotateX(-90deg)",window.setTimeout(function(){e.target.style.display="none"},t.animTime)}}
    156. 

  156. 	</script>
    157. 

  157. 

  158. 

  159. 

  160. 	<script>
    161. 

  161. 

  162. 		// name space
    163. 

  163. 		window.page = {};
    164. 

  164. 

  165. 		// reset page scroll top
    166. 

  166. 		// document.documentElement.scrollTop =  0;
    167. 

  167. 		window.scrollTo(0, 0);
    168. 

  168. 

  169. 

  170. 

  171. 

  172. 

  173. 		document.addEventListener('DOMContentLoaded', function(){
    174. 

  174. 

  175. 			// screen slide
    176. 

  176. 			page.screenSlide = new m.Tab({
    177. 

  177. 				target: document.querySelectorAll('.screen-slide .s'),
    178. 

  178. 				onchangebefore: function(n){
    179. 

  179. 

  180. 				},
    181. 

  181. 				touchMove: false,
    182. 

  182. 				direction: 'y'
    183. 

  183. 			});	
    184. 

  184. 

  185. 			// loading
    186. 

  186. 			var domProgress = document.querySelector('.progress .num');
    187. 

  187. 			var TIME = 3000;
    188. 

  188. 			var intervals = [];
    189. 

  189. 			var per = 0;
    190. 

  190. 			for(var i = 0; i < 100; i++) {
    191. 

  191. 				intervals.push( parseInt(Math.random() * TIME) );
    192. 

  192. 

  193. 			}
    194. 

  194. 			intervals = intervals.sort(function(a,b){return a - b});
    195. 

  195. 

  196. 			for(var i = 0; i < intervals.length; i++) {
    197. 

  197. 				window.setTimeout(function(){
    198. 

  198. 					per++;
    199. 

  199. 					domProgress.innerHTML = per;
    200. 

  200. 					// m.css(domProgress.parentNode, 'transform', 'translate(0,'+ Math.random()*1  +'px' + ')');
    201. 

  201. 				}, intervals[i]);
    202. 

  202. 			}
    203. 

  203. 

  204. 			window.setTimeout(function(){
    205. 

  205. 				page.screenSlide.playTo(1);
    206. 

  206. 			}, TIME + 300);
    207. 

  207. 

  208. 

  209. 

  210. 			// game
    211. 

  211. 			var bgPosY = 0;
    212. 

  212. 			score = 0;
    213. 

  213. 			var gameTime = 12000;
    214. 

  214. 			var d = {};
    215. 

  215. 			var domPaper = document.querySelector('.paper-box');
    216. 

  216. 			var domS2 = document.querySelector('.s2');
    217. 

  217. 			var domTimer = document.querySelector('.s2 .tips .f4');
    218. 

  218. 			var domDis = document.querySelector('.s2 .tips .dis');
    219. 

  219. 			var domResultText1 = document.querySelector('.s3 .f1');
    220. 

  220. 			var domResultText2 = document.querySelector('.s3 .f4');
    221. 

  221. 			var domResultScore = document.querySelector('.s3 .num');
    222. 

  222. 			var domResultRole = document.querySelector('.s3 .img img');
    223. 

  223. 			var resultTexts1 = ['你天生不是治愈系，<br/>还是去打怪兽吧！ ', '施主无力救治…<br/>还是去打怪兽吧！', '包扎的恰到好处~良心打手，<br/>你可以继续去打怪兽啦！', '神一样的手速，神一样的战斗力！<br/>还不快去打怪兽！', '大力出奇迹！<br/>这样也能打怪兽！'];
    224. 

  224. 			var resultTexts2 = ['主人，最近全民都在打怪兽，我还想战斗T＿T', '主人，我可以的！奔赴怪兽战场为你争光去！', '满血复活！主人快带我去战斗吧！', '主人，你太爱（keng）我(die)了！', '主人*&*%￥#*…（碾压战场么…）'];
    225. 

  225. 			var hasBegun = false;
    226. 

  226. 			var hasEnd = false;
    227. 

  227. 			domS2.addEventListener('touchstart', function(e){
    228. 

  228. 				if(hasEnd) return;
    229. 

  229. 				d.startY = e.touches[0].pageY;
    230. 

  230. 				domS2.addEventListener('touchmove', touchMove);
    231. 

  231. 				domS2.addEventListener('touchend', touchEnd);
    232. 

  232. 

  233. 				if(!hasBegun) {
    234. 

  234. 					document.querySelector('.ready').style.display = 'none';
    235. 

  235. 					document.querySelector('.run').style.display = 'block';
    236. 

  236. 					document.querySelector('.guide').className = 'guide hide';
    237. 

  237. 					timerStart();
    238. 

  238. 					hasBegun = true;
    239. 

  239. 				}
    240. 

  240. 			});
    241. 

  241. 			touchMove = function(e){
    242. 

  242. 

  243. 				d.disY = e.touches[0].pageY - d.startY;
    244. 

  244. 				d.startY = e.touches[0].pageY;
    245. 

  245. 

  246. 				if(Math.abs(d.dis / d.disY) > 0.5) {
    247. 

  247. 					e.stopPropagation();
    248. 

  248. 					e.preventDefault();
    249. 

  249. 				}
    250. 

  250. 				if(d.disY < 0) return;
    251. 

  251. 

  252. 

  253. 

  254. 				// domPaper.style.webkitTransform = 'translate3d(' + (d.dis - self.current * self.width) + 'px,0,0)';
    255. 

  255. 				// console.log(d.disY)
    256. 

  256. 				bgPosY += d.disY;
    257. 

  257. 				score += parseInt(d.disY/20);
    258. 

  258. 				// console.log(bgPosY)
    259. 

  259. 

  260. 				 domPaper.style.backgroundPositionY = bgPosY + 'px';
    261. 

  261. 				 domDis.innerHTML = score;
    262. 

  262. 				
    263. 

  263. 			}
    264. 

  264. 			touchEnd = function() {
    265. 

  265. 

  266. 				domS2.removeEventListener('touchmove', touchMove);
    267. 

  267. 				domS2.removeEventListener('touchend', touchEnd);
    268. 

  268. 

  269. 

  270. 

  271. 				d.disY = 0;
    272. 

  272. 

  273. 			};
    274. 

  274. 

  275. 			timerStart = function(){
    276. 

  276. 				if(gameTime < 0) {
    277. 

  277. 					hasEnd = true;
    278. 

  278. 

  279. 					level = parseInt(score/250);
    280. 

  280. 					level = level > 4 ? 4 : level;
    281. 

  281. 

  282. 					domResultScore.innerHTML = score;
    283. 

  283. 					domResultText1.innerHTML = resultTexts1[level];
    284. 

  284. 					domResultText2.innerHTML = resultTexts2[level];
    285. 

  285. 					domResultRole.src = './images/pic'+ (level + 1 )+'.jpg'
    286. 

  286. 

  287. 					window.setTimeout(function(){
    288. 

  288. 						page.screenSlide.playTo(2);
    289. 

  289. 					}, 300);
    290. 

  290. 					return;
    291. 

  291. 				}
    292. 

  292. 				var sec = ('00' + parseInt(gameTime/1000)).substr(-2, 2);
    293. 

  293. 				var ms = (gameTime - sec*1000 + '00').substr(0, 2);
    294. 

  294. 				domTimer.innerHTML = '“00:'+ sec +':'+ ms +'”';
    295. 

  295. 				gameTime -= 20;
    296. 

  296. 				window.setTimeout(timerStart, 20);
    297. 

  297. 			}
    298. 

  298. 

  299. 

  300. 

  301. 			window.restart = function(){
    302. 

  302. 				bgPosY = 0;
    303. 

  303. 				score = 0;
    304. 

  304. 				gameTime = 12000;
    305. 

  305. 				d = {};
    306. 

  306. 				domPaper = document.querySelector('.paper-box');
    307. 

  307. 				domTimer = document.querySelector('.s2 .tips .f4');
    308. 

  308. 				domDis = document.querySelector('.s2 .tips .dis');
    309. 

  309. 				hasBegun = false;
    310. 

  310. 				hasEnd = false;
    311. 

  311. 				domDis.innerHTML = '0';
    312. 

  312. 				page.screenSlide.playTo(1);
    313. 

  313. 			}
    314. 

  314. 

  315. 

  316. 			document.querySelector('.icon-more').addEventListener('touchend', function(e){
    317. 

  317. 				restart();
    318. 

  318. 				pgvSendClick({hottag:'a20140515bandage.restart'});
    319. 

  319. 			});
    320. 

  320. 

  321. 			document.querySelector('.icon-share').addEventListener('touchend', function(){
    322. 

  322. 				// 微信已停止开放该接口
    323. 

  323. 				// WeixinJSBridge.invoke("sendAppMessage", {
    324. 

  324. 				//     img_url:"./images/pic2.jpg",
    325. 

  325. 				//     img_width: "120",
    326. 

  326. 				//     img_height: "125",
    327. 

  327. 				//     link: "http://baidu.com",
    328. 

  328. 				//     desc: "这是描述",
    329. 

  329. 				//     title: "这是标题"
    330. 

  330. 				// }, function (res) {
    331. 

  331. 				//     alert(res.err_msg);
    332. 

  332. 				// });
    333. 

  333. 				document.querySelector('.share-guide').style.display = 'block';
    334. 

  334. 				pgvSendClick({hottag:'a20140515bandage.share.post'});
    335. 

  335. 			});
    336. 

  336. 

  337. 			document.querySelector('.share-guide').addEventListener('touchend', function(){
    338. 

  338. 				this.style.display = 'none';
    339. 

  339. 			});
    340. 

  340. 

  341. 

  342. 			document.querySelector('.icon-play').addEventListener('touchend', function(e){
    343. 

  343. 				pgvSendClick({hottag:'a20140515bandage.play'});
    344. 

  344. 				window.open('play.html');
    345. 

  345. 			});
    346. 

  346. 

  347. 			if(/adtag/i.test(window.location.search)) {
    348. 

  348. 				pgvSendClick({hottag:'a20140515bandage.share.view'});
    349. 

  349. 			}
    350. 

  350. 

  351. 

  352. 

  353. 		});
    354. 

  354. 

  355. 		
    356. 

  356. 

  357. 

  358. 

  359. 

  360. 		// disabled default events
    361. 

  361. 		document.documentElement.addEventListener('touchmove', function(e){
    362. 

  362. 			e.preventDefault();
    363. 

  363. 		});
    364. 

  364. 	</script>
    365. 

  365. 	<script>
    366. 

  366. 	descs = ['经鉴定为手残党，你敢不敢来试？', '我的手速被鄙视了，男人（妹子）不能这样！你呢？', '你绝对忍不住只玩一次！拼手速怎么可以输？', '风靡全球的抽绷带游戏，手残忍不住就是要点啊！', '我是全球手速最快的1%，不服来战！'];
    367. 

  367. 

  368. 	shareURL = 'http://hero.qq.com/act/a20140515bandage/?ADTAG=a20140515bandage.share.view';
    369. 

  369. 

  370. 	
    371. 

  371. 	// function onBridgeReady() {
    372. 

  372. 	//     WeixinJSBridge.invoke("getNetworkType", {}, function (res) {
    373. 

  373. 	//         pgvSendClick({hottag:'a20140515bandage.net.' + res.err_msg.substr(13)});
    374. 

  374. 	//     });	
    375. 

  375. 	//     //转发朋友圈
    376. 

  376. 	//     WeixinJSBridge.on("menu:share:timeline", function(e) {
    377. 

  377. 	//         var data = {
    378. 

  378. 	//             img_url: "./images/pic"+(level+1)+".jpg",
    379. 

  379. 	//             img_width: "150",
    380. 

  380. 	//             img_height: "150",
    381. 

  381. 	//             link: shareURL,
    382. 

  382. 	//             //desc这个属性要加上，虽然不会显示，但是不加暂时会导致无法转发至朋友圈，
    383. 

  383.  //                desc: '治愈系【全民打怪兽】',
    384. 

  384.  //                title: '我的手速打败了'+ (function(){var per = parseInt(score/12);return per > 99 ? 99 : per})()+'%的人！治愈系【全民打怪兽】'
    385. 

  385. 	//         };
    386. 

  386. 	//     WeixinJSBridge.invoke("shareTimeline", data, function(res) {
    387. 

  387. 	//         WeixinJSBridge.log(res.err_msg)
    388. 

  388. 	//     });
    389. 

  389. 	// });
    390. 

  390. 	//     //同步到微博
    391. 

  391. 	//     WeixinJSBridge.on("menu:share:weibo", function() {
    392. 

  392. 	//         WeixinJSBridge.invoke("shareWeibo", {
    393. 

  393. 	//            "content":  '我的手速打败了'+ (function(){var per = parseInt(score/12);return per > 99 ? 99 : per})()+'%的人！治愈系【全民打怪兽】',
    394. 

  394. 	//            "url": shareURL
    395. 

  395. 	//              }, function(res) {
    396. 

  396. 	//                  WeixinJSBridge.log(res.err_msg);
    397. 

  397. 	//             });
    398. 

  398. 	//     });
    399. 

  399. 	//     //分享给朋友
    400. 

  400. 	//     WeixinJSBridge.on('menu:share:appmessage', function(argv) {
    401. 

  401. 	//         WeixinJSBridge.invoke("sendAppMessage", {
    402. 

  402. 	//             img_url: "./images/pic"+(level+1)+".jpg",
    403. 

  403. 	//             img_width: "150",
    404. 

  404. 	//             img_height: "150",
    405. 

  405. 	//             link: shareURL,
    406. 

  406.  //                desc: '治愈系【全民打怪兽】',
    407. 

  407.  //                title: '我的手速打败了'+ (function(){var per = parseInt(score/12);return per > 99 ? 99 : per})()+'%的人！治愈系【全民打怪兽】'
    408. 

  408. 	//         }, function(res) {
    409. 

  409. 	//             WeixinJSBridge.log(res.err_msg)
    410. 

  410. 	//         });
    411. 

  411. 	//     });
    412. 

  412. 	// };
    413. 

  413. 	// document.addEventListener('WeixinJSBridgeReady', function() {
    414. 

  414. 	//     onBridgeReady();
    415. 

  415. 	// });
    416. 

  416. 	</script>
    417. 

  417. </body>
    418. 

  418. </html><!--[if !IE]>|xGv00|018dd7e82cc2f276430005bdb2ebd151<![endif]-->
    419.