123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353 |
- <!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>
|