Procházet zdrojové kódy

九宫格/接金币

zhuxinbo před 5 roky
rodič
revize
6fe385361e
40 změnil soubory, kde provedl 1634 přidání a 0 odebrání
  1. 3 0
      jiejinbi/gold/config.json
  2. 155 0
      jiejinbi/gold/css/drop.css
  3. 353 0
      jiejinbi/gold/css/reset.css
  4. binární
      jiejinbi/gold/images/ding.mp3
  5. binární
      jiejinbi/gold/images/p1-bg.jpg
  6. binární
      jiejinbi/gold/images/p1-tui1_03.png
  7. binární
      jiejinbi/gold/images/p1-tui4_03.png
  8. binární
      jiejinbi/gold/images/p2-bg.jpg
  9. binární
      jiejinbi/gold/images/p2-dropPerson_03.png
  10. binární
      jiejinbi/gold/images/p2-time_02.png
  11. binární
      jiejinbi/gold/images/perKon.png
  12. binární
      jiejinbi/gold/images/shou.png
  13. binární
      jiejinbi/gold/images/show.mp3
  14. binární
      jiejinbi/gold/images/show.png
  15. 353 0
      jiejinbi/gold/index.html
  16. 5 0
      jiejinbi/gold/js/jquery.min.js
  17. 1 0
      jiugongge/config.json
  18. 55 0
      jiugongge/css/index.css
  19. 353 0
      jiugongge/css/reset.css
  20. binární
      jiugongge/images/10.png
  21. binární
      jiugongge/images/100.png
  22. binární
      jiugongge/images/20.png
  23. binární
      jiugongge/images/30.png
  24. binární
      jiugongge/images/500.png
  25. binární
      jiugongge/images/bg.jpg
  26. binární
      jiugongge/images/bg9.png
  27. binární
      jiugongge/images/btn.png
  28. binární
      jiugongge/images/count.png
  29. binární
      jiugongge/images/hongbao.png
  30. binární
      jiugongge/images/qian.png
  31. binární
      jiugongge/images/share.png
  32. binární
      jiugongge/images/show.mp3
  33. binární
      jiugongge/images/start.png
  34. binární
      jiugongge/images/white.png
  35. binární
      jiugongge/images/xiexie.png
  36. binární
      jiugongge/images/zhuan.mp3
  37. 251 0
      jiugongge/index.html
  38. 83 0
      jiugongge/js/index.js
  39. 5 0
      jiugongge/js/jquery.min.js
  40. 17 0
      jiugongge/js/rem.js

+ 3 - 0
jiejinbi/gold/config.json

@@ -0,0 +1,3 @@
+{
+  "playable_orientation": 1
+}

+ 155 - 0
jiejinbi/gold/css/drop.css

