第二版本,海报部分还没有加进去

游戏的整个流程已有，需要抓紧确认细节，一旦细节完毕，其他3个就方便添加了

minigame/WebContent/static/assets.js

@@ -4,8 +4,8 @@ var p; // shortcut to reference prototypes
 var lib={};var ss={};var img={};
 lib.ssMetadata = [
 		{name:"assets_atlas_P_", frames: [[0,0,625,443],[0,445,563,455]]},
-		{name:"assets_atlas_P_2", frames: [[0,0,635,382],[0,778,371,144],[637,0,353,269],[0,384,614,392],[616,384,368,505]]},
-		{name:"assets_atlas_P_3", frames: [[439,0,203,139],[777,252,180,59],[777,191,180,59],[644,0,202,129],[250,0,187,159],[553,141,86,75],[115,257,97,42],[0,209,113,49],[250,161,103,118],[115,209,108,46],[848,0,123,189],[644,131,131,156],[439,141,112,139],[0,0,248,207]]}
+		{name:"assets_atlas_P_2", frames: [[0,0,635,382],[637,0,353,269],[0,384,614,392],[616,384,368,505]]},
+		{name:"assets_atlas_P_3", frames: [[787,0,203,139],[572,161,180,59],[225,208,180,59],[225,146,240,60],[787,141,202,129],[598,0,187,159],[84,258,86,75],[282,269,97,42],[225,0,371,144],[407,266,113,49],[467,146,103,118],[172,269,108,46],[572,222,88,109],[0,258,82,104],[662,222,85,105],[0,0,223,256]]}
 ];
 
 
@@ -48,6 +48,13 @@ lib.ssMetadata = [
 
 
 
+(lib.btn3 = function() {
+	this.spriteSheet = ss["assets_atlas_P_3"];
+	this.gotoAndStop(3);
+}).prototype = p = new cjs.Sprite();
+
+
+
 (lib.game_bg = function() {
 	this.initialize(img.game_bg);
 }).prototype = p = new cjs.Bitmap();
@@ -56,84 +63,84 @@ p.nominalBounds = new cjs.Rectangle(0,0,640,1040);
 
 (lib.hsr_icon1 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(3);
+	this.gotoAndStop(4);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.hsr_icon1_1 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(4);
+	this.gotoAndStop(5);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.hsr_icon2 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(5);
+	this.gotoAndStop(6);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.hsr_icon2_1 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(6);
+	this.gotoAndStop(7);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.hsr_icon3 = function() {
-	this.spriteSheet = ss["assets_atlas_P_2"];
-	this.gotoAndStop(1);
+	this.spriteSheet = ss["assets_atlas_P_3"];
+	this.gotoAndStop(8);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.hsr_icon3_1 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(7);
+	this.gotoAndStop(9);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.hsr_icon4 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(8);
+	this.gotoAndStop(10);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.hsr_icon4_1 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(9);
+	this.gotoAndStop(11);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.material1 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(10);
+	this.gotoAndStop(12);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.material2 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(11);
+	this.gotoAndStop(13);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.material3 = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(12);
+	this.gotoAndStop(14);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.menu_hsr = function() {
 	this.spriteSheet = ss["assets_atlas_P_2"];
-	this.gotoAndStop(2);
+	this.gotoAndStop(1);
 }).prototype = p = new cjs.Sprite();
 
 
@@ -147,21 +154,21 @@ p.nominalBounds = new cjs.Rectangle(0,0,640,1040);
 
 (lib.pot = function() {
 	this.spriteSheet = ss["assets_atlas_P_2"];
-	this.gotoAndStop(3);
+	this.gotoAndStop(2);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.pro = function() {
 	this.spriteSheet = ss["assets_atlas_P_3"];
-	this.gotoAndStop(13);
+	this.gotoAndStop(15);
 }).prototype = p = new cjs.Sprite();
 
 
 
 (lib.smoke = function() {
 	this.spriteSheet = ss["assets_atlas_P_2"];
-	this.gotoAndStop(4);
+	this.gotoAndStop(3);
 }).prototype = p = new cjs.Sprite();
 // helper functions:
 
@@ -203,7 +210,7 @@ function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
 
 	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
 
-}).prototype = getMCSymbolPrototype(lib.pro_1, new cjs.Rectangle(0,0,248,207), null);
+}).prototype = getMCSymbolPrototype(lib.pro_1, new cjs.Rectangle(0,0,223,256), null);
 
 
 (lib.material3_1 = function(mode,startPosition,loop) {
@@ -215,7 +222,7 @@ function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
 
 	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
 
-}).prototype = getMCSymbolPrototype(lib.material3_1, new cjs.Rectangle(0,0,112,139), null);
+}).prototype = getMCSymbolPrototype(lib.material3_1, new cjs.Rectangle(0,0,85,105), null);
 
 
 (lib.material2_1 = function(mode,startPosition,loop) {
@@ -227,7 +234,7 @@ function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
 
 	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
 
-}).prototype = getMCSymbolPrototype(lib.material2_1, new cjs.Rectangle(0,0,131,156), null);
+}).prototype = getMCSymbolPrototype(lib.material2_1, new cjs.Rectangle(0,0,82,104), null);
 
 
 (lib.material1_1 = function(mode,startPosition,loop) {
@@ -239,7 +246,7 @@ function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
 
 	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
 
-}).prototype = getMCSymbolPrototype(lib.material1_1, new cjs.Rectangle(0,0,123,189), null);
+}).prototype = getMCSymbolPrototype(lib.material1_1, new cjs.Rectangle(0,0,88,109), null);
 
 
 (lib.hsr_icon4_1_1 = function(mode,startPosition,loop) {
@@ -290,6 +297,18 @@ function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
 }).prototype = getMCSymbolPrototype(lib.hsr_icon1_1_1, new cjs.Rectangle(0,0,187,159), null);
 
 
