Merge branch 'master' of http://47.100.37.243:10080/wutt/game

minigame/WebContent/index.html

@@ -198,13 +198,18 @@
         document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
 			// 发送给好友
 			WeixinJSBridge.on('menu:share:appmessage', function(argv){
+			    console.log(argv)
 				alert('发送给好友')
-				window.location.href = url
+				//window.location.href = url
 			});
 			// 分享到朋友圈
 			WeixinJSBridge.on('menu:share:timeline', function(argv){
 				alert('分享到朋友圈')
-			}); 
+			});
+            // 分享到微博
+            WeixinJSBridge.on('menu:share:weibo', function(argv){
+                alert('分享到微博')
+            });
 		}, false);
 		
 		// 判断微博分享

minigame/WebContent/static/css/lottery.css

@@ -2,6 +2,12 @@
     margin: 0;
     padding: 0;
 }
+.check_result{
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	color: black;
+}
 .background {
     width: 100%;
     height: auto;
@@ -11,7 +17,6 @@
     width: 84%;
     height: auto;
     left: 7%;
-    top: 250px;
 }
 .container {
     display: flex;
@@ -35,6 +40,7 @@
     font-size: 20px;
     font-weight: 700;
     position: absolute;
+    left: 0;
 }
 .tips{
     color: #470C82;

minigame/WebContent/static/css/main.css

@@ -288,6 +288,12 @@ input {
   top: 0;
   left: 0; }
 
+.poster-mode .qrcode-box p {
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+     text-overflow: ellipsis;
+  white-space: nowrap; }
+
 * {
   margin: 0;
   padding: 0;
@@ -324,6 +330,267 @@ img {
 .bold {
   font-weight: bold; }
 
+.js-an {
+  display: none !important;
+  -webkit-animation-name: none !important;
+     -moz-animation-name: none !important;
+       -o-animation-name: none !important;
+          animation-name: none !important; }
+
+.animated {
+  -webkit-animation-duration: .6s;
+     -moz-animation-duration: .6s;
+       -o-animation-duration: .6s;
+          animation-duration: .6s;
+  -webkit-transform: translate3d(0, 0, 0);
+     -moz-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0); }
+
+.origin-tc {
+  -webkit-transform-origin: top center;
+     -moz-transform-origin: top center;
+      -ms-transform-origin: top center;
+       -o-transform-origin: top center;
+          transform-origin: top center; }
+
+.origin-rb {
+  -webkit-transform-origin: right bottom;
+     -moz-transform-origin: right bottom;
+      -ms-transform-origin: right bottom;
+       -o-transform-origin: right bottom;
+          transform-origin: right bottom; }
+
+.origin-lb {
+  -webkit-transform-origin: left center;
+     -moz-transform-origin: left center;
+      -ms-transform-origin: left center;
+       -o-transform-origin: left center;
+          transform-origin: left center; }
+
+.origin-cb {
+  -webkit-transform-origin: center bottom;
+     -moz-transform-origin: center bottom;
+      -ms-transform-origin: center bottom;
+       -o-transform-origin: center bottom;
+          transform-origin: center bottom; }
+
+.origin-cc {
+  -webkit-transform-origin: center center;
+     -moz-transform-origin: center center;
+      -ms-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center; }
+
+.iteration {
+  -webkit-animation-iteration-count: infinite;
+     -moz-animation-iteration-count: infinite;
+       -o-animation-iteration-count: infinite;
+          animation-iteration-count: infinite; }
+
+.ease-in {
+  -webkit-animation-timing-function: ease-in;
+     -moz-animation-timing-function: ease-in;
+       -o-animation-timing-function: ease-in;
+          animation-timing-function: ease-in; }
+
+.ease-out {
+  -webkit-animation-timing-function: ease-out;
+     -moz-animation-timing-function: ease-out;
+       -o-animation-timing-function: ease-out;
+          animation-timing-function: ease-out; }
+
+.delay0 {
+  -webkit-animation-delay: 0s;
+     -moz-animation-delay: 0s;
+       -o-animation-delay: 0s;
+          animation-delay: 0s; }
+
+.delay1 {
+  -webkit-animation-delay: 0.2s;
+     -moz-animation-delay: 0.2s;
+       -o-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+
+.delay2 {
+  -webkit-animation-delay: 0.4s;
+     -moz-animation-delay: 0.4s;
+       -o-animation-delay: 0.4s;
+          animation-delay: 0.4s; }
+
+.delay3 {
+  -webkit-animation-delay: 0.6s;
+     -moz-animation-delay: 0.6s;
+       -o-animation-delay: 0.6s;
+          animation-delay: 0.6s; }
+
+.delay4 {
+  -webkit-animation-delay: 0.8s;
+     -moz-animation-delay: 0.8s;
+       -o-animation-delay: 0.8s;
+          animation-delay: 0.8s; }
+
+.delay5 {
+  -webkit-animation-delay: 1s;
+     -moz-animation-delay: 1s;
+       -o-animation-delay: 1s;
+          animation-delay: 1s; }
+
+.delay6 {
+  -webkit-animation-delay: 1.2s;
+     -moz-animation-delay: 1.2s;
+       -o-animation-delay: 1.2s;
+          animation-delay: 1.2s; }
+
+.delay7 {
+  -webkit-animation-delay: 1.4s;
+     -moz-animation-delay: 1.4s;
+       -o-animation-delay: 1.4s;
+          animation-delay: 1.4s; }
+
+.delay8 {
+  -webkit-animation-delay: 1.6s;
+     -moz-animation-delay: 1.6s;
+       -o-animation-delay: 1.6s;
+          animation-delay: 1.6s; }
+
+.delay9 {
+  -webkit-animation-delay: 1.8s;
+     -moz-animation-delay: 1.8s;
+       -o-animation-delay: 1.8s;
+          animation-delay: 1.8s; }
+
+.delay10 {
+  -webkit-animation-delay: 2s;
+     -moz-animation-delay: 2s;
+       -o-animation-delay: 2s;
+          animation-delay: 2s; }
+
+.delay11 {
+  -webkit-animation-delay: 2.2s;
+     -moz-animation-delay: 2.2s;
+       -o-animation-delay: 2.2s;
+          animation-delay: 2.2s; }
+
+.delay12 {
+  -webkit-animation-delay: 2.4s;
+     -moz-animation-delay: 2.4s;
+       -o-animation-delay: 2.4s;
+          animation-delay: 2.4s; }
+
+.delay13 {
+  -webkit-animation-delay: 2.6s;
+     -moz-animation-delay: 2.6s;
+       -o-animation-delay: 2.6s;
+          animation-delay: 2.6s; }
+
+.delay14 {
+  -webkit-animation-delay: 2.8s;
+     -moz-animation-delay: 2.8s;
+       -o-animation-delay: 2.8s;
+          animation-delay: 2.8s; }
+
+.delay15 {
+  -webkit-animation-delay: 3s;
+     -moz-animation-delay: 3s;
+       -o-animation-delay: 3s;
+          animation-delay: 3s; }
+
+.time0 {
+  -webkit-animation-duration: 0s;
+     -moz-animation-duration: 0s;
+       -o-animation-duration: 0s;
+          animation-duration: 0s; }
+
+.time1 {
+  -webkit-animation-duration: 0.2s;
+     -moz-animation-duration: 0.2s;
+       -o-animation-duration: 0.2s;
+          animation-duration: 0.2s; }
+
+.time2 {
+  -webkit-animation-duration: 0.4s;
+     -moz-animation-duration: 0.4s;
+       -o-animation-duration: 0.4s;
+          animation-duration: 0.4s; }
+
+.time3 {
+  -webkit-animation-duration: 0.6s;
+     -moz-animation-duration: 0.6s;
+       -o-animation-duration: 0.6s;
+          animation-duration: 0.6s; }
+
+.time4 {
+  -webkit-animation-duration: 0.8s;
+     -moz-animation-duration: 0.8s;
+       -o-animation-duration: 0.8s;
+          animation-duration: 0.8s; }
+
+.time5 {
+  -webkit-animation-duration: 1s;
+     -moz-animation-duration: 1s;
+       -o-animation-duration: 1s;
+          animation-duration: 1s; }
+
+.time6 {
+  -webkit-animation-duration: 1.2s;
+     -moz-animation-duration: 1.2s;
+       -o-animation-duration: 1.2s;
+          animation-duration: 1.2s; }
+
+.time7 {
+  -webkit-animation-duration: 1.4s;
+     -moz-animation-duration: 1.4s;
+       -o-animation-duration: 1.4s;
+          animation-duration: 1.4s; }
+
+.time8 {
+  -webkit-animation-duration: 1.6s;
+     -moz-animation-duration: 1.6s;
+       -o-animation-duration: 1.6s;
+          animation-duration: 1.6s; }
+
+.time9 {
+  -webkit-animation-duration: 1.8s;
+     -moz-animation-duration: 1.8s;
+       -o-animation-duration: 1.8s;
+          animation-duration: 1.8s; }
+
+.time10 {
+  -webkit-animation-duration: 2s;
+     -moz-animation-duration: 2s;
+       -o-animation-duration: 2s;
+          animation-duration: 2s; }
+
+.time11 {
+  -webkit-animation-duration: 2.2s;
+     -moz-animation-duration: 2.2s;
+       -o-animation-duration: 2.2s;
+          animation-duration: 2.2s; }
+
+.time12 {
+  -webkit-animation-duration: 2.4s;
+     -moz-animation-duration: 2.4s;
+       -o-animation-duration: 2.4s;
+          animation-duration: 2.4s; }
+
+.time13 {
+  -webkit-animation-duration: 2.6s;
+     -moz-animation-duration: 2.6s;
+       -o-animation-duration: 2.6s;
+          animation-duration: 2.6s; }
+
+.time14 {
+  -webkit-animation-duration: 2.8s;
+     -moz-animation-duration: 2.8s;
+       -o-animation-duration: 2.8s;
+          animation-duration: 2.8s; }
+
+.time15 {
+  -webkit-animation-duration: 3s;
+     -moz-animation-duration: 3s;
+       -o-animation-duration: 3s;
+          animation-duration: 3s; }
+
 .clearfix:after {
   content: ".";
   display: block;
@@ -331,6 +598,24 @@ img {
   clear: both;
   visibility: hidden; }
 
+.secret-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: url(../img/loading/bg.jpg) no-repeat 0 0/cover;
+  display: none;
+  z-index: 1001; }
+  .secret-box img {
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+       -moz-transform: translate(0, -50%);
+        -ms-transform: translate(0, -50%);
+         -o-transform: translate(0, -50%);
+            transform: translate(0, -50%); }
+
 .warp {
   width: 10rem;
   margin: 0 auto;
@@ -438,6 +723,104 @@ img {
   z-index: 1;
   display: none; }
 
+.poster-mode {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  width: 10rem;
+  height: 100vh;
+  margin-left: -5rem;
+  z-index: 100;
+  background: #000;
+  display: none; }
+  .poster-mode.poster-bg1 {
+    background: url(../img/poster/bg1.jpg) no-repeat top center/cover; }
+  .poster-mode.poster-bg2 {
+    background: url(../img/poster/bg2.jpg) no-repeat top center/cover; }
+  .poster-mode.poster-bg3 {
+    background: url(../img/poster/bg3.jpg) no-repeat top center/cover; }
+  .poster-mode .logo {
+    position: absolute;
+    top: 0.3125rem;
+    left: 0.46875rem;
+    width: 1.5625rem; }
+  .poster-mode .poster-img {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 8.26562rem;
+    margin-left: -4.13281rem; }
+  .poster-mode .leads-box {
+    position: absolute;
+    top: 1.65625rem;
+    left: 50%;
+    width: 9.15625rem;
+    height: 3.57812rem;
+    margin-left: -4.57812rem;
+    background: url(../img/leads_bg.png) no-repeat top center/100% auto;
+    padding-top: 0.46875rem;
+    padding-left: 2.65625rem;
+    padding-right: 1.875rem; }
+    .poster-mode .leads-box .form-group {
+      border-bottom: 1px solid #c19e83; }
+      .poster-mode .leads-box .form-group input {
+        width: 100%;
+        height: 0.78125rem;
+        font-size: 0.375rem;
+        font-size: 20x;
+        color: #c19e83;
+        background: transparent; }
+    .poster-mode .leads-box .user-info {
+      position: absolute;
+      right: 0.3125rem;
+      top: 50%;
+      -webkit-transform: translate(0, -50%);
+         -moz-transform: translate(0, -50%);
+          -ms-transform: translate(0, -50%);
+           -o-transform: translate(0, -50%);
+              transform: translate(0, -50%); }
+      .poster-mode .leads-box .user-info .headimg-box {
+        width: 1.25rem; }
+      .poster-mode .leads-box .user-info p {
+        font-size: 0.3125rem;
+        color: #743d2f;
+        margin-top: 0.15625rem; }
+    .poster-mode .leads-box .submit {
+      position: absolute;
+      bottom: -0.15625rem;
+      left: 50%;
+      width: 3.04688rem;
+      margin-left: -1.52344rem; }
+    .poster-mode .leads-box .pro {
+      position: absolute;
+      top: 50%;
+      left: 0.46875rem;
+      width: 1.82812rem;
+      -webkit-transform: translate(0, -50%);
+         -moz-transform: translate(0, -50%);
+          -ms-transform: translate(0, -50%);
+           -o-transform: translate(0, -50%);
+              transform: translate(0, -50%); }
+  .poster-mode .qrcode-box {
+    position: absolute;
+    bottom: 1.92188rem;
+    right: 0.46875rem;
+    width: 1.40625rem; }
+    .poster-mode .qrcode-box p {
+      font-size: 0.21875rem;
+      color: #fff;
+      text-align: center; }
+  .poster-mode .replay-btn {
+    position: absolute;
+    bottom: 0.70312rem;
+    left: 1.48438rem;
+    width: 2.8125rem; }
+  .poster-mode .secret-btn {
+    position: absolute;
+    bottom: 0.70312rem;
+    right: 1.48438rem;
+    width: 2.8125rem; }
+
 .shake-mode {
   position: fixed;
   top: 0;
@@ -540,3 +923,73 @@ img {
     opacity: 1; }
   50% {
     opacity: 0.7; } }
+
+.anim-btn {
+  -webkit-animation: btn 1s ease infinite;
+     -moz-animation: btn 1s ease infinite;
+       -o-animation: btn 1s ease infinite;
+          animation: btn 1s ease infinite; }
+
+@-webkit-keyframes btn {
+  0%, 100% {
+    -webkit-transform: scale(1, 1);
+            transform: scale(1, 1); }
+  15% {
+    -webkit-transform: scale(1.1, 1.1);
+            transform: scale(1.1, 1.1); }
+  20% {
+    -webkit-transform: scale(1.1, 1.1);
+            transform: scale(1.1, 1.1); }
+  35% {
+    -webkit-transform: scale(1.2, 1.2);
+            transform: scale(1.2, 1.2); } }
+
+@-moz-keyframes btn {
+  0%, 100% {
+    -moz-transform: scale(1, 1);
+         transform: scale(1, 1); }
+  15% {
+    -moz-transform: scale(1.1, 1.1);
+         transform: scale(1.1, 1.1); }
+  20% {
+    -moz-transform: scale(1.1, 1.1);
+         transform: scale(1.1, 1.1); }
+  35% {
+    -moz-transform: scale(1.2, 1.2);
+         transform: scale(1.2, 1.2); } }
+
+@-o-keyframes btn {
+  0%, 100% {
+    -o-transform: scale(1, 1);
+       transform: scale(1, 1); }
+  15% {
+    -o-transform: scale(1.1, 1.1);
+       transform: scale(1.1, 1.1); }
+  20% {
+    -o-transform: scale(1.1, 1.1);
+       transform: scale(1.1, 1.1); }
+  35% {
+    -o-transform: scale(1.2, 1.2);
+       transform: scale(1.2, 1.2); } }
+
+@keyframes btn {
+  0%, 100% {
+    -webkit-transform: scale(1, 1);
+       -moz-transform: scale(1, 1);
+         -o-transform: scale(1, 1);
+            transform: scale(1, 1); }
+  15% {
+    -webkit-transform: scale(1.1, 1.1);
+       -moz-transform: scale(1.1, 1.1);
+         -o-transform: scale(1.1, 1.1);
+            transform: scale(1.1, 1.1); }
+  20% {
+    -webkit-transform: scale(1.1, 1.1);
+       -moz-transform: scale(1.1, 1.1);
+         -o-transform: scale(1.1, 1.1);
+            transform: scale(1.1, 1.1); }
+  35% {
+    -webkit-transform: scale(1.2, 1.2);
+       -moz-transform: scale(1.2, 1.2);
+         -o-transform: scale(1.2, 1.2);
+            transform: scale(1.2, 1.2); } }

minigame/WebContent/static/index.html

@@ -14,13 +14,14 @@
     <meta name="format-detection" content="email=no" />
     <title>首页</title>
     <script src="./js/flexiable.js"></script>
+    <link rel="stylesheet" type="text/css" href="./css/animate.min.css?v=1">
     <link rel="stylesheet" type="text/css" href="./css/main.css?v=1">
   </head>
 <body onload="init()">
     <!-- loading -->
     <div class="loading">
         <div class="curtain-box">
-            <div class="txt">
+            <div class="txt rubberBand time6 iteration">
                 <img src="./img/loading/loading_txt.png">
             </div>
             <div class="loading-bar">
@@ -37,29 +38,67 @@
     <div class="warp">
         <!-- 选择菜 -->
         <div class="select-dish-box">
-            <img src="./img/menu_tt.png" class="tt">
+            <img src="./img/menu_tt.png" class="tt fadeIn time4 animated js-an">
             <div class="list">
-                <div class="item">
+                <div class="item bounceIn time3 animated js-an delay3">
                     <img src="./img/menu1.png">
                 </div>
-                <div class="item">
+                <div class="item bounceIn time3 animated js-an delay4">
                     <img src="./img/menu2.png">
                 </div>
-                <div class="item">
+                <div class="item bounceIn time3 animated js-an delay5">
                     <img src="./img/menu3.png">
                 </div>
-                <div class="item">
+                <div class="item bounceIn time3 animated js-an delay6">
                     <img src="./img/menu4.png">
                 </div>
             </div>
-            <div class="confirm"></div>
+            <div class="confirm anim-btn"></div>
         </div>
         <!-- 游戏 -->
         <div class="game-box">
             <canvas id="canvas" width="640" height="1040"></canvas>
         </div>
     </div>
+    <!-- 海报 -->
+    <div class="poster-mode">
+        <img src="./img/logo.png" class="logo">
+        <img src="./img/poster/hsr.png" class="poster-img" id="poster">
+        <div class="leads-box">
+            <img src="./img/leads_pro.png" class="pro">
+            <div class="form-group">
+                <input type="text" placeholder="我想把这道菜送给TA">
+            </div>
+            <div class="form-group">
+                <input type="text" placeholder="我想对TA说">
+            </div>
+            <div class="user-info">
+                <div class="headimg-box">
+                    <img src="./img/headimg.png">
+                </div>
+                <p>微信昵称</p>
+            </div>
+            <div class="submit">
+                <img src="./img/share_btn.png">
+            </div>
+        </div>
+        <div class="qrcode-box">
+            <img src="./img/poster/qrcode.jpg">
+            <p>扫码为他做菜</p>
+        </div>
+        <div class="replay-btn">
+            <img src="./img/replay_btn.png">
+        </div>
+        <div class="secret-btn">
+            <img src="./img/secret_btn.png">
+        </div>
+    </div>
+
+    <div class="secret-box">
+        <img src="./img/poster/secret1.png" id="secret">
+    </div>
 
+    <!-- 摇一摇提示 -->
     <div class="shake-mode">
         <div class="shake-dialog">
             <!-- <img src="./img/shake_fire.png"> -->

minigame/WebContent/static/js/main.js

@@ -43,9 +43,12 @@ function handleComplete(evt, comp) {
         ss[ssMetadata[i].name] = new createjs.SpriteSheet({ "images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames })
     }
     var exportRoot = new lib.assets();
-    $(".loading").fadeOut();
+    $(".loading").fadeOut(function(){
+        $(".select-dish-box").find(".animated").removeClass("js-an");
+    });
 
 
+    var dishIndex = 0;
     $(".select-dish-box .item").on("click", function() {
         $(this).addClass("active").siblings().removeClass("active");
         $(".select-dish-box .confirm").show();
@@ -55,51 +58,106 @@ function handleComplete(evt, comp) {
             alert("请选择你要做的菜")
             return false;
         }
+        dishIndex = $(".select-dish-box .item.active").index();
         $(".select-dish-box").hide();
         $(".game-box").show();
+
+        // 判断是哪个菜
+        if(dishIndex == 0){
+            exportRoot.plate.hsr_icon1.alpha = 1;
+            exportRoot.plate.hsr_icon2.alpha = 1;
+            exportRoot.plate.hsr_icon3.alpha = 1;
+            exportRoot.plate.hsr_icon4.alpha = 1;
+            cutDishArr = hsr_iconArr;
+        }else if(dishIndex == 1){
+            exportRoot.plate.qcdf_icon1.alpha = 1;
+            exportRoot.plate.qcdf_icon2.alpha = 1;
+            exportRoot.plate.qcdf_icon3.alpha = 1;
+            exportRoot.plate.qcdf_icon4.alpha = 1;
+            exportRoot.plate.qcdf_icon5.alpha = 1;
+            cutDishArr = qcdf_iconArr;
+        }else if(dishIndex == 2){
+            exportRoot.plate.swy_icon1.alpha = 1;
+            exportRoot.plate.swy_icon2.alpha = 1;
+            cutDishArr = swy_iconArr;
+        }else{
+            exportRoot.plate.ymc_icon1.alpha = 1;
+            exportRoot.plate.ymc_icon2.alpha = 1;
+            exportRoot.plate.ymc_icon3.alpha = 1;
+            exportRoot.plate.ymc_icon4.alpha = 1;
+            cutDishArr = ymc_iconArr;
+        }
+    })
+    $(".replay-btn").on("click",function(){
+        location.reload() 
+    })
+    $(".secret-btn").on("click",function(){
+        $(".secret-box").fadeIn();
+    })
+    $(".secret-box").on("click",function(){
+        $(".secret-box").fadeOut();
     })
 
 
     function ballAnim(dom) {
         var anim = new TimelineMax({ repeat: -1 });
-        anim.to(dom, 0.15, { rotation: "-=15", ease: Power0.easeIn });
-        anim.to(dom, 0.3, { rotation: "+=30", ease: Power0.easeIn });
-        anim.to(dom, 0.3, { rotation: "-=30", ease: Power0.easeIn });
-        anim.to(dom, 0.3, { rotation: "+=30", ease: Power0.easeIn });
-        anim.to(dom, 0.15, { rotation: "-=15", ease: Power0.easeIn });
+        anim.to(dom, 0.15, { rotation: "-=15", ease: Power0.easeIn })
+        .to(dom, 0.3, { rotation: "+=30", ease: Power0.easeIn })
+        .to(dom, 0.3, { rotation: "-=30", ease: Power0.easeIn })
+        .to(dom, 0.3, { rotation: "+=30", ease: Power0.easeIn })
+        .to(dom, 0.15, { rotation: "-=15", ease: Power0.easeIn });
         return anim;
     }
 
     function materialAnim(dom, x, y, callback) {
         var anim = new TimelineMax({ onComplete: callback });
         anim.to(dom, 0.5, { x: "+=" + x, y: "+=" + y, ease: Power0.easeIn })
-        anim.to(dom, 0.3, { rotation: "-=25", ease: Power0.easeIn });
-        anim.to(dom, 0.3, { rotation: "+=25", ease: Power0.easeIn });
-        anim.to(dom, 0.3, { rotation: "-=25", ease: Power0.easeIn });
-        anim.to(dom, 0.3, { rotation: "+=25", ease: Power0.easeIn });
+        .to(dom, 0.3, { rotation: "-=25", ease: Power0.easeIn })
+        .to(dom, 0.3, { rotation: "+=25", ease: Power0.easeIn })
+        .to(dom, 0.3, { rotation: "-=25", ease: Power0.easeIn })
+        .to(dom, 0.3, { rotation: "+=25", ease: Power0.easeIn });
         return anim;
     }
 
+    function oilAnim(){
+        if(dishIndex != 2){
+            var dom = exportRoot.pot.oil;
+        }else{
+            var dom = exportRoot.bowl.oil;
+        }
+        var anim = new TimelineMax({ delay:0.8});
+        anim.to(dom, 0.4, { alpha: 1, ease: Power0.easeIn })
+        .to(dom, 1, { scale: 1, ease: Power0.easeIn })
+        return anim;
+    }
     function bowlAnim(callback) {
-        var anim = new TimelineMax({ onComplete: callback, delay: 1 });
+        var anim = new TimelineMax({ onComplete: callback, delay: 0.3 });
         anim.to(exportRoot.plate, 0.5, { y: "-=370", ease: Power0.easeIn })
-        anim.to(exportRoot.bowl, 0.5, { alpha: 1, ease: Power0.easeIn });
+        .to(exportRoot.bowl, 0.5, { alpha: 1, ease: Power0.easeIn });
         return anim;
     }
 
     function proAnim(callback) {
         var anim = new TimelineMax({ onComplete: callback, delay: 0.5 });
-        anim.to(exportRoot.pro, 0.6, { rotation: "-=25", ease: Power0.easeIn })
-        anim.to(exportRoot.pro, 1, {})
-        anim.to(exportRoot.pro, 0.3, { alpha: 0, ease: Power0.easeIn })
-        anim.to(exportRoot.pro, 1, {})
+        anim.to(exportRoot.pro.proImg, 0.5, { rotation: "-=25", ease: Power0.easeIn })
+        .to(exportRoot.pro.oil_icon1, 0.3, {alpha:1})
+        .to(exportRoot.pro.oil_icon2, 0.2, {alpha:1})
+        .to(exportRoot.pro.proImg, 1, {})
+        .to(exportRoot.pro, 0.3, { alpha: 0, ease: Power0.easeIn })
+        .to(exportRoot.pro, 1, {})
+        return anim;
+    }
+    function oilIconAnim() {
+        oilAnim();
+        var anim = new TimelineMax({ repeat:10,delay:1});
+        anim.to(exportRoot.pro.oil_icon2, 0.3, {y:"+=100",alpha:0})
         return anim;
     }
 
     function btnAnim(dom){
         var anim = new TimelineMax({ repeat:-1 });
         anim.to(dom, 0.3, { scale: "+=0.1", ease: Power0.easeIn })
-        anim.to(dom, 0.3, { scale: "-=0.1", ease: Power0.easeIn })
+        .to(dom, 0.3, { scale: "-=0.1", ease: Power0.easeIn })
         return anim;
     }
     function fadeInAnim(dom){
@@ -108,7 +166,56 @@ function handleComplete(evt, comp) {
         return anim;
     }
 
+    function materialEnterAnim(dom,delay){
+        dom.scale = 0.1;
+        delay = delay || 0.1;
+        var anim = new TimelineMax({ delay:delay});
+        anim.to(dom,1.2, { scale: 1, ease: Elastic.easeOut.config(1, 0.3) })
+        return anim;
+    }
 
+    var cutDishArr = [];
+    // 油麦菜
+    var ymc_iconArr = [
+        {
+            x: exportRoot.plate.x + exportRoot.plate.ymc_icon1.x,
+            y: exportRoot.plate.y + exportRoot.plate.ymc_icon1.y,
+            width: 266,
+            height: 187,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.ymc_icon2.x,
+            y: exportRoot.plate.y + exportRoot.plate.ymc_icon2.y,
+            width: 103,
+            height: 118,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.ymc_icon3.x,
+            y: exportRoot.plate.y + exportRoot.plate.ymc_icon3.y,
+            width: 371,
+            height: 144,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.ymc_icon4.x,
+            y: exportRoot.plate.y + exportRoot.plate.ymc_icon4.y,
+            width: 86,
+            height: 75,
+            isClear: false
+        }
+    ]
+    // 三文鱼
+    var swy_iconArr = [
+        {
+            x: exportRoot.plate.x + exportRoot.plate.hsr_icon1.x,
+            y: exportRoot.plate.y + exportRoot.plate.hsr_icon1.y,
+            width: 262,
+            height: 195,
+            isClear: false
+        }
+    ]
     // 红烧肉的位置
     var hsr_iconArr = [{
             x: exportRoot.plate.x + exportRoot.plate.hsr_icon1.x,
@@ -139,6 +246,43 @@ function handleComplete(evt, comp) {
             isClear: false
         }
     ];
+    // 青菜豆腐的位置
+    var qcdf_iconArr = [{
+            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon1.x,
+            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon1.y,
+            width: 169,
+            height: 320,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon2.x,
+            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon2.y,
+            width: 207,
+            height: 144,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon3.x,
+            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon3.y,
+            width: 103,
+            height: 118,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon4.x,
+            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon4.y,
+            width: 371,
+            height: 144,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon5.x,
+            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon5.y,
+            width: 86,
+            height: 75,
+            isClear: false
+        }
+    ]
 
 
     // 画线
@@ -158,13 +302,20 @@ function handleComplete(evt, comp) {
                 var x = lineArr[i].x;
                 var y = lineArr[i].y;
                 lineShape.graphics.lineTo(x, y);
-                for (var p = 0; p < hsr_iconArr.length; p++) {
-                    if (x-hsr_iconArr[p].width/3 > hsr_iconArr[p].x && x < (hsr_iconArr[p].x + hsr_iconArr[p].width)) {
-                        if (y-hsr_iconArr[p].height/3 > hsr_iconArr[p].y && y < (hsr_iconArr[p].y + hsr_iconArr[p].height)) {
-                            if (hsr_iconArr[p].isClear == false) {
-                                exportRoot.plate['hsr_icon' + (p + 1)].gotoAndStop(1);
-                                hsr_iconArr[p].isClear = true;
-                                playbowlAnim();
+                for (var p = 0; p < cutDishArr.length; p++) {
+                    if (x-cutDishArr[p].width/3 > cutDishArr[p].x && x < (cutDishArr[p].x + cutDishArr[p].width)) {
+                        if (y-cutDishArr[p].height/3 > cutDishArr[p].y && y < (cutDishArr[p].y + cutDishArr[p].height)) {
+                            if (cutDishArr[p].isClear == false) {
+                                cutDishArr[p].isClear = true;
+                                if(dishIndex == 0){
+                                    exportRoot.plate['hsr_icon' + (p + 1)].gotoAndStop(1);
+                                }else if(dishIndex == 1){
+                                    exportRoot.plate['qcdf_icon' + (p + 1)].gotoAndStop(1);
+                                }else if(dishIndex == 2){
+                                    exportRoot.plate.swy_icon1.gotoAndStop(1);
+                                }else{
+                                    exportRoot.plate['ymc_icon' + (p + 1)].gotoAndStop(1);
+                                }
                             }
                         }
                     }
@@ -195,11 +346,13 @@ function handleComplete(evt, comp) {
         lineArr.push(obj);
     })
     exportRoot.addEventListener("pressup", function(event) {
-
+        playbowlAnim();
     })
 
+
+    var dishMoveIndex = 0;
     // 移动菜品
-    function dishMove(dom) {
+    function dishMove(dom,x,y) {
         var startX = 0;
         var startY = 0;
         var domFirst = $.extend(true, {}, dom);
@@ -215,13 +368,37 @@ function handleComplete(evt, comp) {
         })
         dom.addEventListener("pressup", function(event) {
             if (dom.x + exportRoot.plate.x > 80 && dom.y + exportRoot.plate.y > 518) {
-                dom.x = 190 - exportRoot.plate.x;
-                dom.y = 630 - exportRoot.plate.y;
+                dom.x = 190 - exportRoot.plate.x + x;
+                dom.y = 630 - exportRoot.plate.y + y;
                 dom.removeAllEventListeners();
-                if (exportRoot.plate.hsr_icon1.y == exportRoot.plate.hsr_icon2.y && exportRoot.plate.hsr_icon1.y == exportRoot.plate.hsr_icon3.y && exportRoot.plate.hsr_icon1.y == exportRoot.plate.hsr_icon4.y) {
+
+                if(dishIndex == 0){
+                    ++dishMoveIndex;
+                    if (dishMoveIndex >= 4) {
+                        exportRoot.btn1.alpha = 1;
+                        btnAnim(exportRoot.btn1);
+                        isAllInplate();
+                    }
+                }else if(dishIndex == 1){
+                    ++dishMoveIndex;
+                    if (dishMoveIndex >= 5) {
+                        exportRoot.btn1.alpha = 1;
+                        btnAnim(exportRoot.btn1);
+                        isAllInplate();
+                    }
+                }else if(dishIndex == 2){
                     exportRoot.btn1.alpha = 1;
+                    btnAnim(exportRoot.btn1);
                     isAllInplate();
+                }else{
+                    ++dishMoveIndex;
+                    if (dishMoveIndex >= 4) {
+                        exportRoot.btn1.alpha = 1;
+                        btnAnim(exportRoot.btn1);
+                        isAllInplate();
+                    }
                 }
+                
             } else {
                 dom.x = domFirst.x;
                 dom.y = domFirst.y;
@@ -236,21 +413,36 @@ function handleComplete(evt, comp) {
         exportRoot.btn1.addEventListener("mousedown", function() {
             exportRoot.btn1.removeAllEventListeners();
             exportRoot.btn1.alpha = 0;
-            exportRoot.plate.alpha = 0;
-            exportRoot.bowl.alpha = 0;
-            exportRoot.pot.alpha = 1;
             exportRoot.pro.alpha = 1;
+            if(dishIndex != 2){
+                exportRoot.bowl.alpha = 0;
+                exportRoot.plate.alpha = 0;
+                exportRoot.pot.alpha = 1;
+            }else{
+                exportRoot.plate.instance.alpha = 0;
+                exportRoot.plate.swy_icon2.alpha = 0;
+            }
+
+            oilIconAnim();
             proAnim(function() {
-                exportRoot.pot.hsr.stop();
-                fadeInAnim(exportRoot.pot.hsr);
                 exportRoot.btn2.alpha = 1;
                 btnAnim(exportRoot.btn2);
+                if(dishIndex == 0){
+                    fadeInAnim(exportRoot.pot.hsr);
+                }else if(dishIndex == 1){
+                    fadeInAnim(exportRoot.pot.qcdf);
+                }else if(dishIndex == 3){
+                    fadeInAnim(exportRoot.pot.ymc);
+                }
             });
         })
         exportRoot.btn2.addEventListener("mousedown", function() {
             exportRoot.btn2.removeAllEventListeners();
             exportRoot.btn2.alpha = 0;
             fadeInAnim(exportRoot.blackboard);
+            materialEnterAnim(exportRoot.blackboard.material1,0.2);
+            materialEnterAnim(exportRoot.blackboard.material2,0.4);
+            materialEnterAnim(exportRoot.blackboard.material3,0.6);
             exportRoot.ball1.alpha = 1;
 
             ballAnim(exportRoot.ball1);
@@ -258,6 +450,9 @@ function handleComplete(evt, comp) {
 
         exportRoot.blackboard.material1.addEventListener("mousedown", function() {
             exportRoot.blackboard.material1.removeAllEventListeners();
+            exportRoot.blackboard.material2.removeAllEventListeners();
+            exportRoot.blackboard.material3.removeAllEventListeners();
+            $(".poster-mode").addClass("poster-bg3");
             materialAnim(exportRoot.blackboard.material1, 300, 180, function() {
                 exportRoot.blackboard.material1.x -=300;
                 exportRoot.blackboard.material1.y -=180;
@@ -266,7 +461,10 @@ function handleComplete(evt, comp) {
             });
         })
         exportRoot.blackboard.material2.addEventListener("mousedown", function() {
+            exportRoot.blackboard.material1.removeAllEventListeners();
             exportRoot.blackboard.material2.removeAllEventListeners();
+            exportRoot.blackboard.material3.removeAllEventListeners();
+            $(".poster-mode").addClass("poster-bg2");
             materialAnim(exportRoot.blackboard.material2, 120, 180, function() {
                 exportRoot.blackboard.material2.x -=120;
                 exportRoot.blackboard.material2.y -=180;
@@ -275,9 +473,12 @@ function handleComplete(evt, comp) {
             });
         })
         exportRoot.blackboard.material3.addEventListener("mousedown", function() {
+            exportRoot.blackboard.material1.removeAllEventListeners();
+            exportRoot.blackboard.material2.removeAllEventListeners();
             exportRoot.blackboard.material3.removeAllEventListeners();
+            $(".poster-mode").addClass("poster-bg1");
             materialAnim(exportRoot.blackboard.material3, -30, 180, function() {
-                exportRoot.blackboard.material3.x -=30;
+                exportRoot.blackboard.material3.x +=30;
                 exportRoot.blackboard.material3.y -=180;
                 $(".shake-mode").show();
                 shakeInit();
@@ -287,8 +488,8 @@ function handleComplete(evt, comp) {
 
     // 菜切完盘子上移动
     function playbowlAnim() {
-        for (var i = 0; i < hsr_iconArr.length; i++) {
-            if (hsr_iconArr[i].isClear == false) {
+        for (var i = 0; i < cutDishArr.length; i++) {
+            if (cutDishArr[i].isClear == false) {
                 return false;
             }
         }
@@ -298,10 +499,26 @@ function handleComplete(evt, comp) {
 
 
         bowlAnim(function() {
-            dishMove(exportRoot.plate.hsr_icon1);
-            dishMove(exportRoot.plate.hsr_icon2);
-            dishMove(exportRoot.plate.hsr_icon3);
-            dishMove(exportRoot.plate.hsr_icon4);
+            if(dishIndex == 0){
+                dishMove(exportRoot.plate.hsr_icon1,0,0);
+                dishMove(exportRoot.plate.hsr_icon2,0,0);
+                dishMove(exportRoot.plate.hsr_icon3,0,0);
+                dishMove(exportRoot.plate.hsr_icon4,0,0);
+            }else if(dishIndex == 1){
+                dishMove(exportRoot.plate.qcdf_icon1,0,-80);
+                dishMove(exportRoot.plate.qcdf_icon2,0,0);
+                dishMove(exportRoot.plate.qcdf_icon3,0,0);
+                dishMove(exportRoot.plate.qcdf_icon4,0,0);
+                dishMove(exportRoot.plate.qcdf_icon5,0,0);
+            }else if(dishIndex == 2){
+                dishMove(exportRoot.plate.swy_icon1,120,100);
+            }else{
+                dishMove(exportRoot.plate.ymc_icon1,0,0);
+                dishMove(exportRoot.plate.ymc_icon2,0,0);
+                dishMove(exportRoot.plate.ymc_icon3,0,0);
+                dishMove(exportRoot.plate.ymc_icon4,0,0);
+            }
+            
         });
     }
 
@@ -317,9 +534,26 @@ function handleComplete(evt, comp) {
 
         setTimeout(function(){
             window.removeEventListener('devicemotion', deviceMotionHandler, false);
-            $(".shake-mode").hide();
             exportRoot.pot.hsr.play();
             exportRoot.btn3.alpha = 1;
+            btnAnim(exportRoot.btn3);
+            exportRoot.btn3.addEventListener("mousedown",function(){
+                exportRoot.btn3.removeAllEventListeners();
+                $(".poster-mode").fadeIn();
+            })
+
+
+            if(dishIndex == 0){
+                exportRoot.pot.hsr.gotoAndStop(1);
+            }else if(dishIndex == 1){
+                exportRoot.pot.qcdf.gotoAndStop(1);
+            }else if(dishIndex == 2){
+                exportRoot.bowl.oil.alpha = 0;
+                exportRoot.plate['swy_icon1'].gotoAndStop(2);
+            }else{
+                exportRoot.pot.ymc.gotoAndStop(1);
+            }
+            $(".shake-mode").fadeOut();
         },3000)
         //获取加速度信息
         //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。

minigame/WebContent/static/lottery.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="width: 100%">
 
 <head>
     <meta charset="UTF-8">
@@ -15,13 +15,13 @@
         var threshold = 0;
         var speed = 1;
         var enable = true;
+        var src = null;
         $(function () {
             //进入和窗口缩放时重新设置内容位置
             setPosition();
             $(window).resize(function () {
                 setPosition();
             });
-            
             //在这里查看是否有id
             if(id == null){
             	alert("请先登录");
@@ -40,38 +40,50 @@
 				}
 			});
             
+            //点击
+            $(".check_result").click(function(){
+            	window.location.href = "result.html";
+            })
+            
             //点击抽奖
             $(".button").click(function () {
                 if(enable == true){
-//                 	获取抽奖结果
+					//获取抽奖结果
                     $.post("../prize/luckDraw", {userId: id}, function(resp) {
         				if (resp.code == 'error') {
         					alert(resp.msg);
         				}else{
-        					   //进入不可点击状态
+        					//进入不可点击状态
                             enable = false;
                             //设置初始速度
                             speed = 60;
-                            //设置要中奖的位置 0手账 2 1升 4谢谢惠顾 5肥皂 6 12瓶 7 500毫升
+                            //设置要中奖的位置 1.3.5没有 0十二瓶 2一升 4五百毫升 6书 7肥皂
                             if(resp.data.prizeLevel == -1){
-                                threshold = 4;
+                            	var rand = Math.round(Math.random()*3);
+                            	if(rand <= 1){
+                            		threshold = 1;
+                            	}else if(rand <= 2){
+                            		threshold = 3;                            		
+                            	}else{
+                            		threshold = 5; 
+                            	}
                             }else if(resp.data.prizeLevel == 0){
-                            	threshold = 6;
-                            	$(".result_success_logo").attr("src", "images/result_oil_60_2.png")
+                            	threshold = 0;
+                            	src = "images/reward_oil60_2.png";
                             }else if(resp.data.prizeLevel == 1){
-                            	threshold = 7;
-                            	$(".result_success_logo").attr("src", "images/result_oil5_2.png")                            	
+                            	threshold = 4;   
+                            	src = "images/reward_oil5_2.png";           	
                             }else if(resp.data.prizeLevel == 2){
                             	threshold = 2;
-                            	$(".result_success_logo").attr("src", "images/result_oil10_2.png")                            	
+                            	src = "images/reward_oil10_2.png";                          	
                             }else if(resp.data.prizeLevel == 3){
-                            	threshold = 5;
-                            	$(".result_success_logo").attr("src", "images/result_soap2.png")                            	
+                            	threshold = 7;
+                            	src = "images/reward_soap2.png";                          	
                             }else if(resp.data.prizeLevel == 4){
-                            	threshold = 0;
-                            	$(".result_success_logo").attr("src", "images/result_book2.png")           	
+                            	threshold = 6;
+                            	src = "images/reward_book2.png";        	
                             }else{
-                            	threshold = 4;
+                            	threshold = 1;
                             }
                             //配置移动次数
                             last = 56 + threshold - current;
@@ -105,7 +117,6 @@
         			});
                 }
             });
-            
         });
 
         //重新设置内容位置
@@ -114,10 +125,11 @@
             $(".container").css("top", $(document).width() / 1.75).css("height", $(document).width() / 1.6);
             $(".item").css("height", $(".container").width() / 3.9);
             $(".title").css("top", $(".container").width() * 2.35);
+            $(".check_result").css("top", $(".container").width() * 2.36);
             $(".tips").css("top", $(".container").width() * 2.45);
             $(".mask").css("height", $(document).height());
             $(".result_failed_button").css("top", $(".container").width() * 1.6);
-            $(".result_success_title").css("top", $(".container").width() * 0.66);
+            $(".result_success_title").css("top", $(".container").width() * 0.69);
             $(".result_success_logo").css("top", $(".container").width() * 0.9);
             $(".result_success_name").css("top", $(".container").width() * 1.35);
             $(".result_success_phone").css("top", $(".container").width() * 1.59);
@@ -139,7 +151,7 @@
                 setTimeout(function(){next()}, speed);
             }else{
                 setTimeout(function(){
-                    if(threshold == 4){
+                    if(threshold == 1 || threshold == 3 || threshold == 5){
                     	failed();
                     }else{
                     	success();
@@ -158,6 +170,7 @@
             $(".result_success_name").show();
             $(".result_success_phone").show();
             $(".result_success_button").show();
+        	$(".result_success_logo").attr("src", src);
         }
 
         //谢谢惠顾
@@ -197,15 +210,15 @@
     <img class="background" src="images/lottery_background.png">
     <img class="pool" src="images/lottery_pool.png">
     <div class="container">
-        <img class="item item0" src="images/reward_book.png">
-        <img class="item item1" src="images/reward_soap.png">
+        <img class="item item0" src="images/reward_oil60.png">
+        <img class="item item1" src="images/reward_null.png">
         <img class="item item2" src="images/reward_oil10.png">
-        <img class="item item7" src="images/reward_oil5.png">
+        <img class="item item7" src="images/reward_soap.png">
         <img class="item button" src="images/lottery_button.png">
-        <img class="item item3" src="images/reward_oil5.png">
-        <img class="item item6" src="images/reward_oil60.png">
-        <img class="item item5" src="images/reward_soap.png">
-        <img class="item item4" src="images/reward_null.png">
+        <img class="item item3" src="images/reward_null.png">
+        <img class="item item6" src="images/reward_book.png">
+        <img class="item item5" src="images/reward_null.png">
+        <img class="item item4" src="images/reward_oil5.png">
     </div>
     <span class="title"><span style="color: #FF356B">活动</span>说明</span>
     <span class="tips">1.中奖者留下姓名和电话，在活动结束后会联系邮寄奖品；<br>
@@ -258,5 +271,6 @@
 
     <img class="result failed" src="images/result_failed.png" style="display: none;">
     <img class="result_failed_button" src="images/result_failed_button.png" style="display: none;">
+    <span class="check_result">查看中奖结果</span>
 </body>
 </html>

minigame/WebContent/static/result.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" style="width: 100%">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>抽奖结果</title>
+    <style type="text/css">
+    	*{
+    		margin: 0;
+    		padding: 0;
+    	}
+    </style>
+    <script src="js/jquery.min.js"></script>
+    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
+    <script type="text/javascript">
+	    $(function(){
+	    	$.post("../prize/luckDrawListBack", {}, function(resp) {
+				if (resp.code == 'error') {
+					console.log(resp.code);
+				}else{
+					for(let index in resp.data){
+						$("table").append("<tr><td>" + resp.data[index].nickName + "</td><td>" + resp.data[index].prize + "</td></tr>")
+					}
+				}
+			});
+		})
+	</script>
+</head>
+
+<body style="width: 100%">
+    <table class="table table-condensed">
+		<tr>
+			<th>昵称</th>
+			<th>奖品</th>
+		</tr>
+	</table>
+</body>
+</html>