@@ -0,0 +1,155 @@
+html,body{height: 100%;}
+.model-mask{
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,.5);
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 999;
+}
+.model-mask .rules{
+	width: 2.86rem;
+	height: 3rem;
+	position: absolute;
+	top: 1.57rem;
+	left: 0.42rem;
+}
+.model-mask .gameOver{
+	width: 3.2rem;
+    height: 3.2rem;
+    position: absolute;
+    top: 2rem;
+    left: 0.41rem;
+    background-size: 100% 100%;
+}
+.model-mask .again,
+.model-mask .goNext{
+	width: 1rem;
+	height: 0.4rem;
+	position: absolute;
+	top: 1.3rem;
+}
+.model-mask .text{
+    width: 2rem;
+    height: 0.5rem;
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0.6rem;
+    z-index: 100;
+}
+.model-mask .again{
+	left: 0.34rem;
+}
+.model-mask .goNext{
+	left: 1.81rem;
+}
+.score {
+	position: absolute;
+	top: 20px;
+	left: 20px;
+	background: #2B669A;
+	color: #000000;
+	font-size: 25px;
+	padding: 5px;
+}
+.top-time{
+	width: 2.27rem;
+	height: 0.92rem;
+	background-image: url(../images/p2-time_02.png);
+	background-size: 100% 100%;
+	position: absolute;
+	top: 0;
+	left: 0.72rem;
+	/*opacity: 0;*/
+}
+#scoreNum,.time{
+	position: absolute;
+	font-size: 0.2rem;
+	display: block;
+	width: 0.3rem;
+	text-align: center;
+	font-weight: bold;
+}
+#scoreNum{
+    left: 0.5rem;
+    top: 0.55rem;
+}
+.time{
+    left: 1.6rem;
+    top: 0.55rem;
+}
+.bottom{
+	/*opacity: 0;*/
+	width: 100%;
+	height: 3.02rem;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+}
+.model-person,
+.model-startBtn,
+.model-yun,
+.model-qiu{
+	background-size: 100% 100%;
+	position: absolute;
+}
+.model-person{
+	width: 1.21rem;
+	height: 1.37rem;
+	background-image: url(../images/p2-person_03.png);
+	bottom: 1.65rem;
+	left: 1.27rem;
+}
+.model-startBtn{
+	width: 1.62rem;
+	height:0.68rem;
+	background-image: url(../images/p2-btn_03.png);
+	bottom: 0.94rem;
+	left: 1.08rem;
+	z-index: 10;
+}
+.model-yun{
+	width: 100%;
+	height: 1.15rem;
+	background-image: url(../images/p2-rules_02.png);
+	bottom: 0;
+	left: 0;
+}
+.model-qiu{
+	width: 0.34rem;
+	height: 0.46rem;
+	background-image: url(../images/p2-qiu_03.png);
+	bottom: 1.01rem;
+	right: 0.43rem;
+	z-index: 10;
+}
+
+#bag{
+	width: 1.21rem;
+	height: 1.39rem;
+	position: absolute;
+	bottom: 0.05rem;
+	left: 33%;
+	display: none;
+}
+#top{
+	position: relative;
+	width:3.1rem;
+	margin: 0 auto;
+	height: 100%;
+	overflow: hidden;
+}
+#top .drop{
+	z-index: 99;
+	top:0.9rem;
+	position:absolute;
+	width: 70px;
+}
+#top .person{
+	width: 70px;
+}
+
+
+

+ 353 - 0
jiejinbi/gold/css/reset.css