+(lib.btn3_1 = function(mode,startPosition,loop) {
+	this.initialize(mode,startPosition,loop,{});
+
+	// 图层_1
+	this.instance = new lib.btn3();
+	this.instance.parent = this;
+
+	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
+
+}).prototype = getMCSymbolPrototype(lib.btn3_1, new cjs.Rectangle(0,0,240,60), null);
+
+
 (lib.btn2_1 = function(mode,startPosition,loop) {
 	this.initialize(mode,startPosition,loop,{});
 
@@ -356,14 +375,14 @@ function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
 	// 图层_3 (mask)
 	var mask = new cjs.Shape();
 	mask._off = true;
-	mask.graphics.p("EgbzAmmMAAAhNLMA3nAAAMAAABNLg");
-	mask.setTransform(170.1,-68);
+	mask.graphics.p("EgYhAjFMAAAhGJMAxDAAAMAAABGJg");
+	mask.setTransform(167.5,-46);
 
 	// smoke
 	this.smoke = new lib.smoke_1();
 	this.smoke.name = "smoke";
 	this.smoke.parent = this;
-	this.smoke.setTransform(171.1,450,1,1,0,0,0,184,252.5);
+	this.smoke.setTransform(169,465.5,1,1,0,0,0,184,252.5);
 
 	var maskedShapeInstanceList = [this.smoke];
 
@@ -371,13 +390,13 @@ function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
 		maskedShapeInstanceList[shapedInstanceItr].mask = mask;
 	}
 
-	this.timeline.addTween(cjs.Tween.get(this.smoke).to({y:-340.9,alpha:0},36).wait(1));
+	this.timeline.addTween(cjs.Tween.get(this.smoke).to({x:171.1,y:-448.9,alpha:0},62).wait(1));
 
 	// 图层 1
 	this.instance = new lib.menu_hsr();
 	this.instance.parent = this;
 
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(37));
+	this.timeline.addTween(cjs.Tween.get(this.instance).wait(63));
 
 }).prototype = p = new cjs.MovieClip();
 p.nominalBounds = new cjs.Rectangle(0,0,353,269);
