浏览代码

Merge remote-tracking branch 'origin/master'

Reiskuchen 5 年之前
父节点
当前提交
8bd767767c
共有 42 个文件被更改,包括 1438 次插入117 次删除
  1. 7 2
      minigame/WebContent/index.html
  2. 650 66
      minigame/WebContent/static/assets.js
  3. 6 0
      minigame/WebContent/static/css/animate.min.css
  4. 453 0
      minigame/WebContent/static/css/main.css
  5. 二进制
      minigame/WebContent/static/images/assets_atlas_P_2.png
  6. 二进制
      minigame/WebContent/static/images/assets_atlas_P_3.png
  7. 二进制
      minigame/WebContent/static/images/assets_atlas_P_4.png
  8. 二进制
      minigame/WebContent/static/img/bg.jpg
  9. 二进制
      minigame/WebContent/static/img/headimg.png
  10. 二进制
      minigame/WebContent/static/img/hsr/menu_hsr2.png
  11. 二进制
      minigame/WebContent/static/img/leads_bg.png
  12. 二进制
      minigame/WebContent/static/img/leads_pro.png
  13. 二进制
      minigame/WebContent/static/img/logo.png
  14. 二进制
      minigame/WebContent/static/img/oil.png
  15. 二进制
      minigame/WebContent/static/img/oil_icon1.png
  16. 二进制
      minigame/WebContent/static/img/oil_icon2.png
  17. 二进制
      minigame/WebContent/static/img/poster/bg1.jpg
  18. 二进制
      minigame/WebContent/static/img/poster/bg2.jpg
  19. 二进制
      minigame/WebContent/static/img/poster/bg3.jpg
  20. 二进制
      minigame/WebContent/static/img/poster/hsr.png
  21. 二进制
      minigame/WebContent/static/img/poster/hsr1.jpg
  22. 二进制
      minigame/WebContent/static/img/poster/qrcode.jpg
  23. 二进制
      minigame/WebContent/static/img/poster/secret1.png
  24. 二进制
      minigame/WebContent/static/img/qcdf/menu_qcdf.png
  25. 二进制
      minigame/WebContent/static/img/qcdf/menu_qcdf2.png
  26. 二进制
      minigame/WebContent/static/img/qcdf/qcdf_icon1.png
  27. 二进制
      minigame/WebContent/static/img/qcdf/qcdf_icon1_1.png
  28. 二进制
      minigame/WebContent/static/img/qcdf/qcdf_icon2.png
  29. 二进制
      minigame/WebContent/static/img/qcdf/qcdf_icon2_1.png
  30. 二进制
      minigame/WebContent/static/img/replay_btn.png
  31. 二进制
      minigame/WebContent/static/img/secret_btn.png
  32. 二进制
      minigame/WebContent/static/img/share_btn.png
  33. 二进制
      minigame/WebContent/static/img/swy/swy_icon1.png
  34. 二进制
      minigame/WebContent/static/img/swy/swy_icon1_1.png
  35. 二进制
      minigame/WebContent/static/img/swy/swy_icon2.png
  36. 二进制
      minigame/WebContent/static/img/swy/swy_icon3.png
  37. 二进制
      minigame/WebContent/static/img/ymc/menu_ymc.png
  38. 二进制
      minigame/WebContent/static/img/ymc/menu_ymc2.png
  39. 二进制
      minigame/WebContent/static/img/ymc/ymc_icon1.png
  40. 二进制
      minigame/WebContent/static/img/ymc/ymc_icon1_1.png
  41. 46 7
      minigame/WebContent/static/index.html
  42. 276 42
      minigame/WebContent/static/js/main.js

+ 7 - 2
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);
 		
 		// 判断微博分享

文件差异内容过多而无法显示
+ 650 - 66
minigame/WebContent/static/assets.js


文件差异内容过多而无法显示
+ 6 - 0
minigame/WebContent/static/css/animate.min.css


+ 453 - 0
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/images/assets_atlas_P_2.png


二进制
minigame/WebContent/static/images/assets_atlas_P_3.png


二进制
minigame/WebContent/static/images/assets_atlas_P_4.png


二进制
minigame/WebContent/static/img/bg.jpg


二进制
minigame/WebContent/static/img/headimg.png


二进制
minigame/WebContent/static/img/hsr/menu_hsr2.png


二进制
minigame/WebContent/static/img/leads_bg.png


二进制
minigame/WebContent/static/img/leads_pro.png


二进制
minigame/WebContent/static/img/logo.png


二进制
minigame/WebContent/static/img/oil.png


二进制
minigame/WebContent/static/img/oil_icon1.png


二进制
minigame/WebContent/static/img/oil_icon2.png


二进制
minigame/WebContent/static/img/poster/bg1.jpg


二进制
minigame/WebContent/static/img/poster/bg2.jpg


二进制
minigame/WebContent/static/img/poster/bg3.jpg


二进制
minigame/WebContent/static/img/poster/hsr.png


二进制
minigame/WebContent/static/img/poster/hsr1.jpg


二进制
minigame/WebContent/static/img/poster/qrcode.jpg


二进制
minigame/WebContent/static/img/poster/secret1.png


二进制
minigame/WebContent/static/img/qcdf/menu_qcdf.png


二进制
minigame/WebContent/static/img/qcdf/menu_qcdf2.png


二进制
minigame/WebContent/static/img/qcdf/qcdf_icon1.png


二进制
minigame/WebContent/static/img/qcdf/qcdf_icon1_1.png


二进制
minigame/WebContent/static/img/qcdf/qcdf_icon2.png


二进制
minigame/WebContent/static/img/qcdf/qcdf_icon2_1.png


二进制
minigame/WebContent/static/img/replay_btn.png


二进制
minigame/WebContent/static/img/secret_btn.png


二进制
minigame/WebContent/static/img/share_btn.png


二进制
minigame/WebContent/static/img/swy/swy_icon1.png


二进制
minigame/WebContent/static/img/swy/swy_icon1_1.png


二进制
minigame/WebContent/static/img/swy/swy_icon2.png


二进制
minigame/WebContent/static/img/swy/swy_icon3.png


二进制
minigame/WebContent/static/img/ymc/menu_ymc.png


二进制
minigame/WebContent/static/img/ymc/menu_ymc2.png


二进制
minigame/WebContent/static/img/ymc/ymc_icon1.png


二进制
minigame/WebContent/static/img/ymc/ymc_icon1_1.png


+ 46 - 7
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"> -->

+ 276 - 42
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 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断。