@@ -0,0 +1,353 @@
+@charset "utf-8";
+/*
+ * 样式重置
+ */
+*,
+*::before,
+*::after{
+    box-sizing:border-box;
+}  
+html {
+	font-size: 100%;
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family:"微软雅黑","PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif;
+  font-size:14px;
+  color:#333;
+  word-break:break-all;
+}
+body::before{
+	content:'';
+	display: table;
+	height:0;
+	width:100%;
+}
+ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,hgroup,p,blockquote,figure,form,fieldset,input,legend,pre,abbr,button {
+	margin: 0;
+	padding: 0;
+}
+label,
+a,
+select,
+button,
+input {
+    -webkit-appearance:none;
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder,
+input::placeholder,
+textarea::placeholder{
+    color:#999;
+}
+button:focus,
+select:focus,
+input:focus,
+textarea:focus {
+    outline:0;
+}
+li {
+    list-style:none;
+}
+a {
+    color:inherit;
+    text-decoration:none;
+}
+table {
+    width:100%;
+    border-collapse:collapse;
+}
+td {
+    padding:0 0.4em;
+}
+img {
+	display:block;
+    max-width:100%;
+}
+small {
+	font-size:60%;
+}
+big {
+	font-size:120%;
+}
+strong,h1,h2,h3,h4 {
+	font-weight:400;
+}
+
+/*
+ * 修复页面效果不按照指定样式渲染的bug
+ */
+ div,
+ p,
+ a {
+    max-height:9999px;
+ }
+ /*超出出现省略号*/
+.ellipsis{
+    white-space:nowrap; 
+    overflow:hidden; 
+    text-overflow:ellipsis;
+}
+/*通用清除浮动*/
+.clearfix:before,.clearfix:after{
+    content:"";
+    display:table;
+    clear:both;
+}
+.clearfix{
+    *zoom:1;/*IE/7/6*/
+}
+/*
+ * layout(布局)
+ */
+.layout-container{
+	height:100%;
+	overflow-y: scroll;
+	-webkit-overflow-scrolling:touch;
+}
+.layout-boxs {
+	background-color:#fff;
+}
+.layout-boxs+.layout-boxs {
+	margin-top:.5rem;
+}
+.layout-boxs::before{
+	background-color:#d9d9d9;
+}
+.layout-box,
+.layout-tr-center,
+.layout-tr,
+.layout-tr-top {
+	display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+}
+.layout-box,
+.layout-tr-center,
+.layout-tr {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+.layout-box {
+	padding:15px;
+}
+.layout-tr-center {
+	-webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+.layout-tr.vertical {
+	-webkit-box-orient:vertical; 
+    -webkit-flex-direction:column;
+    flex-direction:column;
+}
+.layout-td {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+}
+
+/*动画*/
+.animated {
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
+	-webkit-animation-fill-mode: forwards;
+	animation-fill-mode: forwards;
+}
+@-webkit-keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: none;
+		transform: none
+	}
+}
+
+@keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		-ms-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: none;
+		-ms-transform: none;
+		transform: none
+	}
+}
+
+.fadeInDown {
+	-webkit-animation-name: fadeInDown;
+	animation-name: fadeInDown
+}
+
+@-webkit-keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: none;
+		transform: none
+	}
+}
+
+@keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		-ms-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: none;
+		-ms-transform: none;
+		transform: none
+	}
+}
+
+.fadeInUp {
+	-webkit-animation-name: fadeInUp;
+	animation-name: fadeInUp
+}
+
+@-webkit-keyframes shake {
+	0%,
+	80%,
+	90%,
+	100% {
+		-webkit-transform: translate3d(0, 0, 0);
+		-ms-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+	10%,
+	30%,
+	50%,
+	70%{
+		-webkit-transform: translate3d(-3px, 0, 0);
+		-ms-transform: translate3d(-3px, 0, 0);
+		transform: translate3d(-3px, 0, 0)
+	}
+	20%,
+	40%,
+	60%{
+		-webkit-transform: translate3d(3px, 0, 0);
+		-ms-transform: translate3d(3px, 0, 0);
+		transform: translate3d(3px, 0, 0)
+	}
+}
+
+@keyframes shake {
+	0%,
+	80%,
+	90%,
+	100% {
+		-webkit-transform: translate3d(0, 0, 0);
+		-ms-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+	10%,
+	30%,
+	50%,
+	70%{
+		-webkit-transform: translate3d(-3px, 0, 0);
+		-ms-transform: translate3d(-3px, 0, 0);
+		transform: translate3d(-3px, 0, 0)
+	}
+	20%,
+	40%,
+	60%{
+		-webkit-transform: translate3d(3px, 0, 0);
+		-ms-transform: translate3d(3px, 0, 0);
+		transform: translate3d(3px, 0, 0)
+	}
+}
+
+.shake {
+	-webkit-animation-name: shake;
+	animation-name: shake;
+	animation-iteration-count:infinite;
+	-webkit-animation-iteration-count:infinite;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+    opacity: 1;
+  }
+
+  to {
+  	opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slideInDown {
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+    opacity: 1;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.slideInDown {
+  animation-name: slideInDown;
+}
+.slideInLeft {
+  animation-name: slideInLeft;
+}
+@keyframes slideInUp {
+  from {
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+    opacity: 1;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.slideInUp {
+  animation-name: slideInUp;
+}
+@keyframes flash {
+  0%,
+  20%,
+  50%,
+  to{opacity: 1;}
+  
+  10%,
+  30%{opacity: 0;}
+}
+
+.flash {
+-webkit-animation-duration: 2s;
+animation-duration:2s;
+-webkit-animation-fill-mode: forwards;
+animation-fill-mode: forwards;
+animation-name: flash;
+animation-iteration-count:3;
+-webkit-animation-iteration-count:3;
+}

binární
jiejinbi/gold/images/ding.mp3


binární
jiejinbi/gold/images/p1-bg.jpg


binární
jiejinbi/gold/images/p1-tui1_03.png


binární
jiejinbi/gold/images/p1-tui4_03.png


binární
jiejinbi/gold/images/p2-bg.jpg


binární
jiejinbi/gold/images/p2-dropPerson_03.png


binární
jiejinbi/gold/images/p2-time_02.png


binární
jiejinbi/gold/images/perKon.png


binární
jiejinbi/gold/images/shou.png


binární
jiejinbi/gold/images/show.mp3


binární
jiejinbi/gold/images/show.png


+ 353 - 0
jiejinbi/gold/index.html

@@ -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>

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 5 - 0
jiejinbi/gold/js/jquery.min.js


+ 1 - 0
jiugongge/config.json

@@ -0,0 +1 @@
+{"playable_orientation":1,"playable_source":2}

+ 55 - 0
jiugongge/css/index.css

@@ -0,0 +1,55 @@
+* {
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none;
+}
+
+#header {
+    display: flex;
+    height: 44px;
+    background-color: #38b9e4;
+    color: white;
+    justify-content: center;
+    align-items: center;
+}
+
+#main {
+    display: flex;
+    justify-content: center;
+}
+
+#photoHeader {
+    width: 400px;
+}
+
+#photoBody {
+    display: flex;
+    justify-content: center;
+}
+
+
+
+
+#photoBodyMain ul li{
+    border: 1px solid transparent;
+    border-radius: 20px;
+    /* background-color: white; */
+
+}
+
+#photoBodyMain ul li img {
+    width:50%;
+    margin: 0.1rem auto;
+    display: block;
+    line-height: 1;
+}
+
+#photoFooter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#photoFooter img {
+    width: 400px;
+}

