第三个版本

minigame/WebContent/static/css/main.css

@@ -608,7 +608,13 @@ img {
   display: none;
   z-index: 1001; }
   .secret-box img {
-    vertical-align: middle; }
+    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;
@@ -727,6 +733,23 @@ img {
   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;
@@ -771,7 +794,7 @@ img {
     .poster-mode .leads-box .pro {
       position: absolute;
       top: 50%;
-      left: 0.3125rem;
+      left: 0.46875rem;
       width: 1.82812rem;
       -webkit-transform: translate(0, -50%);
          -moz-transform: translate(0, -50%);

minigame/WebContent/static/index.html

@@ -62,7 +62,8 @@
     </div>
     <!-- 海报 -->
     <div class="poster-mode">
-        <img src="./img/poster/hsr1.jpg" id="poster">
+        <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">

minigame/WebContent/static/js/main.js

@@ -48,7 +48,7 @@ function handleComplete(evt, comp) {
     });
 
 
-
+    var dishIndex = 0;
     $(".select-dish-box .item").on("click", function() {
         $(this).addClass("active").siblings().removeClass("active");
         $(".select-dish-box .confirm").show();
@@ -58,8 +58,35 @@ 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() 
@@ -74,44 +101,63 @@ function handleComplete(evt, comp) {
 
     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: 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){
@@ -124,11 +170,52 @@ function handleComplete(evt, comp) {
         dom.scale = 0.1;
         delay = delay || 0.1;
         var anim = new TimelineMax({ delay:delay});
-        anim.to(dom,0.8, { scale: 1, ease: Elastic.easeOut.config(1, 0.3) })
+        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,
@@ -159,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
+        }
+    ]
 
 
     // 画线
@@ -178,12 +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;
+                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);
+                                }
                             }
                         }
                     }
@@ -217,8 +349,10 @@ function handleComplete(evt, comp) {
         playbowlAnim();
     })
 
+
+    var dishMoveIndex = 0;
     // 移动菜品
-    function dishMove(dom) {
+    function dishMove(dom,x,y) {
         var startX = 0;
         var startY = 0;
         var domFirst = $.extend(true, {}, dom);
@@ -234,14 +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;
@@ -256,15 +413,27 @@ 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() {
@@ -281,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;
@@ -289,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;
@@ -298,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();
@@ -310,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;
             }
         }
@@ -321,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);
+            }
+            
         });
     }
 
@@ -340,7 +534,6 @@ 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);
@@ -348,6 +541,19 @@ function handleComplete(evt, comp) {
                 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 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。