@@ -400,7 +419,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,353,269);
 
 	this.instance_1 = new lib.hsr_icon4_1_1();
 	this.instance_1.parent = this;
-	this.instance_1.setTransform(54,71,1,1,0,0,0,54,23);
+	this.instance_1.setTransform(0,48);
 
 	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},1).wait(1));
 
@@ -425,7 +444,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,103,118);
 
 	this.instance_1 = new lib.hsr_icon3_1_1();
 	this.instance_1.parent = this;
-	this.instance_1.setTransform(198.5,57.5,1,1,0,0,0,56.5,24.5);
+	this.instance_1.setTransform(142,33);
 
 	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},1).wait(1));
 
@@ -450,7 +469,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,371,144);
 
 	this.instance_1 = new lib.hsr_icon2_1_1();
 	this.instance_1.parent = this;
-	this.instance_1.setTransform(29.5,40,1,1,0,0,0,48.5,21);
+	this.instance_1.setTransform(-19,19);
 
 	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},1).wait(1));
 
@@ -475,7 +494,6 @@ p.nominalBounds = new cjs.Rectangle(0,0,86,75);
 
 	this.instance_1 = new lib.hsr_icon1_1_1();
 	this.instance_1.parent = this;
-	this.instance_1.setTransform(93.5,79.5,1,1,0,0,0,93.5,79.5);
 
 	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},1).wait(1));
 
@@ -490,7 +508,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 	this.material3 = new lib.material3_1();
 	this.material3.name = "material3";
 	this.material3.parent = this;
-	this.material3.setTransform(509,195.5,1,1,0,0,0,56,69.5);
+	this.material3.setTransform(502.5,178.5,1,1,0,0,0,42.5,52.5);
 
 	this.timeline.addTween(cjs.Tween.get(this.material3).wait(1));
 
@@ -498,22 +516,23 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 	this.material2 = new lib.material2_1();
 	this.material2.name = "material2";
 	this.material2.parent = this;
-	this.material2.setTransform(315.5,193,1,1,0,0,0,65.5,78);
+	this.material2.setTransform(315,179,1,1,0,0,0,41,52);
 
 	this.timeline.addTween(cjs.Tween.get(this.material2).wait(1));
 
 	// material1
-	this.instance = new lib.material1_1();
-	this.instance.parent = this;
-	this.instance.setTransform(122.1,185.1,1,1,0,0,0,61.5,94.5);
+	this.material1 = new lib.material1_1();
+	this.material1.name = "material1";
+	this.material1.parent = this;
+	this.material1.setTransform(122.6,178.5,1,1,0,0,0,44,54.5);
 
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
+	this.timeline.addTween(cjs.Tween.get(this.material1).wait(1));
 
 	// 图层 1
-	this.instance_1 = new lib.blackboard();
-	this.instance_1.parent = this;
+	this.instance = new lib.blackboard();
+	this.instance.parent = this;
 
-	this.timeline.addTween(cjs.Tween.get(this.instance_1).wait(1));
+	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
 
 }).prototype = getMCSymbolPrototype(lib.blackboard_1, new cjs.Rectangle(0,0,635,382), null);
 
@@ -536,7 +555,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 
 	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
 
