index.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <!-- <meta name="viewport" content="width=640, user-scalable=no"> -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  8. <meta http-equiv="pragma" content="no-cache">
  9. <meta http-equiv="Cache-Control" content="no-cache">
  10. <meta http-equiv="Expires" content="0">
  11. <meta name="apple-mobile-web-app-capable" content="yes">
  12. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  13. <meta name="format-detection" content="telephone=no">
  14. <meta name="apple-mobile-web-app-title" content="">
  15. <title>Document</title>
  16. <link rel="stylesheet" type="text/css" href="css/reset.css" />
  17. <link rel="stylesheet" type="text/css" href="css/drop.css" />
  18. <script src="js/jquery.min.js"></script>
  19. <script type="text/javascript">
  20. function initScale() {
  21. var iWidth = document.documentElement.getBoundingClientRect().width;
  22. iWidth = iWidth > 750 ? 750 : iWidth;
  23. document.getElementsByTagName("html")[0].style.fontSize = iWidth / 3.75 + "px";
  24. }
  25. window.onresize = function () {
  26. initScale();
  27. }
  28. initScale();
  29. </script>
  30. <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
  31. <script type="text/javascript">
  32. $(function () {
  33. parent.cjNumber = 3;
  34. window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
  35. window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  36. var i = 0;
  37. var x = 0; //小新出现的次数
  38. var creatDrop = null;
  39. var $bag = $("#bag"),
  40. $bottomBox = $("#bottom-box"),
  41. $dropWrap = $("#top"),
  42. timer1 = null,
  43. winWidth = window.innerWidth,
  44. winHeight = window.innerHeight - 30,
  45. topWidth = $("#top").width(),
  46. scoreNum = $("#scoreNum"),
  47. successBtn = $("#success"),
  48. $mask = $('.model-mask');
  49. var arr = ["<img class='drop' src='images/p1-tui1_03.png'/>",
  50. "<img class='drop' src='images/p1-tui4_03.png'/>",
  51. "<img class='drop' src='images/p1-tui4_03.png'/>",
  52. "<img class='drop' src='images/p1-tui1_03.png'/>",
  53. "<img class='drop' src='images/p1-tui4_03.png'/>",
  54. "<img class='drop' src='images/p1-tui1_03.png'/>",
  55. "<img class='drop person' src='images/p2-dropPerson_03.png'/>",
  56. "images/perKon.png",
  57. "images/perKon.png",
  58. // "images/p2-rules_03.png",
  59. "images/show.png",
  60. "images/p2-winBtn_06.png",
  61. "images/p2-winBtn_03.png"
  62. ]
  63. // $(".start-game").on('touchstart',function(){
  64. // alert(1)
  65. // });
  66. $('#hideBg').on("touchstart", function () {
  67. $('#hideBg').hide()
  68. appendDrop();
  69. requestAnimationFrame(dropAnimate);
  70. countDown(20);
  71. // $(".bottom").hide();
  72. $("#bag").fadeIn(1000)
  73. boxMove($bottomBox, $bag);
  74. //倒计时
  75. })
  76. function countDown(time) {
  77. var time = time;
  78. var timeDown = null;
  79. timeDown = setInterval(function () {
  80. $(".time").html(time);
  81. time--;
  82. if (time < 0) {
  83. time = 0;
  84. clearInterval(timeDown);
  85. }
  86. }, 1000)
  87. }
  88. // 生成下落物
  89. function appendDrop() {
  90. clearInterval(creatDrop);
  91. var maxW = $("#top").width() - 30;
  92. creatDrop = setInterval(function () {
  93. var dl = parseInt(Math.random() * (maxW - 30 + 1) + 30, 10)
  94. var i = parseInt(Math.random() * 7);
  95. var str = arr[i];
  96. $("#top").append(str);
  97. $(".drop:last").css("left", dl);
  98. }, 800);
  99. }
  100. //下落动画
  101. function dropAnimate() {
  102. var _score = parseInt(scoreNum.html());
  103. $(".drop").each(function () {
  104. var j = parseInt($(this).css('top') + Math.random() * 100)
  105. j += 8;
  106. $(this).css('top', j);
  107. if (j > winHeight) {
  108. $(this).remove();
  109. }
  110. })
  111. catchGold(_score); //接住下落物
  112. if ($('.time').html() == 0) {
  113. timeOver(_score)
  114. } else {
  115. requestAnimationFrame(dropAnimate);
  116. }
  117. };
  118. //时间停止后
  119. function timeOver(_score) {
  120. window.cancelAnimationFrame(dropAnimate);
  121. $('.drop').hide();
  122. clearInterval(creatDrop);
  123. // if (_score > 10) {
  124. // parent.cjNumber = parseInt(_score / 10);
  125. document.getElementById("showMusic").play()
  126. document.getElementById("showMusic").muted = false
  127. var strRule = '<div class="gameOver" id="hongbao" style="background-image: url(' + arr[9] +
  128. ');"><p class="text"></p></div>';
  129. $mask.show().append(strRule);
  130. // // $(".model-mask .text").html('厉害了!你获得了' + _score + '个鸡翅分值,可以参与' + parent.cjNumber +
  131. // // '次抽奖!')
  132. // $(".text").on('click', function () {
  133. // parent.swiper.slideNext();
  134. // });
  135. $('.text').on('touchstart', function (e) {
  136. e.preventDefault()
  137. e.stopPropagation()
  138. window.playableSDK.sendEvent('clickDownloadBar', {
  139. section: 'section2',
  140. area: 'area3'
  141. });
  142. window.playableSDK.openAppStore()
  143. })
  144. // $(".again").on('click', function () {
  145. // location.reload();
  146. // parent.cjNumber = 3;
  147. // });
  148. // } else {
  149. // var strRule = '<div class="gameOver" style="background-image: url(' + arr[9] +
  150. // ');"><p class="text"></p><img class="again" src="' + arr[10] + '"/></div>';
  151. // $mask.show().append(strRule);
  152. // $(".model-mask .text").html('手残党,你只获得了' + _score + '个鸡翅分值,再玩一次?')
  153. // $(".again").on('click', function () {
  154. // location.reload();
  155. // }).css('left', '1.07rem');
  156. // }
  157. }
  158. function result() {
  159. var strRule = '<div class="gameOver" style="background-image: url(' + arr[9] +
  160. ');"><p class="text"></p><img class="again" src="' + arr[10] +
  161. '"/><img class="goNext" src="' + arr[11] + '"/></div>';
  162. $mask.show().append(strRule);
  163. }
  164. // 下方篮子的移动
  165. function boxMove(bagwrap, bag) {
  166. var maxLeft = $("#top").offset().left;
  167. var maxRight = $("#top").width() + maxLeft;
  168. bagwrap.on("touchstart", function (e) {
  169. var touch = e.originalEvent.targetTouches[0];
  170. bag.css("left", touch.pageX - 60);
  171. if (touch.pageX < maxLeft + 60) {
  172. bag.css("left", maxLeft);
  173. }
  174. if (touch.pageX > maxRight - 60) {
  175. bag.css("left", maxRight - $("#bag").width());
  176. };
  177. return false;
  178. })
  179. bagwrap.on("touchmove", function (e) {
  180. var touch = e.originalEvent.targetTouches[0];
  181. bag.css("left", touch.pageX - 60);
  182. if (touch.pageX < maxLeft + 60) {
  183. bag.css("left", maxLeft);
  184. }
  185. if (touch.pageX > maxRight - 55) {
  186. bag.css("left", maxRight - $("#bag").width());
  187. };
  188. return false;
  189. })
  190. }
  191. function catchGold(_score) {
  192. if (_score == 1) {
  193. $("#bag").find('img').attr('src', arr[7])
  194. } else if (_score > 10) {
  195. $("#bag").find('img').attr('src', arr[8])
  196. }
  197. $(".drop").each(function (i) {
  198. var $this = $(this),
  199. dropLeft = $this.offset().left, //金币左边距
  200. dropRight = winWidth - dropLeft - $this.width(), //金币右边距
  201. dropTop = $this.offset().top + $this.height(), //金币上边距
  202. bagTop = $bag.offset().top + 40; //篮子上边距
  203. bagLeft = $bag.offset().left + 20; //篮子左边距
  204. bagRight = winWidth - bagLeft - $bag.width(); //篮子右边距
  205. var l = Math.round(dropLeft - bagLeft),
  206. r = Math.round(dropRight - bagRight),
  207. t = Math.round(dropTop - bagTop)
  208. if (l > 0 && r > 0 && t > 0) {
  209. if ($(this).hasClass('person')) {
  210. document.getElementById("ding").play()
  211. document.getElementById("ding").muted = false
  212. x++;
  213. $this.remove();
  214. _score += 5;
  215. scoreNum.html(_score);
  216. if (x == 3 || x > 3) {
  217. arr[6] = "<img class='drop' src='images/p1-tui1_03.png'/>";
  218. }
  219. } else {
  220. document.getElementById("ding").play()
  221. document.getElementById("ding").muted = false
  222. $this.remove();
  223. _score += 1;
  224. scoreNum.html(_score);
  225. }
  226. }
  227. })
  228. }
  229. // $(".model-yun").on('click', function () {
  230. // var strRule = '<img class="rules" src="' + arr[9] + '">';
  231. // $(".model-mask").show().addClass('ruleBg').append(strRule);
  232. // })
  233. // $(".model-mask").on('click', function (event) {
  234. // var x = event.target;
  235. // if (x.className == 'model-mask ruleBg') {
  236. // $(this).html("").removeClass('ruleBg').hide();
  237. // }
  238. // })
  239. })
  240. </script>
  241. <style>
  242. .arrowLeft {
  243. -webkit-animation: mymoveLeft 2s 0.5s ease-in-out infinite;
  244. animation: mymoveLeft 2s 0.5s ease-in-out infinite;
  245. -webkit-transform-origin: 50% 100%;
  246. transform-origin: 50% 100%;
  247. }
  248. @keyframes mymoveLeft {
  249. 0% {
  250. transform: translateX(-50%);
  251. }
  252. 50% {
  253. transform: translateX(50%);
  254. }
  255. 100% {
  256. transform: translateX(-50%);
  257. }
  258. }
  259. @-webkit-keyframes mymoveLeft {
  260. 0% {
  261. transform: translateX(-50%);
  262. }
  263. 50% {
  264. transform: translateX(50%);
  265. }
  266. 100% {
  267. transform: translateX(-50%);
  268. }
  269. }
  270. #hongbao {
  271. -webkit-animation: arrowBig .5s ease;
  272. animation: arrowBig .5s ease;
  273. animation-iteration-count: 1;
  274. animation-fill-mode: forwards;
  275. -webkit-animation-iteration-count: 1;
  276. -webkit-animation-fill-mode: forwards;
  277. }
  278. @-webkit-keyframes arrowBig {
  279. 0% {
  280. -webkit-transform: scale(0);
  281. opacity: 0;
  282. }
  283. 100% {
  284. -webkit-transform: scale(1);
  285. opacity: 1;
  286. }
  287. }
  288. @keyframes arrowBig {
  289. 0% {
  290. transform: scale(0);
  291. opacity: 0;
  292. }
  293. 100% {
  294. transform: scale(1);
  295. opacity: 1;
  296. }
  297. }
  298. </style>
  299. </head>
  300. <body style="height: 100%; position: relative;background-image: url(images/p2-bg.jpg); background-size: 100% 100%;">
  301. <audio src="./images/ding.mp3" id="ding"></audio>
  302. <audio src="./images/show.mp3" id="showMusic"></audio>
  303. <div style="width:100%;height:100%;background:rgba(0,0,0,.5);position:relative;top:0;z-index:1" id="hideBg">
  304. <img src="./images/shou.png" alt="" class="arrowLeft" style="position: absolute;
  305. width: 100px;
  306. left: 45%;
  307. top: 70%;
  308. margin-left: -50px;">
  309. </div>
  310. <div class="model-mask"></div>
  311. <div class="top-time">
  312. <span id="scoreNum">0</span>
  313. <span class="time">20</span>
  314. </div>
  315. <div id="top" style="">
  316. <!--生成鸡翅-->
  317. </div>
  318. <div id="bottom-box" style="position: absolute;bottom: 0.6rem;width: 99%;height: 50px;">
  319. <div id="bag">
  320. <img src="images/perKon.png" />
  321. </div>
  322. </div>
  323. </body>
  324. </html>