|
@@ -0,0 +1,353 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
+
|
|
|
+ <!-- <meta name="viewport" content="width=640, user-scalable=no"> -->
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
+ <meta http-equiv="pragma" content="no-cache">
|
|
|
+ <meta http-equiv="Cache-Control" content="no-cache">
|
|
|
+ <meta http-equiv="Expires" content="0">
|
|
|
+ <meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
+ <meta name="format-detection" content="telephone=no">
|
|
|
+ <meta name="apple-mobile-web-app-title" content="">
|
|
|
+
|
|
|
+ <title>Document</title>
|
|
|
+ <link rel="stylesheet" type="text/css" href="css/reset.css" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="css/drop.css" />
|
|
|
+ <script src="js/jquery.min.js"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ function initScale() {
|
|
|
+ var iWidth = document.documentElement.getBoundingClientRect().width;
|
|
|
+ iWidth = iWidth > 750 ? 750 : iWidth;
|
|
|
+ document.getElementsByTagName("html")[0].style.fontSize = iWidth / 3.75 + "px";
|
|
|
+ }
|
|
|
+ window.onresize = function () {
|
|
|
+ initScale();
|
|
|
+ }
|
|
|
+ initScale();
|
|
|
+ </script>
|
|
|
+ <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ $(function () {
|
|
|
+ parent.cjNumber = 3;
|
|
|
+ window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
|
|
|
+ window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
|
|
|
+ var i = 0;
|
|
|
+ var x = 0; //小新出现的次数
|
|
|
+ var creatDrop = null;
|
|
|
+ var $bag = $("#bag"),
|
|
|
+ $bottomBox = $("#bottom-box"),
|
|
|
+ $dropWrap = $("#top"),
|
|
|
+ timer1 = null,
|
|
|
+ winWidth = window.innerWidth,
|
|
|
+ winHeight = window.innerHeight - 30,
|
|
|
+ topWidth = $("#top").width(),
|
|
|
+ scoreNum = $("#scoreNum"),
|
|
|
+ successBtn = $("#success"),
|
|
|
+ $mask = $('.model-mask');
|
|
|
+ var arr = ["<img class='drop' src='images/p1-tui1_03.png'/>",
|
|
|
+ "<img class='drop' src='images/p1-tui4_03.png'/>",
|
|
|
+ "<img class='drop' src='images/p1-tui4_03.png'/>",
|
|
|
+ "<img class='drop' src='images/p1-tui1_03.png'/>",
|
|
|
+ "<img class='drop' src='images/p1-tui4_03.png'/>",
|
|
|
+ "<img class='drop' src='images/p1-tui1_03.png'/>",
|
|
|
+ "<img class='drop person' src='images/p2-dropPerson_03.png'/>",
|
|
|
+ "images/perKon.png",
|
|
|
+ "images/perKon.png",
|
|
|
+ // "images/p2-rules_03.png",
|
|
|
+ "images/show.png",
|
|
|
+ "images/p2-winBtn_06.png",
|
|
|
+ "images/p2-winBtn_03.png"
|
|
|
+ ]
|
|
|
+ // $(".start-game").on('touchstart',function(){
|
|
|
+ // alert(1)
|
|
|
+
|
|
|
+ // });
|
|
|
+ $('#hideBg').on("touchstart", function () {
|
|
|
+ $('#hideBg').hide()
|
|
|
+ appendDrop();
|
|
|
+ requestAnimationFrame(dropAnimate);
|
|
|
+ countDown(20);
|
|
|
+ // $(".bottom").hide();
|
|
|
+ $("#bag").fadeIn(1000)
|
|
|
+ boxMove($bottomBox, $bag);
|
|
|
+ //倒计时
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ function countDown(time) {
|
|
|
+ var time = time;
|
|
|
+ var timeDown = null;
|
|
|
+ timeDown = setInterval(function () {
|
|
|
+ $(".time").html(time);
|
|
|
+ time--;
|
|
|
+ if (time < 0) {
|
|
|
+ time = 0;
|
|
|
+ clearInterval(timeDown);
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ // 生成下落物
|
|
|
+ function appendDrop() {
|
|
|
+ clearInterval(creatDrop);
|
|
|
+ var maxW = $("#top").width() - 30;
|
|
|
+ creatDrop = setInterval(function () {
|
|
|
+ var dl = parseInt(Math.random() * (maxW - 30 + 1) + 30, 10)
|
|
|
+ var i = parseInt(Math.random() * 7);
|
|
|
+ var str = arr[i];
|
|
|
+ $("#top").append(str);
|
|
|
+ $(".drop:last").css("left", dl);
|
|
|
+ }, 800);
|
|
|
+ }
|
|
|
+ //下落动画
|
|
|
+ function dropAnimate() {
|
|
|
+ var _score = parseInt(scoreNum.html());
|
|
|
+ $(".drop").each(function () {
|
|
|
+ var j = parseInt($(this).css('top') + Math.random() * 100)
|
|
|
+ j += 8;
|
|
|
+ $(this).css('top', j);
|
|
|
+ if (j > winHeight) {
|
|
|
+ $(this).remove();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ catchGold(_score); //接住下落物
|
|
|
+ if ($('.time').html() == 0) {
|
|
|
+ timeOver(_score)
|
|
|
+ } else {
|
|
|
+ requestAnimationFrame(dropAnimate);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //时间停止后
|
|
|
+ function timeOver(_score) {
|
|
|
+ window.cancelAnimationFrame(dropAnimate);
|
|
|
+ $('.drop').hide();
|
|
|
+ clearInterval(creatDrop);
|
|
|
+
|
|
|
+
|
|
|
+ // if (_score > 10) {
|
|
|
+ // parent.cjNumber = parseInt(_score / 10);
|
|
|
+ document.getElementById("showMusic").play()
|
|
|
+ document.getElementById("showMusic").muted = false
|
|
|
+ var strRule = '<div class="gameOver" id="hongbao" style="background-image: url(' + arr[9] +
|
|
|
+ ');"><p class="text"></p></div>';
|
|
|
+ $mask.show().append(strRule);
|
|
|
+ // // $(".model-mask .text").html('厉害了!你获得了' + _score + '个鸡翅分值,可以参与' + parent.cjNumber +
|
|
|
+ // // '次抽奖!')
|
|
|
+ // $(".text").on('click', function () {
|
|
|
+ // parent.swiper.slideNext();
|
|
|
+ // });
|
|
|
+ $('.text').on('touchstart', function (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ e.stopPropagation()
|
|
|
+ window.playableSDK.sendEvent('clickDownloadBar', {
|
|
|
+ section: 'section2',
|
|
|
+ area: 'area3'
|
|
|
+ });
|
|
|
+ window.playableSDK.openAppStore()
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ // $(".again").on('click', function () {
|
|
|
+ // location.reload();
|
|
|
+ // parent.cjNumber = 3;
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // var strRule = '<div class="gameOver" style="background-image: url(' + arr[9] +
|
|
|
+ // ');"><p class="text"></p><img class="again" src="' + arr[10] + '"/></div>';
|
|
|
+ // $mask.show().append(strRule);
|
|
|
+ // $(".model-mask .text").html('手残党,你只获得了' + _score + '个鸡翅分值,再玩一次?')
|
|
|
+ // $(".again").on('click', function () {
|
|
|
+ // location.reload();
|
|
|
+ // }).css('left', '1.07rem');
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function result() {
|
|
|
+ var strRule = '<div class="gameOver" style="background-image: url(' + arr[9] +
|
|
|
+ ');"><p class="text"></p><img class="again" src="' + arr[10] +
|
|
|
+ '"/><img class="goNext" src="' + arr[11] + '"/></div>';
|
|
|
+ $mask.show().append(strRule);
|
|
|
+ }
|
|
|
+ // 下方篮子的移动
|
|
|
+ function boxMove(bagwrap, bag) {
|
|
|
+ var maxLeft = $("#top").offset().left;
|
|
|
+ var maxRight = $("#top").width() + maxLeft;
|
|
|
+ bagwrap.on("touchstart", function (e) {
|
|
|
+ var touch = e.originalEvent.targetTouches[0];
|
|
|
+ bag.css("left", touch.pageX - 60);
|
|
|
+ if (touch.pageX < maxLeft + 60) {
|
|
|
+ bag.css("left", maxLeft);
|
|
|
+ }
|
|
|
+ if (touch.pageX > maxRight - 60) {
|
|
|
+ bag.css("left", maxRight - $("#bag").width());
|
|
|
+ };
|
|
|
+ return false;
|
|
|
+ })
|
|
|
+ bagwrap.on("touchmove", function (e) {
|
|
|
+ var touch = e.originalEvent.targetTouches[0];
|
|
|
+ bag.css("left", touch.pageX - 60);
|
|
|
+ if (touch.pageX < maxLeft + 60) {
|
|
|
+ bag.css("left", maxLeft);
|
|
|
+ }
|
|
|
+ if (touch.pageX > maxRight - 55) {
|
|
|
+ bag.css("left", maxRight - $("#bag").width());
|
|
|
+ };
|
|
|
+ return false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function catchGold(_score) {
|
|
|
+ if (_score == 1) {
|
|
|
+ $("#bag").find('img').attr('src', arr[7])
|
|
|
+ } else if (_score > 10) {
|
|
|
+ $("#bag").find('img').attr('src', arr[8])
|
|
|
+ }
|
|
|
+ $(".drop").each(function (i) {
|
|
|
+ var $this = $(this),
|
|
|
+ dropLeft = $this.offset().left, //金币左边距
|
|
|
+ dropRight = winWidth - dropLeft - $this.width(), //金币右边距
|
|
|
+ dropTop = $this.offset().top + $this.height(), //金币上边距
|
|
|
+ bagTop = $bag.offset().top + 40; //篮子上边距
|
|
|
+ bagLeft = $bag.offset().left + 20; //篮子左边距
|
|
|
+ bagRight = winWidth - bagLeft - $bag.width(); //篮子右边距
|
|
|
+ var l = Math.round(dropLeft - bagLeft),
|
|
|
+ r = Math.round(dropRight - bagRight),
|
|
|
+ t = Math.round(dropTop - bagTop)
|
|
|
+ if (l > 0 && r > 0 && t > 0) {
|
|
|
+ if ($(this).hasClass('person')) {
|
|
|
+ document.getElementById("ding").play()
|
|
|
+ document.getElementById("ding").muted = false
|
|
|
+ x++;
|
|
|
+ $this.remove();
|
|
|
+ _score += 5;
|
|
|
+ scoreNum.html(_score);
|
|
|
+ if (x == 3 || x > 3) {
|
|
|
+ arr[6] = "<img class='drop' src='images/p1-tui1_03.png'/>";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ document.getElementById("ding").play()
|
|
|
+ document.getElementById("ding").muted = false
|
|
|
+ $this.remove();
|
|
|
+ _score += 1;
|
|
|
+ scoreNum.html(_score);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // $(".model-yun").on('click', function () {
|
|
|
+ // var strRule = '<img class="rules" src="' + arr[9] + '">';
|
|
|
+ // $(".model-mask").show().addClass('ruleBg').append(strRule);
|
|
|
+ // })
|
|
|
+ // $(".model-mask").on('click', function (event) {
|
|
|
+ // var x = event.target;
|
|
|
+ // if (x.className == 'model-mask ruleBg') {
|
|
|
+ // $(this).html("").removeClass('ruleBg').hide();
|
|
|
+ // }
|
|
|
+
|
|
|
+ // })
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ <style>
|
|
|
+ .arrowLeft {
|
|
|
+ -webkit-animation: mymoveLeft 2s 0.5s ease-in-out infinite;
|
|
|
+ animation: mymoveLeft 2s 0.5s ease-in-out infinite;
|
|
|
+
|
|
|
+ -webkit-transform-origin: 50% 100%;
|
|
|
+ transform-origin: 50% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes mymoveLeft {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ transform: translateX(50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes mymoveLeft {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ transform: translateX(50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #hongbao {
|
|
|
+ -webkit-animation: arrowBig .5s ease;
|
|
|
+ animation: arrowBig .5s ease;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ -webkit-animation-iteration-count: 1;
|
|
|
+ -webkit-animation-fill-mode: forwards;
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes arrowBig {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: scale(0);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: scale(1);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes arrowBig {
|
|
|
+ 0% {
|
|
|
+ transform: scale(0);
|
|
|
+ opacity: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body style="height: 100%; position: relative;background-image: url(images/p2-bg.jpg); background-size: 100% 100%;">
|
|
|
+ <audio src="./images/ding.mp3" id="ding"></audio>
|
|
|
+ <audio src="./images/show.mp3" id="showMusic"></audio>
|
|
|
+ <div style="width:100%;height:100%;background:rgba(0,0,0,.5);position:relative;top:0;z-index:1" id="hideBg">
|
|
|
+ <img src="./images/shou.png" alt="" class="arrowLeft" style="position: absolute;
|
|
|
+ width: 100px;
|
|
|
+ left: 45%;
|
|
|
+ top: 70%;
|
|
|
+ margin-left: -50px;">
|
|
|
+ </div>
|
|
|
+ <div class="model-mask"></div>
|
|
|
+ <div class="top-time">
|
|
|
+ <span id="scoreNum">0</span>
|
|
|
+ <span class="time">20</span>
|
|
|
+ </div>
|
|
|
+ <div id="top" style="">
|
|
|
+ <!--生成鸡翅-->
|
|
|
+ </div>
|
|
|
+ <div id="bottom-box" style="position: absolute;bottom: 0.6rem;width: 99%;height: 50px;">
|
|
|
+ <div id="bag">
|
|
|
+ <img src="images/perKon.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|