-}).prototype = getMCSymbolPrototype(lib.pot_1, new cjs.Rectangle(0,-300.9,614,1018), null);
+}).prototype = getMCSymbolPrototype(lib.pot_1, new cjs.Rectangle(0,-256.4,614,989), null);
 
 
 (lib.plate_1 = function(mode,startPosition,loop) {
@@ -546,7 +565,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 	this.hsr_icon4 = new lib.hsr_icon4_2();
 	this.hsr_icon4.name = "hsr_icon4";
 	this.hsr_icon4.parent = this;
-	this.hsr_icon4.setTransform(437,193,1,1,0,0,0,51.5,59);
+	this.hsr_icon4.setTransform(385.5,134);
 
 	this.timeline.addTween(cjs.Tween.get(this.hsr_icon4).wait(1));
 
@@ -554,7 +573,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 	this.hsr_icon3 = new lib.hsr_icon3_2();
 	this.hsr_icon3.name = "hsr_icon3";
 	this.hsr_icon3.parent = this;
-	this.hsr_icon3.setTransform(267,323,1,1,0,0,0,185.5,72);
+	this.hsr_icon3.setTransform(81.5,251);
 
 	this.timeline.addTween(cjs.Tween.get(this.hsr_icon3).wait(1));
 
@@ -562,7 +581,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 	this.hsr_icon2 = new lib.hsr_icon2_2();
 	this.hsr_icon2.name = "hsr_icon2";
 	this.hsr_icon2.parent = this;
-	this.hsr_icon2.setTransform(332,207.1,1,1,0,0,0,43,37.5);
+	this.hsr_icon2.setTransform(289,169.6);
 
 	this.timeline.addTween(cjs.Tween.get(this.hsr_icon2).wait(1));
 
@@ -570,7 +589,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 	this.hsr_icon1 = new lib.hsr_icon1_2();
 	this.hsr_icon1.name = "hsr_icon1";
 	this.hsr_icon1.parent = this;
-	this.hsr_icon1.setTransform(177,198.5,1,1,0,0,0,101,64.5);
+	this.hsr_icon1.setTransform(76,134);
 
 	this.timeline.addTween(cjs.Tween.get(this.hsr_icon1).wait(1));
 
@@ -587,6 +606,15 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 (lib.assets = function(mode,startPosition,loop) {
 	this.initialize(mode,startPosition,loop,{});
 
+	// btn3
+	this.btn3 = new lib.btn3_1();
+	this.btn3.name = "btn3";
+	this.btn3.parent = this;
+	this.btn3.setTransform(324,971.3,1,1,0,0,0,120,30);
+	this.btn3.alpha = 0;
+
+	this.timeline.addTween(cjs.Tween.get(this.btn3).wait(1));
+
 	// pro
 	this.pro = new lib.pro_1();
 	this.pro.name = "pro";
@@ -645,7 +673,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 	this.plate = new lib.plate_1();
 	this.plate.name = "plate";
 	this.plate.parent = this;
-	this.plate.setTransform(325.7,701.4,1,1,0,0,0,281.5,227.5);
+	this.plate.setTransform(44.2,473.9);
 
 	this.timeline.addTween(cjs.Tween.get(this.plate).wait(1));
 
@@ -653,7 +681,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 	this.bowl = new lib.bowl_1();
 	this.bowl.name = "bowl";
 	this.bowl.parent = this;
-	this.bowl.setTransform(312.5,764.9,1,1,0,0,0,312.5,221.5);
+	this.bowl.setTransform(0,543.4);
 	this.bowl.alpha = 0;
 
 	this.timeline.addTween(cjs.Tween.get(this.bowl).wait(1));
@@ -667,7 +695,7 @@ p.nominalBounds = new cjs.Rectangle(0,0,202,129);
 	this.timeline.addTween(cjs.Tween.get(this.bg).wait(1));
 
 }).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(320,520,640,1247.4);
+p.nominalBounds = new cjs.Rectangle(320,520,640,1262.9);
 // library properties:
 lib.properties = {
 	id: '5529E26743974F469545223C44E61D22',

minigame/WebContent/static/css/main.css

@@ -438,6 +438,79 @@ img {
   z-index: 1;
   display: none; }
 
+.shake-mode {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.6);
+  display: none; }
+  .shake-mode .shake-dialog {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    width: 6.28125rem;
+    -webkit-transform: translate(-50%, -50%);
+       -moz-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+         -o-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+    padding-top: 0.78125rem; }
+    .shake-mode .shake-dialog .icon {
+      position: absolute;
+      top: 5.625rem;
+      left: 50%;
+      width: 2.23438rem;
+      margin-left: -1.11719rem; }
+    .shake-mode .shake-dialog .fire {
+      width: 5.98438rem;
+      height: 10.54688rem;
+      background: url(../img/fire.png) no-repeat 0 0;
+      -moz-background-size: 600% 100%;
+           background-size: 600% 100%;
+      -webkit-animation: fire 1.5s steps(5) infinite;
+         -moz-animation: fire 1.5s steps(5) infinite;
+           -o-animation: fire 1.5s steps(5) infinite;
+              animation: fire 1.5s steps(5) infinite; }
+    .shake-mode .shake-dialog .txt {
+      position: absolute;
+      top: 8.35938rem;
+      left: 50%;
+      width: 4.96875rem;
+      margin-left: -2.48438rem; }
+
+.anim-time {
+  -webkit-animation-duration: 0.5 !important;
+     -moz-animation-duration: 0.5 !important;
+       -o-animation-duration: 0.5 !important;
+          animation-duration: 0.5 !important; }
+
+@-webkit-keyframes fire {
+  0% {
+    background-position: 0 0; }
+  100% {
+    background-position: 100% 0; } }
+
+@-moz-keyframes fire {
+  0% {
+    background-position: 0 0; }
+  100% {
+    background-position: 100% 0; } }
+
+@-o-keyframes fire {
+  0% {
+    background-position: 0 0; }
+  100% {
+    background-position: 100% 0; } }
+
+@keyframes fire {
+  0% {
+    background-position: 0 0; }
+  100% {
+    background-position: 100% 0; } }
+
 .anim-light {
   -webkit-animation: light 2s ease-out infinite;
      -moz-animation: light 2s ease-out infinite;

minigame/WebContent/static/index.html

@@ -59,6 +59,15 @@
             <canvas id="canvas" width="640" height="1040"></canvas>
         </div>
     </div>
+
+    <div class="shake-mode">
+        <div class="shake-dialog">
+            <!-- <img src="./img/shake_fire.png"> -->
+            <div class="fire anim-fire" id="fire"></div>
+            <img src="./img/shake_icon.png" class="icon">
+            <img src="./img/shake_txt.png" class="txt">
+        </div>
+    </div>
     <script src="./js/jquery.min.js"></script>
     <script src="./js/create.js"></script>
     <script src="./js/tweenmax.js"></script>

minigame/WebContent/static/js/main.js

@@ -1,20 +1,23 @@
-document.body.addEventListener('touchmove',bodyScroll,{passive: false});
-function bodyScroll(event){
+document.body.addEventListener('touchmove', bodyScroll, { passive: false });
+
+function bodyScroll(event) {
     event.preventDefault();
 }
 
 var canvas = document.getElementById("canvas");
 var stage = new createjs.Stage(canvas);
+
 function init() {
     var comp = AdobeAn.getComposition("5529E26743974F469545223C44E61D22");
     var lib = comp.getLibrary();
     var loader = new createjs.LoadQueue(false);
     loader.addEventListener("fileload", function(evt) { handleFileLoad(evt, comp) });
     loader.addEventListener("complete", function(evt) { handleComplete(evt, comp) });
-    loader.addEventListener("progress",loadProgressHandler);
+    loader.addEventListener("progress", loadProgressHandler);
     var lib = comp.getLibrary();
     loader.loadManifest(lib.properties.manifest);
     createjs.MotionGuidePlugin.install();
+    createjs.Touch.enable(stage);
 }
 
 function handleFileLoad(evt, comp) {
@@ -23,12 +26,13 @@ function handleFileLoad(evt, comp) {
         loadingimages[evt.item.id] = evt.result;
     }
 }
-function loadProgressHandler(event)
-{
-    var num = Math.floor(event.progress*100);
+
+function loadProgressHandler(event) {
+    var num = Math.floor(event.progress * 100);
     $("#loadingTxt").text(num);
-    $("#loadingBar").css("width",num+'%');
+    $("#loadingBar").css("width", num + '%');
 }
+
 function handleComplete(evt, comp) {
     //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
     var lib = comp.getLibrary();
@@ -42,12 +46,12 @@ function handleComplete(evt, comp) {
     $(".loading").fadeOut();
 
 
-    $(".select-dish-box .item").on("click",function(){
+    $(".select-dish-box .item").on("click", function() {
         $(this).addClass("active").siblings().removeClass("active");
         $(".select-dish-box .confirm").show();
     })
-    $(".select-dish-box .confirm").on("click",function(){
-        if(!$(".select-dish-box .item").hasClass("active")){
+    $(".select-dish-box .confirm").on("click", function() {
+        if (!$(".select-dish-box .item").hasClass("active")) {
             alert("请选择你要做的菜")
             return false;
         }
@@ -56,66 +60,299 @@ 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 });
+        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 });
+        return anim;
+    }
+
+    function bowlAnim(callback) {
+        var anim = new TimelineMax({ onComplete: callback, delay: 1 });
+        anim.to(exportRoot.plate, 0.5, { y: "-=370", ease: Power0.easeIn })
+        anim.to(exportRoot.bowl, 0.5, { alpha: 1, ease: Power0.easeIn });
+        return anim;
+    }
 
-    function bowlAnim(callback){
-        var anim = new TimelineMax({onComplete:callback});
-        anim.to(exportRoot.plate,0.5,{y:"-=370", ease:Power0.easeIn})
-        anim.to(exportRoot.bowl,0.5,{alpha:1, ease:Power0.easeIn});
+    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, {})
         return anim;
     }
-    function proAnim(callback){
-        var anim = new TimelineMax({onComplete:callback});
-        anim.to(exportRoot.pro,0.3,{rotation:"-=20", ease:Power0.easeIn})
-        anim.to(exportRoot.pro,1,{})
-        anim.to(exportRoot.pro,0.3,{alpha:0, ease:Power0.easeIn})
-        anim.to(exportRoot.pro,1,{})
+
+    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 })
         return anim;
     }
-    exportRoot.plate.addEventListener("mousedown",function(){
-        exportRoot.plate.removeAllEventListeners();
-        exportRoot.plate.hsr_icon1.gotoAndStop(1);
-        exportRoot.plate.hsr_icon2.gotoAndStop(1);
-        exportRoot.plate.hsr_icon3.gotoAndStop(1);
-        exportRoot.plate.hsr_icon4.gotoAndStop(1);
-        bowlAnim(function(){
-            exportRoot.plate.hsr_icon1.addEventListener("mousedown",function(){
-                exportRoot.plate.hsr_icon1.removeAllEventListeners();
-                exportRoot.plate.hsr_icon1.y = 600;
-            })
-            exportRoot.plate.hsr_icon2.addEventListener("mousedown",function(){
-                exportRoot.plate.hsr_icon2.removeAllEventListeners();
-                exportRoot.plate.hsr_icon2.y = 600;
-            })
-            exportRoot.plate.hsr_icon3.addEventListener("mousedown",function(){
-                exportRoot.plate.hsr_icon3.removeAllEventListeners();
-                exportRoot.plate.hsr_icon3.y = 650;
-            })
-            exportRoot.plate.hsr_icon4.addEventListener("mousedown",function(){
-                exportRoot.plate.hsr_icon4.removeAllEventListeners();
-                exportRoot.plate.hsr_icon4.y = 600;
-            })
-
-            exportRoot.btn1.alpha = 1;
-            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;
-                proAnim(function(){
-                    exportRoot.pot.hsr.alpha = 1;
-                    exportRoot.btn2.alpha = 1;
-                });
-            })
-            exportRoot.btn2.addEventListener("mousedown",function(){
-                exportRoot.btn2.removeAllEventListeners();
-                exportRoot.btn2.alpha = 0;
-                exportRoot.blackboard.alpha = 1;
-                exportRoot.ball1.alpha = 1;
-            })
-        });
+    function fadeInAnim(dom){
+        var anim = new TimelineMax({ });
+        anim.to(dom, 0.4, { alpha: 1, ease: Power0.easeIn })
+        return anim;
+    }
+
+
+    // 红烧肉的位置
+    var hsr_iconArr = [{
+            x: exportRoot.plate.x + exportRoot.plate.hsr_icon1.x,
+            y: exportRoot.plate.y + exportRoot.plate.hsr_icon1.y,
+            width: 202,
+            height: 129,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.hsr_icon2.x,
+            y: exportRoot.plate.y + exportRoot.plate.hsr_icon2.y,
+            width: 86,
+            height: 75,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.hsr_icon3.x,
+            y: exportRoot.plate.y + exportRoot.plate.hsr_icon3.y,
+            width: 371,
+            height: 144,
+            isClear: false
+        },
+        {
+            x: exportRoot.plate.x + exportRoot.plate.hsr_icon4.x,
+            y: exportRoot.plate.y + exportRoot.plate.hsr_icon4.y,
+            width: 103,
+            height: 118,
+            isClear: false
+        }
+    ];
+
+
+    // 画线
+    var lineArr = [];
+    var lineTimr = null;
+    var lineShape = new createjs.Shape();
+
+    function drawLine() {
+        var value = 40;
+        lineTimr = setInterval(function() {
+            lineShape.graphics.clear();
+            lineShape.graphics.setStrokeStyle(8).beginStroke("#787878");
+            if (lineArr.length) {
+                lineShape.graphics.moveTo(lineArr[0].x, lineArr[0].y);
+            }
+            for (var i = 0; i < lineArr.length; i++) {
+                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();
+                            }
+                        }
+                    }
+                }
+            }
+
+            lineArr.splice(0, 1);
+        }, 30)
+    }
+    // 画线事件
+    drawLine();
+    exportRoot.addEventListener("mousedown", function(event) {
+        lineArr = [];
+        var obj = {
+            x: event.stageX,
+            y: event.stageY,
+        };
+        lineArr.push(obj);
     })
+    exportRoot.addEventListener("pressmove", function(event) {
+        if (lineArr.length >= 15) {
+            lineArr.splice(0, 1);
+        }
+        var obj = {
+            x: event.stageX,
+            y: event.stageY,
+        };
+        lineArr.push(obj);
+    })
+    exportRoot.addEventListener("pressup", function(event) {
+
+    })
+
+    // 移动菜品
+    function dishMove(dom) {
+        var startX = 0;
+        var startY = 0;
+        var domFirst = $.extend(true, {}, dom);
+        dom.addEventListener("mousedown", function(event) {
+            startX = event.stageX;
+            startY = event.stageY;
+        })
+        dom.addEventListener("pressmove", function(event) {
+            dom.x -= (startX - event.stageX);
+            dom.y -= (startY - event.stageY);
+            startX = event.stageX;
+            startY = event.stageY;
+        })
+        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.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) {
+                    exportRoot.btn1.alpha = 1;
+                    isAllInplate();
+                }
+            } else {
+                dom.x = domFirst.x;
+                dom.y = domFirst.y;
+            }
+        })
+    }
+
+
+
+    // 菜全部到盘子里
+    function isAllInplate() {
+        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;
+            proAnim(function() {
+                exportRoot.pot.hsr.stop();
+                fadeInAnim(exportRoot.pot.hsr);
+                exportRoot.btn2.alpha = 1;
+                btnAnim(exportRoot.btn2);
+            });
+        })
+        exportRoot.btn2.addEventListener("mousedown", function() {
+            exportRoot.btn2.removeAllEventListeners();
+            exportRoot.btn2.alpha = 0;
+            fadeInAnim(exportRoot.blackboard);
+            exportRoot.ball1.alpha = 1;
+
+            ballAnim(exportRoot.ball1);
+        })
+
+        exportRoot.blackboard.material1.addEventListener("mousedown", function() {
+            exportRoot.blackboard.material1.removeAllEventListeners();
+            materialAnim(exportRoot.blackboard.material1, 300, 180, function() {
+                exportRoot.blackboard.material1.x -=300;
+                exportRoot.blackboard.material1.y -=180;
+                $(".shake-mode").show();
+                shakeInit();
+            });
+        })
+        exportRoot.blackboard.material2.addEventListener("mousedown", function() {
+            exportRoot.blackboard.material2.removeAllEventListeners();
+            materialAnim(exportRoot.blackboard.material2, 120, 180, function() {
+                exportRoot.blackboard.material2.x -=120;
+                exportRoot.blackboard.material2.y -=180;
+                $(".shake-mode").show();
+                shakeInit();
+            });
+        })
+        exportRoot.blackboard.material3.addEventListener("mousedown", function() {
+            exportRoot.blackboard.material3.removeAllEventListeners();
+            materialAnim(exportRoot.blackboard.material3, -30, 180, function() {
+                exportRoot.blackboard.material3.x -=30;
+                exportRoot.blackboard.material3.y -=180;
+                $(".shake-mode").show();
+                shakeInit();
+            });
+        })
+    }
+
+    // 菜切完盘子上移动
+    function playbowlAnim() {
+        for (var i = 0; i < hsr_iconArr.length; i++) {
+            if (hsr_iconArr[i].isClear == false) {
+                return false;
+            }
+        }
+        stage.removeChild(lineShape);
+        clearInterval(lineTimr);
+        exportRoot.removeAllEventListeners();
+
+
+        bowlAnim(function() {
+            dishMove(exportRoot.plate.hsr_icon1);
+            dishMove(exportRoot.plate.hsr_icon2);
+            dishMove(exportRoot.plate.hsr_icon3);
+            dishMove(exportRoot.plate.hsr_icon4);
+        });
+    }
+
+
+
+
+    function shakeInit() {
+        if (window.DeviceMotionEvent) {
+            window.addEventListener('devicemotion', deviceMotionHandler, false);
+        } else {
+            alert('您的手机不支持摇一摇功能！');
+        }
+
+        setTimeout(function(){
+            window.removeEventListener('devicemotion', deviceMotionHandler, false);
+            $(".shake-mode").hide();
+            exportRoot.pot.hsr.play();
+            exportRoot.btn3.alpha = 1;
+        },3000)
+        //获取加速度信息
+        //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
+        //而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
+        var SHAKE_THRESHOLD = 8000; //阈值越大，触发摇晃事件时手机摇晃的程度越剧烈
+        var last_update = 0;
+        var x, y, z, last_x = 0,
+            last_y = 0,
+            last_z = 0;
+
+        function deviceMotionHandler(eventData) {
+            var acceleration = eventData.accelerationIncludingGravity;
+            var curTime = new Date().getTime();
+            if ((curTime - last_update) > 10) {
+                var diffTime = curTime - last_update;
+                last_update = curTime;
+                x = acceleration.x;
+                y = acceleration.y;
+                z = acceleration.z;
+                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
+                if (speed > SHAKE_THRESHOLD) {
+                    //dosomething
+                    $("#fire").addClass("anim-time");
+                }else{
+                    $("#fire").removeClass("anim-time");
+                }
+                last_x = x;
+                last_y = y;
+                last_z = z;
+            }
+        }
+
+    }
 
 
 
@@ -124,7 +361,7 @@ function handleComplete(evt, comp) {
 
     //Registers the "tick" event listener.
     function fnStartAnimation() {
-        stage.addChild(exportRoot);
+        stage.addChild(exportRoot, lineShape);
         createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
         createjs.Ticker.addEventListener("tick", stage);
     }
@@ -136,6 +373,7 @@ function handleComplete(evt, comp) {
 
 // 自适应
 var stageWidth, stageHeight, stageScale;
+
 function stageBreakHandler(event) {
     if (stageWidth != $(".warp").width() || stageHeight != $(".warp").height()) {
         stageWidth = $(".warp").width();