+ 353 - 0
jiugongge/css/reset.css

@@ -0,0 +1,353 @@
+@charset "utf-8";
+/*
+ * 样式重置
+ */
+*,
+*::before,
+*::after{
+    box-sizing:border-box;
+}  
+html {
+	font-size: 100%;
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family:"微软雅黑","PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif;
+  font-size:14px;
+  color:#333;
+  word-break:break-all;
+}
+body::before{
+	content:'';
+	display: table;
+	height:0;
+	width:100%;
+}
+ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,hgroup,p,blockquote,figure,form,fieldset,input,legend,pre,abbr,button {
+	margin: 0;
+	padding: 0;
+}
+label,
+a,
+select,
+button,
+input {
+    -webkit-appearance:none;
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder,
+input::placeholder,
+textarea::placeholder{
+    color:#999;
+}
+button:focus,
+select:focus,
+input:focus,
+textarea:focus {
+    outline:0;
+}
+li {
+    list-style:none;
+}
+a {
+    color:inherit;
+    text-decoration:none;
+}
+table {
+    width:100%;
+    border-collapse:collapse;
+}
+td {
+    padding:0 0.4em;
+}
+img {
+	display:block;
+    max-width:100%;
+}
+small {
+	font-size:60%;
+}
+big {
+	font-size:120%;
+}
+strong,h1,h2,h3,h4 {
+	font-weight:400;
+}
+
+/*
+ * 修复页面效果不按照指定样式渲染的bug
+ */
+ div,
+ p,
+ a {
+    max-height:9999px;
+ }
+ /*超出出现省略号*/
+.ellipsis{
+    white-space:nowrap; 
+    overflow:hidden; 
+    text-overflow:ellipsis;
+}
+/*通用清除浮动*/
+.clearfix:before,.clearfix:after{
+    content:"";
+    display:table;
+    clear:both;
+}
+.clearfix{
+    *zoom:1;/*IE/7/6*/
+}
+/*
+ * layout(布局)
+ */
+.layout-container{
+	height:100%;
+	overflow-y: scroll;
+	-webkit-overflow-scrolling:touch;
+}
+.layout-boxs {
+	background-color:#fff;
+}
+.layout-boxs+.layout-boxs {
+	margin-top:.5rem;
+}
+.layout-boxs::before{
+	background-color:#d9d9d9;
+}
+.layout-box,
+.layout-tr-center,
+.layout-tr,
+.layout-tr-top {
+	display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+}
+.layout-box,
+.layout-tr-center,
+.layout-tr {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+.layout-box {
+	padding:15px;
+}
+.layout-tr-center {
+	-webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+.layout-tr.vertical {
+	-webkit-box-orient:vertical; 
+    -webkit-flex-direction:column;
+    flex-direction:column;
+}
+.layout-td {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+}
+
+/*动画*/
+.animated {
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
+	-webkit-animation-fill-mode: forwards;
+	animation-fill-mode: forwards;
+}
+@-webkit-keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: none;
+		transform: none
+	}
+}
+
+@keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		-ms-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: none;
+		-ms-transform: none;
+		transform: none
+	}
+}
+
+.fadeInDown {
+	-webkit-animation-name: fadeInDown;
+	animation-name: fadeInDown
+}
+
+@-webkit-keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: none;
+		transform: none
+	}
+}
+
+@keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		-ms-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+	100% {
+		opacity: 1;
+		-webkit-transform: none;
+		-ms-transform: none;
+		transform: none
+	}
+}
+
+.fadeInUp {
+	-webkit-animation-name: fadeInUp;
+	animation-name: fadeInUp
+}
+
+@-webkit-keyframes shake {
+	0%,
+	80%,
+	90%,
+	100% {
+		-webkit-transform: translate3d(0, 0, 0);
+		-ms-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+	10%,
+	30%,
+	50%,
+	70%{
+		-webkit-transform: translate3d(-3px, 0, 0);
+		-ms-transform: translate3d(-3px, 0, 0);
+		transform: translate3d(-3px, 0, 0)
+	}
+	20%,
+	40%,
+	60%{
+		-webkit-transform: translate3d(3px, 0, 0);
+		-ms-transform: translate3d(3px, 0, 0);
+		transform: translate3d(3px, 0, 0)
+	}
+}
+
+@keyframes shake {
+	0%,
+	80%,
+	90%,
+	100% {
+		-webkit-transform: translate3d(0, 0, 0);
+		-ms-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+	10%,
+	30%,
+	50%,
+	70%{
+		-webkit-transform: translate3d(-3px, 0, 0);
+		-ms-transform: translate3d(-3px, 0, 0);
+		transform: translate3d(-3px, 0, 0)
+	}
+	20%,
+	40%,
+	60%{
+		-webkit-transform: translate3d(3px, 0, 0);
+		-ms-transform: translate3d(3px, 0, 0);
+		transform: translate3d(3px, 0, 0)
+	}
+}
+
+.shake {
+	-webkit-animation-name: shake;
+	animation-name: shake;
+	animation-iteration-count:infinite;
+	-webkit-animation-iteration-count:infinite;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+    opacity: 1;
+  }
+
+  to {
+  	opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slideInDown {
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+    opacity: 1;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.slideInDown {
+  animation-name: slideInDown;
+}
+.slideInLeft {
+  animation-name: slideInLeft;
+}
+@keyframes slideInUp {
+  from {
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+    opacity: 1;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.slideInUp {
+  animation-name: slideInUp;
+}
+@keyframes flash {
+  0%,
+  20%,
+  50%,
+  to{opacity: 1;}
+  
+  10%,
+  30%{opacity: 0;}
+}
+
+.flash {
+-webkit-animation-duration: 2s;
+animation-duration:2s;
+-webkit-animation-fill-mode: forwards;
+animation-fill-mode: forwards;
+animation-name: flash;
+animation-iteration-count:3;
+-webkit-animation-iteration-count:3;
+}

binární
jiugongge/images/10.png


binární
jiugongge/images/100.png


binární
jiugongge/images/20.png


binární
jiugongge/images/30.png


binární
jiugongge/images/500.png


binární
jiugongge/images/bg.jpg


binární
jiugongge/images/bg9.png


binární
jiugongge/images/btn.png


binární
jiugongge/images/count.png


binární
jiugongge/images/hongbao.png


binární
jiugongge/images/qian.png


binární
jiugongge/images/share.png


binární
jiugongge/images/show.mp3


binární
jiugongge/images/start.png


binární
jiugongge/images/white.png


binární
jiugongge/images/xiexie.png


binární
jiugongge/images/zhuan.mp3


+ 251 - 0
jiugongge/index.html

@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html style="font-size: 600px;">
+
+<head>
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <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>九宫格</title>
+    <style>
+        body {
+            margin: 0
+        }
+
+        #app {
+            margin: 50px auto;
+            width: 660px;
+            height: 450px
+        }
+
+        #app>div>span {
+            display: inline-block
+        }
+
+
+        body {
+            min-height: 100%;
+            width: 100%;
+            font-family: 'Microsoft YaHei', 'Myriad Set Pro', 'Lucida Grande', 'Hiragino Sans GB', 'Helvetica', 'Arial', 'sans-serif';
+            color: #333;
+            background: #fff;
+            -webkit-text-size-adjust: 100%;
+            -webkit-font-smoothing: antialiased;
+            -webkit-user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            tap-highlight-color: transparent;
+            font-size: 0.026rem;
+        }
+
+        .wrap-dialog {
+            -webkit-tap-highlight-color: transparent;
+            height: 100vh;
+            width: 100%;
+            background-color: #ebe6e0;
+            background-size: cover;
+            -webkit-transition: -webkit-transform 0.5s;
+            transition: -webkit-transform 0.5s;
+            transition: transform 0.5s;
+            transition: transform 0.5s, -webkit-transform 0.5s;
+        }
+
+        #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;
+            }
+        }
+
+        #btn {
+            animation: mymove 1s infinite;
+            -webkit-animation: mymove 1s infinite;
+            /*Safari and Chrome*/
+            animation-direction: alternate;
+            /*轮流反向播放动画。*/
+            animation-timing-function: ease-in-out;
+            /*动画的速度曲线*/
+            /* Safari 和 Chrome */
+            -webkit-animation: mymove 1s infinite;
+            -webkit-animation-direction: alternate;
+            /*轮流反向播放动画。*/
+            -webkit-animation-timing-function: ease-in-out;
+            /*动画的速度曲线*/
+
+        }
+
+        @keyframes mymove {
+            0% {
+                transform: scale(1);
+                /*开始为原始大小*/
+            }
+
+            25% {
+                transform: scale(1.2);
+                /*放大1.1倍*/
+            }
+
+            50% {
+                transform: scale(1);
+            }
+
+            75% {
+                transform: scale(1.2);
+            }
+
+        }
+
+        @-webkit-keyframes mymove {
+            0% {
+                transform: scale(1);
+                /*开始为原始大小*/
+            }
+
+            25% {
+                transform: scale(1.2);
+                /*放大1.1倍*/
+            }
+
+            50% {
+                transform: scale(1);
+            }
+
+            75% {
+                transform: scale(1.2);
+            }
+        }
+
+        li {
+            float: left;
+            /* border: 1px solid white; */
+            border-radius: 20px;
+            /* background-color: red; */
+            margin-top: 0 !important;
+            height: 0.75rem !important;
+            width: 0.75rem !important;
+            background-image: url(./images/white.png);
+        }
+
+        .back {
+            background-image: url(./images/share.png);
+            background-size: 100%;
+        }
+    </style>
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <div class="wrap-dialog" style="background:url(./images/bg.jpg);background-size: cover;position: relative">
+        <div id="photoBody" style="width: 3rem;height: 3rem;
+        position: relative;
+        top: 2.5rem;
+        left: 0.3rem;">
+            <img src="./images/count.png" alt="" style="width: 100%;height:auto">
+            <div id="photoBodyBorder" style="position: absolute;width:80%;height:80%;top:10%">
+                <div id="photoBodyMain" style="width:100%;height:100%;">
+                    <!-- <img src="./images/bg9.png" style="width: 100%;" alt=""> -->
+                    <ul style="position: absolute;top:0">
+                        <li class=" gift gift1" style="margin-bottom: 0.04rem;">
+                            <img src="./images/10.png" alt="">
+                        </li>
+                        <li class=" gift gift2" style="margin: 0 0.04rem 0.04rem;">
+                            <img src="./images/100.png" alt="">
+                        </li>
+                        <li class=" gift gift3" style="margin-bottom: 0.04rem;">
+                            <img src="./images/20.png" alt="">
+                        </li>
+                        <li class=" gift gift0" style="margin-bottom: 0.04rem;">
+                            <img src="./images/xiexie.png" alt="">
+                        </li>
+                        <li class="" id="choujiang"
+                            style="margin: 0 0.04rem 0.04rem;background-image: url(./images/start.png);background-size: 100%;">
+                            <!-- <img src="./images/start.png" alt=""> -->
+                        </li>
+                        <li class=" gift gift4" style="margin-bottom: 0.04rem;">
+                            <img src="./images/30.png" alt="">
+                        </li>
+                        <li class=" gift gift7">
+                            <img src="./images/500.png" alt="">
+                        </li>
+                        <li class=" gift gift6" style="margin: 0 0.04rem 0.04rem;">
+                            <img src="./images/xiexie.png" alt="">
+                        </li>
+                        <li class=" gift gift5">
+                            <img src="./images/20.png" alt="">
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div id="hongbao" style="display:none;top: 2.5rem;
+            position: absolute;">
+            <img src="./images/hongbao.png" style="width:3rem;position: absolute;left:0.3rem;z-index: 10" alt="">
+            <img src="./images/qian.png" style="    width: 1rem;
+                position: absolute;
+                left: 1.3rem;
+                top:1.65rem;
+                z-index: 10;" alt="">
+            <img src="./images/btn.png" id="btn" style="width: 1.6rem;
+                position: absolute;
+                left: 1.05rem;
+                top: 2.2rem;
+                z-index: 10;" alt="">
+        </div>
+
+        <audio src="./images/zhuan.mp3" id="mediaId"></audio>
+        <audio src="./images/show.mp3" id="mediaShow"></audio>
+    </div>
+
+    <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
+    <script type="text/javascript" src="js/jquery.min.js"></script>
+    <script src="./js/rem.js"></script>
+    <script src="./js/index.js"></script>
+    <script type="text/javascript">
+        $('#btn').on('touchstart', function (e) {
+            e.preventDefault()
+            e.stopPropagation()
+            window.playableSDK.sendEvent('clickDownloadBar', {
+                section: 'section2',
+                area: 'area3'
+            });
+            window.playableSDK.openAppStore()
+
+
+        })
+    </script>
+</body>
+
+</html>

+ 83 - 0
jiugongge/js/index.js

@@ -0,0 +1,83 @@
+$(function (event) {
+    var x = document.getElementById("mediaId");
+    var x2 = document.getElementById("mediaShow");
+
+    function play() {
+        x.play();
+        x.muted = false
+    }
+
+    x2.pause();
+    x2.muted = true
+
+    function playShow() {
+        x.pause();
+        x.muted = true
+        x2.play();
+        x2.muted = false
+    }
+    var stopStep = 1;
+    var runT = null;
+    var step = -1;
+    var during = 2;
+    $("#choujiang").click(function (event) {
+        play()
+        stopStep = 5
+        runT = setTimeout(runF, 100);
+    });
+
+    function choice(number) {
+        if (number == 1) {
+            alert("香水");
+        }
+        if (number == 2) {
+            alert("帽子");
+        }
+        if (number == 3) {
+            alert("再接再厉哟");
+        }
+        if (number == 4) {
+            alert("华为p20");
+        }
+        if (number == 5) {
+            $('#photoBody').hide()
+            $('#hongbao').show()
+            playShow()
+            // alert("5元话费");
+        }
+        if (number == 6) {
+            alert("剃须刀");
+        }
+        if (number == 7) {
+            alert("明日再战");
+        }
+        if (number == 8) {
+            alert("短柄伞");
+        }
+    }
+
+    function runF() {
+        if (step >= (32 + stopStep)) {
+            $(".gift" + (step % 8)).addClass("back");
+            step = stopStep;
+            choice(step);
+            clearTimeout(runT);
+            
+            return;
+        }
+        if (step >= (24 + stopStep)) {
+            during += 1;
+        } else {
+            if (during <= 2) {
+                during = 2;
+            }
+            during--;
+        }
+        step++;
+        $(".gift").each(function (index, element) {
+            $(this).removeClass("back");
+        });
+        $(".gift" + (step % 8)).addClass("back");
+        runT = setTimeout(runF, during * 50);
+    }
+});

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 5 - 0
jiugongge/js/jquery.min.js


+ 17 - 0
jiugongge/js/rem.js

@@ -0,0 +1,17 @@
+(function(doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function() {
+            var clientWidth = docEl.clientWidth;
+            if(!clientWidth) return;
+            //          docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            if(clientWidth >= 600) {
+                docEl.style.fontSize = '350px';
+            } else {
+                docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            }
+        };
+    if(!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);