导出excel下载完成

babel.config.js

@@ -3,26 +3,34 @@
 // plugins.push("transform-remove-console")
 // }
 module.exports = {
+  // presets: [
+  //   // '@vue/cli-plugin-babel/preset',
+  //   [
+  //     // '@vue/cli-plugin-babel/preset',
+  //     // '@vue/babel-preset-app',
+  //     "@vue/app",
+  //     {
+  //       "useBuiltIns": "entry",
+  //       corejs: 3,
+  //       "targets": {
+  //         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+  //       },
+  //       polyfills: [
+  //         'es.promise',
+  //         'es.symbol'
+  //       ]
+  //     }
+  //   ]
+  // ],
+  // plugins: [
+  //   "@babel/plugin-transform-runtime"
+  // ]
   presets: [
-    // '@vue/cli-plugin-babel/preset',
+    '@vue/cli-plugin-babel/preset'
-    [
-      // '@vue/cli-plugin-babel/preset',
-      // '@vue/babel-preset-app',
-      "@vue/app",
-      {
-        "useBuiltIns": "entry",
-        corejs: 3,
-        "targets": {
-          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-        },
-        polyfills: [
-          'es.promise',
-          'es.symbol'
-        ]
-      }
-    ]
   ],
   plugins: [
-    "@babel/plugin-transform-runtime"
+    ["@babel/plugin-transform-modules-commonjs", {
+      "allowTopLevelThis": true
+    }]
   ]
 }

deploy.config.js

@@ -16,8 +16,8 @@ module.exports = {
   // },
   test: {
     // 环境对象
-    name: 'szxgl测试环境', // 环境名称
+    name: 'szxgl测试环境:pro', // 环境名称
-    script: 'npm run build:dev', // 打包命令
+    script: 'npm run build:pro', // 打包命令
     host: '39.108.110.167', // 服务器地址
     port: 22, // 服务器端口号
     username: 'front', // 服务器登录用户名

package.json

@@ -20,6 +20,7 @@
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
+    "file-saver": "^2.0.5",
     "global": "^4.4.0",
     "good-storage": "^1.1.1",
     "gsap": "^3.5.1",
@@ -30,6 +31,7 @@
     "postcss-px2rem-exclude": "^0.0.6",
     "postcss-viewport-units": "^0.1.6",
     "px2rem-loader": "^0.1.9",
+    "script-loader": "^0.7.2",
     "style-resources-loader": "^1.3.3",
     "swiper": "^6.2.0",
     "tinyimg-webpack-plugin": "^0.0.5",
@@ -41,7 +43,8 @@
     "vue-slider-component": "^3.2.11",
     "vuex": "^3.4.0",
     "webpack-glsl-loader": "^1.0.1",
-    "wx-jssdk": "^0.0.7"
+    "wx-jssdk": "^0.0.7",
+    "xlsx": "^0.18.4"
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",
@@ -67,8 +70,11 @@
     "glslify": "^7.1.1",
     "handtrackjs": "^0.1.5",
     "jsmpeg": "^1.0.0",
+    "matter-js": "^0.18.0",
     "meshline": "^2.0.3",
+    "poly-decomp": "^0.3.0",
     "qrcode": "^1.4.4",
+    "snapsvg-cjs": "^0.0.6",
     "stats.js": "^0.17.0",
     "style-resources-loader": "^1.3.2",
     "three": "^0.133.0",

src/assets/css/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "easeljs": "^1.0.2"
+  }
+}

src/assets/css/reset.less

@@ -143,6 +143,8 @@ html,body{
 		} 
 	}
 
+	
+
 	//初始化开始循环 不初始化 不会开始循环
 	.loop(@i);
 }
@@ -177,6 +179,7 @@ html,body{
 		color: rgba(0,0,0,0.8);
 		text-align: center;
 		animation:  hide .5s ease 3s both;
+		font-size: 0.3rem;
 	}
 	#svg{
 		animation:  hide .5s ease 3s both;

src/assets/images/loading/loadingSprite.json

@@ -0,0 +1,83 @@
+{
+
+"images": [
+    "loadingSprite.png"
+],
+
+"framerate": 20,
+"frames": [
+    [1, 1, 645, 32, 0, 0, 0],
+    [648, 1, 359, 419, 0, 0, 0],
+    [1, 422, 395, 520, 0, 0, 0],
+    [398, 35, 246, 84, 0, 0, 0],
+    [1, 35, 392, 334, 0, 0, 0],
+    [398, 121, 243, 28, 0, 0, 0],
+    [643, 121, 3, 3, 0, 0, 0],
+    [643, 126, 3, 3, 0, 0, 0],
+    [1, 371, 37, 41, 0, 0, 0],
+    [1, 414, 4, 3, 0, 0, 0],
+    [7, 414, 4, 3, 0, 0, 0],
+    [40, 371, 402, 32, 0, 0, 0],
+    [40, 405, 15, 15, 0, 0, 0],
+    [57, 405, 14, 14, 0, 0, 0],
+    [73, 405, 10, 12, 0, 0, 0],
+    [85, 405, 11, 11, 0, 0, 0],
+    [98, 405, 10, 10, 0, 0, 0],
+    [110, 405, 10, 10, 0, 0, 0],
+    [122, 405, 7, 8, 0, 0, 0],
+    [131, 405, 7, 8, 0, 0, 0],
+    [140, 405, 10, 7, 0, 0, 0],
+    [152, 405, 8, 7, 0, 0, 0],
+    [1, 944, 30, 30, 0, 0, 0],
+    [1, 976, 26, 25, 0, 0, 0],
+    [29, 976, 21, 23, 0, 0, 0],
+    [33, 944, 385, 28, 0, 0, 0],
+    [52, 974, 328, 28, 0, 0, 0],
+    [382, 974, 23, 22, 0, 0, 0],
+    [407, 974, 19, 19, 0, 0, 0],
+    [444, 151, 171, 167, 0, 0, 0],
+    [398, 422, 392, 334, 0, 0, 0],
+    [428, 758, 306, 244, 0, 0, 0]
+],
+
+"animations": {
+    "loading_text2_en": { "frames": [0] },
+    "arrow": { "frames": [1] },
+    "person": { "frames": [2] },
+    "start": { "frames": [3] },
+    "light": { "frames": [4] },
+    "loading_text3": { "frames": [5] },
+    "snow_19": { "frames": [6] },
+    "snow_9": { "frames": [7] },
+    "snow_1": { "frames": [8] },
+    "snow_10": { "frames": [9] },
+    "snow_20": { "frames": [10] },
+    "loading_text3_en": { "frames": [11] },
+    "snow_2": { "frames": [12] },
+    "snow_8": { "frames": [13] },
+    "snow_11": { "frames": [14] },
+    "snow_13": { "frames": [15] },
+    "snow_17": { "frames": [16] },
+    "snow_6": { "frames": [17] },
+    "snow_14": { "frames": [18] },
+    "snow_7": { "frames": [19] },
+    "snow_16": { "frames": [20] },
+    "snow_15": { "frames": [21] },
+    "snow_3": { "frames": [22] },
+    "snow_12": { "frames": [23] },
+    "snow_18": { "frames": [24] },
+    "loading_text": { "frames": [25] },
+    "loading_text2": { "frames": [26] },
+    "snow_4": { "frames": [27] },
+    "snow_5": { "frames": [28] },
+    "snow": { "frames": [29] },
+    "light_2": { "frames": [30] },
+    "box": { "frames": [31] }
+},
+
+"texturepacker": [
+        "SmartUpdateHash: $TexturePacker:SmartUpdate:3da48f21b4a69792ffd2babe708727d0:90dbaba88b2a904ae79170eb342a1a0d:e0f80f5f67f3e04854c93f0048518df1$",
+        "Created with TexturePacker (https://www.codeandweb.com/texturepacker) for EaselJS"
+]
+
+}

src/assets/images/loading/snowSprite.json

@@ -0,0 +1,26 @@
+{
+
+"images": [
+    "snowSprite.png"
+],
+
+"framerate": 20,
+"frames": [
+    [1, 1, 77, 82, 0, 0, 0],
+    [1, 85, 57, 55, 0, 0, 0],
+    [1, 142, 46, 45, 0, 0, 0],
+    [49, 142, 15, 15, 0, 0, 0],
+    [60, 85, 8, 12, 0, 0, 0],
+    [60, 99, 6, 6, 0, 0, 0]
+],
+
+"animations": {
+    "snow": { "frames": [0, 1, 2, 3, 5, 4] }
+},
+
+"texturepacker": [
+        "SmartUpdateHash: $TexturePacker:SmartUpdate:5282c6d67fd56100f124116392fa0dda:00bfe33730c22fc59892c575329c8865:784870e134e9ba9b2fa4be9322fa91d0$",
+        "Created with TexturePacker (https://www.codeandweb.com/texturepacker) for EaselJS"
+]
+
+}

src/page/index/Home/index.vue

@@ -40,6 +40,151 @@
             </div>
         </div>
         <div class="shadow" ref="shadow" :class="shown ? 'shown' : ''"></div>
+        <div class="background">
+            <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
+                <defs>
+                    <radialGradient
+                        id="Gradient1"
+                        cx="50%"
+                        cy="50%"
+                        fx="10%"
+                        fy="50%"
+                        r=".5"
+                    >
+                        <animate
+                            attributeName="fx"
+                            dur="34s"
+                            values="0%;3%;0%"
+                            repeatCount="indefinite"
+                        />
+                        <stop offset="0%" stop-color="#ff0" />
+                        <stop offset="100%" stop-color="#ff00" />
+                    </radialGradient>
+                    <radialGradient
+                        id="Gradient2"
+                        cx="50%"
+                        cy="50%"
+                        fx="10%"
+                        fy="50%"
+                        r=".5"
+                    >
+                        <animate
+                            attributeName="fx"
+                            dur="23.5s"
+                            values="0%;3%;0%"
+                            repeatCount="indefinite"
+                        />
+                        <stop offset="0%" stop-color="#0ff" />
+                        <stop offset="100%" stop-color="#0ff0" />
+                    </radialGradient>
+                    <radialGradient
+                        id="Gradient3"
+                        cx="50%"
+                        cy="50%"
+                        fx="50%"
+                        fy="50%"
+                        r=".5"
+                    >
+                        <animate
+                            attributeName="fx"
+                            dur="21.5s"
+                            values="0%;3%;0%"
+                            repeatCount="indefinite"
+                        />
+                        <stop offset="0%" stop-color="#f0f" />
+                        <stop offset="100%" stop-color="#f0f0" />
+                    </radialGradient>
+                </defs>
+                <rect
+                    x="0"
+                    y="0"
+                    width="100%"
+                    height="100%"
+                    fill="url(#Gradient1)"
+                >
+                    <animate
+                        attributeName="x"
+                        dur="20s"
+                        values="25%;0%;25%"
+                        repeatCount="indefinite"
+                    />
+                    <animate
+                        attributeName="y"
+                        dur="21s"
+                        values="0%;25%;0%"
+                        repeatCount="indefinite"
+                    />
+                    <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        from="0 50 50"
+                        to="360 50 50"
+                        dur="17s"
+                        repeatCount="indefinite"
+                    />
+                </rect>
+                <rect
+                    x="0"
+                    y="0"
+                    width="100%"
+                    height="100%"
+                    fill="url(#Gradient2)"
+                >
+                    <animate
+                        attributeName="x"
+                        dur="23s"
+                        values="-25%;0%;-25%"
+                        repeatCount="indefinite"
+                    />
+                    <animate
+                        attributeName="y"
+                        dur="24s"
+                        values="0%;50%;0%"
+                        repeatCount="indefinite"
+                    />
+                    <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        from="0 50 50"
+                        to="360 50 50"
+                        dur="18s"
+                        repeatCount="indefinite"
+                    />
+                </rect>
+                <rect
+                    x="0"
+                    y="0"
+                    width="100%"
+                    height="100%"
+                    fill="url(#Gradient3)"
+                >
+                    <animate
+                        attributeName="x"
+                        dur="25s"
+                        values="0%;25%;0%"
+                        repeatCount="indefinite"
+                    />
+                    <animate
+                        attributeName="y"
+                        dur="26s"
+                        values="0%;25%;0%"
+                        repeatCount="indefinite"
+                    />
+                    <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        from="360 50 50"
+                        to="0 50 50"
+                        dur="19s"
+                        repeatCount="indefinite"
+                    />
+                </rect>
+            </svg>
+            <h1>
+                Rucky's<br />
+                Toy.
+            </h1>
+        </div>
     </div>
 </template>
 <script>
@@ -110,6 +255,12 @@ export default {
                     name: "颜色归类",
                     active: false,
                 },
+                {
+                    fontIconCode: "&#xe60b;",
+                    target: "PushCoin",
+                    name: "推币游戏",
+                    active: false,
+                },
             ],
         };
     },
@@ -235,6 +386,13 @@ export default {
         // 	6px -18px 40px #f5c5cb inset, 11px -18px 40px #f0c1ef inset,
         // 	22px 7px 40px #d3c1f8 inset, 13px 17px 40px #c2c6fd inset;
     }
+    .background {
+        opacity: 0.15;
+        .paLayout(0,0,100%,100%,0);
+        svg {
+            .prLayout(100%,100%);
+        }
+    }
     .page__hd {
         padding: 30px 0 180px 0px !important;
         h1,
@@ -242,7 +400,10 @@ export default {
             position: relative;
             z-index: 10;
             text-align: center;
+            color: #fff;
             margin-top: 10px;
+            font-weight: 700;
+            mix-blend-mode: overlay;
         }
     }
     .dialog {

src/page/index/PushCoinGame/game/animation.js

@@ -0,0 +1,668 @@
+import 'gsap';
+
+class animation {
+	/**
+	 * @Author   rucky
+	 * @DateTime 2018-05-16
+	 * @param    {Object}   game [game object]
+	 * @param    {Object}   view [view object]
+	 * @param    {Object}   ani  [animations object]
+	 * @return   
+	 */
+	constructor(game,view,ani) {
+	  	this.game = game;
+	  	this.view = view;
+	  	this.ani  = ani;
+
+	  	this.init();
+	}
+	init(){
+		
+	}
+
+	commonBtnAni(target,callbacks,onStart){
+		if(this.game.buttonDisabled) return 
+		this.game.buttonDisabled = !this.game.buttonDisabled;
+        let timeline = new TimelineMax({
+        	onStart:()=>{
+        		onStart &&onStart();
+        		// !this.game.mute && createjs.Sound.play('button');
+        	},
+        	onComplete:()=>{
+        		timeline.kill();
+        		callbacks&&callbacks();
+        		this.game.buttonDisabled = !this.game.buttonDisabled;
+        	}});
+
+        timeline
+        .to(target,.4,{scaleX:target.scaleX*.9,scaleY:target.scaleY*.9})
+        .to(target,.2,{scaleX:target.scaleX,scaleY:target.scaleY})
+    }
+	/**
+	 * @Author   rucky
+	 * @DateTime 2018-05-16
+	 * @param    {Object}   argument [many prama]
+	 * {
+	 * 		now:          null,		//
+	 *      next:         null,
+	 *      effect:       'fade', 	//scale | translate | fade
+	 *      translateOut: false,
+	 *      translateIn:  false,
+	 *      scaleOut:     false,
+	 *      scaleIn:      false,
+	 *      direction:    'x', 	
+	 * }
+	 * @return   {null}
+	 */
+	changePage(argument){
+		let _default = {
+			now:          null,
+			next:         null,
+			effect:       'fade', 	//scale | translate | fade
+			translateOut: false,
+			translateIn:  false,
+			scaleOut:     false,
+			scaleIn:      false,
+			direction:    'x', 	
+			onStart:      function(){},
+			callbacks:    function(){},
+		}
+
+		let opts = Object.assign({}, _default, argument );
+
+		let timeLine = new TimelineMax({
+			onStart:()=>{
+				opts.onStart && opts.onStart();
+				// !this.game.mute && this.game.soundLoader && this.game.soundLoader.getResult('open') &&createjs.sound.play('open')
+			},
+			onComplete:()=>{
+				opts.callbacks && opts.callbacks();
+				timeLine.kill();
+			}
+		})
+		let hideData      = {alpha:0,autoAlpha:0};
+		let showStartData = {alpha:0,x:0,y:0,autoAlpha:0};
+		let showEndData   = {alpha:1,autoAlpha:1};
+
+
+		if(opts.effect == 'scale'){
+			hideData.scaleX = .99;
+			hideData.scaleY = .99;
+			showStartData.scaleX = .99;
+			showStartData.scaleY = .99;
+			showEndData.scaleX   = 1;
+			showEndData.scaleY   = 1;
+		}
+		if(opts.effect == 'translate'){
+			if(opts.direction == 'x')
+				hideData.x = -750;
+			else 
+				hideData.y = -1450;
+		
+			if(opts.direction == 'x'){
+				showStartData.x = 750;
+				showEndData.x   = 0;
+			}
+			else{
+				showStartData.y = 1450;
+				showEndData.y   = 0;
+			}
+		}
+		
+		if(opts.effect == 'translate' && opts.direction == 'y'){
+			timeLine
+			.to(opts.now,.6,hideData,'start')
+			.fromTo(opts.next,.6,showStartData,showEndData,'start')
+			// .to(this.game.gameView.interfaceBackground,.3,{y:-30},'start')
+			// .to(this.game.gameView.interfaceBackground,.5,{y:0},'start+=.3')
+		}else{
+			timeLine
+			.to(opts.now,.6,hideData,'start')
+			.fromTo(opts.next,.6,showStartData,showEndData,'start')
+		}
+	}
+
+	loadingAnimations(){
+		let A = {};
+		let view = this.game.loadingView;
+		//progress animation
+		let progress = {value : 0};
+
+		A.overProgress = TweenMax.to(progress,.5,{value:100,ease:Linear.easeNone,paused:true,
+			onUpdate:()=>{
+				view.loading_progress_text.text = Math.floor(progress.value)+'%';
+				view.loading_progress_bar.graphics.command.w = progress.value/100 * 376;
+			},
+			onComplete:()=>{
+				this.game.loadingAniEnding = true;
+			}
+		})
+
+		// console.log(view.loading_progress_bar.graphics)
+		TweenMax.to(progress,4,{value:86,ease:Linear.easeNone,
+			onUpdate:()=>{
+				view.loading_progress_text.text = Math.floor(progress.value)+'%';
+				view.loading_progress_bar.graphics.command.w = progress.value/100 * 376;
+			},
+			onComplete:()=>{
+				// this.game.loadingAniEnding = true;
+				if(this.game.mainResourceLoaded === true){
+					A.overProgress.play();
+				}else{
+					this.watch(this.game,'mainResourceLoaded',()=>{
+						if(this.game.mainResourceLoaded === true){
+							A.overProgress.play();
+						}
+					})
+				}
+			}
+		})
+
+		A.flashEye = new TimelineMax({repeat:-1,repeatDelay:1.5})
+		.fromTo([view.loading_eye_1,view.loading_eye_2],.6,{scaleY:1,alpha:1},{scaleY:.1,alpha:.5})
+		.to([view.loading_eye_1,view.loading_eye_2],.3,{scaleY:1,alpha:1})
+
+		// console.log(view.loading_bingo.parent.mask.x)
+
+		A.drawAni = new TimelineMax()
+		.fromTo(view.loading_pen,.6,
+			{x:view.loading_pen.ox,y:view.loading_pen.oy},
+			{x:view.loading_pen.ox+12,y:view.loading_pen.oy-8,ease:Linear.easeNone
+		},'start')
+		.fromTo(view.loading_bingo.parent.mask,.6,{x:-100},{x:-91,ease:Linear.easeNone},'start+=.2')
+
+		.to(view.loading_pen,.6,
+			{x:view.loading_pen.ox+36,y:view.loading_pen.oy+32,ease:Linear.easeNone}
+		,'start2')
+		.to(view.loading_bingo.parent.mask,.6,
+			{x:-54,ease:Linear.easeNone}
+		,'start2+=.15')
+
+		.to(view.loading_pen,.6,
+			{x:view.loading_pen.ox+96,y:view.loading_pen.oy-33,ease:Linear.easeNone}
+		,'start3')
+		.to(view.loading_bingo.parent.mask,.6,
+			{x:0,ease:Linear.easeNone}
+		,'start3')
+		.timeScale(.5)
+
+
+		return A
+	}
+
+	indexAnimations(){
+		let A = {};
+		let gameView = this.game.gameView;
+
+		//wait ani
+		A.waitLine = new TimelineMax({
+			paused:true,
+			repeat:-1,
+			yoyo:true
+		})
+
+		for(let i = 1; i < 10; i++){
+			A.waitLine
+			
+			.fromTo(gameView[`index_text_${i}`],Math.random() * 2 + 1,
+				{rotation:0},
+				{rotation:(Math.random()>.5?1:-1) * Math.random() * 10+5,ease:Linear.easeNone},
+				`start`
+			)
+			.to(gameView[`index_text_${i}`],Math.random() * 1 + 1,
+				{rotation:0,ease:Linear.easeNone},
+				`start2`
+			)
+		}
+
+		//show ani
+		A.textTimeLine = new TimelineMax({
+			paused:true
+		})
+
+		let speArr = [1,2,4,5],
+			speArr2= [6,7,8,9]
+		for(let i = 1; i < 10; i++){
+			let timelineSpan = new TimelineMax()
+			//text
+			.fromTo(gameView[`index_text_${i}`],1,
+				{y:gameView[`index_text_${i}`].oy-700,x:gameView[`index_text_${i}`].ox-200},
+				{y:gameView[`index_text_${i}`].oy,x:gameView[`index_text_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
+				`text_${i}`
+			)
+			//line
+			.fromTo(gameView[`index_line_${i}`],1,
+				{y:gameView[`index_line_${i}`].oy-700,x:gameView[`index_line_${i}`].ox-200},
+				{y:gameView[`index_line_${i}`].oy,x:gameView[`index_line_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
+				`text_${i}`
+			)
+			.fromTo(gameView[`index_text_${i}`],.5,
+				{rotation:0},
+				{rotation:-25},
+				`text_${i}+=.4`
+			)
+			.to(gameView[`index_text_${i}`],.6,
+				{rotation:0},
+				`text_${i}+=1`
+			)
+			.timeScale(2.2)
+			// if(speArr.indexOf(i) > -1){
+			// 	let index = speArr2[speArr.indexOf(i)];
+
+			// 	timelineSpan
+
+			// 	.fromTo(gameView[`index_text_${index}`],1,
+			// 		{y:gameView[`index_text_${index}`].oy-700},
+			// 		{y:gameView[`index_text_${index}`].oy,ease:Back.easeOut.config(1.2)},
+			// 		`text_${i}`
+			// 	)
+			// 	//line
+			// 	.fromTo(gameView[`index_line_${index}`],1,
+			// 		{y:gameView[`index_line_${index}`].oy-700},
+			// 		{y:gameView[`index_line_${index}`].oy,ease:Back.easeOut.config(1.2)},
+			// 		`text_${i}`
+			// 	)
+			// 	.fromTo(gameView[`index_text_${index}`],.5,
+			// 		{rotation:0},
+			// 		{rotation:-25},
+			// 		`text_${i}+=.4`
+			// 	)
+			// 	.to(gameView[`index_text_${index}`],.6,
+			// 		{rotation:0},
+			// 		`text_${i}+=1`
+			// 	)
+			// 	// timelineSpan.add(otherLine,'same_${i}')
+			// }
+			
+
+			A.textTimeLine.add(timelineSpan,`-=${i == 1 ? 0 : .6}`)
+			A.textTimeLine.timeScale(1.2)
+		}
+
+		//other show animations
+		A.textTimeLine
+		.fromTo(
+			gameView.index_robot,
+			.7,
+			{y:gameView.index_robot.oy-1400},
+			{y:gameView.index_robot.oy,ease:Back.easeOut.config(1.2),
+				onStart:()=>{
+					A.waitLine.play();
+				},
+				onComplete:()=>{
+					A.robotFloat = TweenMax.to(gameView.index_robot,1,{y:gameView.index_robot.oy+20,yoyo:true,repeat:-1})
+					A.askFloat = TweenMax.to(gameView.index_ask,1,{y:gameView.index_ask.oy+20,yoyo:true,repeat:-1})
+				}
+			},
+			'robot-=.3'
+		)
+		.fromTo(
+			gameView.index_ask,
+			.7,
+			{x:gameView.index_ask.ox-150,alpha:0},
+			{x:gameView.index_ask.ox,alpha:1,ease:Back.easeOut.config(1.2)},
+			'robot+=.2'
+		)
+		.fromTo(
+			gameView.index_btn,
+			.7,
+			{y:gameView.index_btn.oy-1400+122/2},
+			{y:gameView.index_btn.oy+122/2,ease:Back.easeOut.config(1.2),
+				onComplete:()=>{
+					A.robotFloat = TweenMax.to(gameView.index_btn,1,{scaleX:.95,scaleY:.95,ease:Elastic.easeOut.config(1, 0.3),yoyo:true,repeat:-1})
+				}
+			},
+			'robot-=.3'
+		)
+		.fromTo(
+			gameView.index_pipe,
+			.7,
+			{y:-800},
+			{y:gameView.index_pipe.oy,ease:Back.easeOut.config(1.2)},
+			'robot-=.3'
+		)
+		.fromTo(
+			[gameView.index_title,gameView.index_desc],
+			.7,
+			{alpha:0},
+			{alpha:1},
+			'robot+=.3'
+		)
+		.fromTo(
+			[gameView.index_stars_1],
+			.7,
+			{x:gameView.index_stars_1.ox+300,alpha:0},
+			{x:gameView.index_stars_1.ox,alpha:1},
+			'robot+=.3'
+		)
+		.fromTo(
+			[gameView.index_stars_2],
+			.7,
+			{x:gameView.index_stars_2.ox-300,alpha:0},
+			{x:gameView.index_stars_2.ox,alpha:1},
+			'robot+=.55'
+		)
+		.fromTo(
+			[gameView.index_stars_3],
+			.7,
+			{x:gameView.index_stars_3.ox-300,alpha:0},
+			{x:gameView.index_stars_3.ox,alpha:1},
+			'robot+=.625'
+		)
+		.fromTo(
+			[gameView.index_star_2],
+			.7,
+			{x:gameView.index_star_2.ox-300,alpha:0},
+			{x:gameView.index_star_2.ox,alpha:1},
+			'robot+=.7'
+		)
+		.fromTo(
+			[gameView.index_leida],
+			.7,
+			{x:gameView.index_leida.ox+300,alpha:0},
+			{x:gameView.index_leida.ox,alpha:1},
+			'robot+=.8'
+		)
+		.fromTo(
+			[gameView.index_star_1],
+			.7,
+			{x:gameView.index_star_1.ox+300,alpha:0},
+			{x:gameView.index_star_1.ox,alpha:1},
+			'robot+=.9'
+		)
+			
+
+
+		
+		// 暂停
+		A.pause = function(){
+			A.textTimeLine.pause();
+		}
+
+		// 开始
+		A.play = function(){
+			A.textTimeLine.play();
+		}
+
+
+		return A
+	}
+
+	createAnimations(){
+		let A = {},
+			gameView = this.game.gameView;
+
+		A.showTimeLine = new TimelineMax({
+			paused:true
+		})
+
+		for(let i = 1; i < 7; i++){
+
+			// console.log(gameView[`create_text_${i}`])
+			let timelineSpan = new TimelineMax()
+			//text
+			.fromTo(gameView[`create_text_${i}`],1,
+				{y:gameView[`create_text_${i}`].oy-100,x:gameView[`create_text_${i}`].ox-600},
+				{y:gameView[`create_text_${i}`].oy,x:gameView[`create_text_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
+				`text_${i}`
+			)
+			//line
+			.fromTo(gameView[`create_line_${i}`],1,
+				{y:gameView[`create_line_${i}`].oy-100,x:gameView[`create_line_${i}`].ox-600},
+				{y:gameView[`create_line_${i}`].oy,x:gameView[`create_line_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
+				`text_${i}`
+			)
+			.fromTo(gameView[`create_text_${i}`],.5,
+				{rotation:0},
+				{rotation:-25},
+				`text_${i}+=.4`
+			)
+			.to(gameView[`create_text_${i}`],.6,
+				{rotation:0},
+				`text_${i}+=1`
+			)
+			.timeScale(2)
+
+			A.showTimeLine.add(timelineSpan,`-=${i == 1? 0 : .55}`)
+		}
+
+
+		// 暂停
+		A.pause = function(){
+			A.showTimeLine.pause();
+		}
+
+		// 开始
+		A.play = function(){
+			A.showTimeLine.play();
+		}
+
+
+		return A
+	}
+
+	questionAnimations(target){
+		const A = {};
+
+		A.topAni = TweenMax.fromTo(target.topCartoon,2,{y:target.topCartoon.oy-16},{y:target.topCartoon.oy,yoyo:true,repeat:-1});
+
+		A.ld = TweenMax.fromTo(target.d_2,2,{x:target.d_2.ox-16},{x:target.d_2.ox,yoyo:true,repeat:-1});
+
+		A.star = TweenMax.fromTo(target.star,2,{rotation:0},{rotation:360,repeat:-1,ease:Linear.easeNone});
+
+		if(target.index == 1)
+			A.d_3 = TweenMax.fromTo(target.d_3,1.5,{y:target.d_3.oy-10,scaleX:1,scaleY:1},{y:target.d_3.oy,scaleX:.9,scaleY:.9,yoyo:true,repeat:-1});
+
+		if(target.index == 5)
+			A.d_4 = TweenMax.fromTo(target.d_4,1.5,{y:target.d_4.oy-10,scaleX:1,scaleY:1},{y:target.d_4.oy,scaleX:.9,scaleY:.9,yoyo:true,repeat:-1});
+
+		return A
+	}
+
+	showAnswerAnimation(target){
+		const A = {};
+
+		//ballLine
+		A.ballLine = new TimelineMax({paused:true,repeat:-1})
+		.to(target.ball_1,.5,{alpha:1})
+		.fromTo(target.ball_1,2,{x:302+12},{x:302+12+256,ease:SlowMo.ease.config(0.05, 0.7, true)},'start')
+		.fromTo(target.square,.4,{rotation:90},{rotation:90+360,ease:SlowMo.ease.config(0.05, 0.7, true)},'start+=.9')
+		.to(target.ball_1,.5,{alpha:0},'start+=1.9')
+		.fromTo(target.ball_2,.25,{alpha:0},{alpha:1},'start+=2.2')
+		.fromTo(target.ball_2,2,{x:302+12},{x:302+12+256,ease:SlowMo.ease.config(0.05, 0.7, true)},'start+=2.6')
+		.fromTo(target.square,.4,{rotation:90},{rotation:90+360},'start+=3.5')
+		.to(target.ball_2,.5,{alpha:0})
+
+
+
+		//show answer timeline
+		A.timeline = new TimelineMax({
+			onStart:()=>{
+				TweenMax.set(target.ball_2,{alpha:0})
+			},
+			onComplete:()=>{
+				A.ballLine.play();
+				A.float_1 = TweenMax.fromTo(target.star_1,2,{y:836},{y:836+10,yoyo:true,ease:Linear.easeNone,repeat:-1});
+				A.float_2 = TweenMax.fromTo(target.star_2,2,{y:441},{y:441+20,yoyo:true,ease:Linear.easeNone,repeat:-1,delay:1});
+				A.float_3 = TweenMax.fromTo(target.ld,2,{x:560},{x:560+15,yoyo:true,ease:Linear.easeNone,repeat:-1,delay:1.5});
+				A.btn = TweenMax.to(target.btn,1,{scaleX:.95,scaleY:.95,ease:Elastic.easeOut.config(1, 0.3),yoyo:true,repeat:-1,delay:2})
+			}
+		})
+		.fromTo(this.game.gameView.answerContainer,.4,{alpha:0},{alpha:1})
+		.fromTo(target.box,.45,{alpha:0,y:654},{alpha:1,y:354,ease:Back.easeOut.config(1.2)},'shown_1')
+		.fromTo(target.answer,.45,{alpha:0,y:363+98/2-200,scaleX:2,scaleY:2},{alpha:1,y:363+98/2,ease:Back.easeOut.config(1.2),scaleX:1,scaleY:1},'shown_1+=.2')
+		.fromTo(target.pipe,.55,{alpha:0,/*x:469-100,*/y:959-300},{alpha:1/*,x:469*/,y:959,ease:Back.easeOut.config(1.1)},'shown_2')
+		.fromTo(target.btn,.55,{alpha:0,/*x:221+318/2-100,*/y:1070+122/2-300},{alpha:1/*,x:221+318/2*/,y:1070+122/2,ease:Back.easeOut.config(1.1)},'shown_2')
+		.fromTo(target.answer_text,.55,{alpha:0,y:571+100},{alpha:1,y:571,ease:Back.easeOut.config(0)},'shown_3-=.3')
+		.fromTo(target.ld,.55,{alpha:0,x:560+200},{alpha:1,x:560,ease:Back.easeOut.config(1.1)},'shown_3-=.2')
+		.fromTo(target.star_1,.55,{alpha:0,x:96-200},{alpha:1,x:96,ease:Back.easeOut.config(1.1)},'shown_3-=.2')
+		.fromTo(target.star_2,.55,{alpha:0,x:491+100},{alpha:1,x:491,ease:Back.easeOut.config(1.1)},'shown_3-=.2')
+		.staggerFromTo([target.ball_1,target.ball_2,target.ban,target.square],.45,{alpha:0,scaleX:1.4,scaleY:1.4},{scaleX:1,scaleY:1,alpha:1,ease:Back.easeOut.config(1.1)},.1,'shown_3-=.1')
+
+
+		return A
+	}
+
+	//zhane result page ani
+	zhaneResultAnimations(){
+		let A = {};
+		let gameView = this.game.gameView;
+
+		//wait ani
+		A.waitLine = new TimelineMax({
+			paused:true,
+			repeat:-1,
+			yoyo:true
+		})
+
+		for(let i = 1; i < 10; i++){
+			A.waitLine
+			
+			.fromTo(gameView[`zhane_index_text_${i}`],Math.random() * 2 + 1,
+				{rotation:0},
+				{rotation:(Math.random()>.5?1:-1) * Math.random() * 10+5,ease:Linear.easeNone},
+				`start`
+			)
+			.to(gameView[`zhane_index_text_${i}`],Math.random() * 1 + 1,
+				{rotation:0,ease:Linear.easeNone},
+				`start2`
+			)
+		}
+
+		//show ani
+		A.textTimeLine = new TimelineMax({
+			paused:false,
+			delay: 1
+		})
+
+		.fromTo(
+			[gameView.zhane_index_title],
+			.7,
+			{x:0,alpha:0},
+			{x:gameView.zhane_index_title.ox+399/2,alpha:1,onComplete:()=>{
+				A.flash = TweenMax.to(gameView.zhane_index_title,.6,{scaleX:1.1,scaleY:1.1,ease:Back.easeOut.config(1.2),yoyo:true,repeat:-1})
+			}},
+			'start1'
+		)
+		.fromTo(
+			gameView.zhane_index_btn,
+			.7,
+			{y:gameView.zhane_index_btn.oy+500+122/2},
+			{y:gameView.zhane_index_btn.oy+122/2,ease:Back.easeOut.config(1.2),
+				onStart:()=>{
+					// A.waitLine.play();
+				},
+				onComplete:()=>{
+					A.robotFloat = TweenMax.to(gameView.zhane_index_btn,1,{scaleX:.95,scaleY:.95,ease:Elastic.easeOut.config(1, 0.3),yoyo:true,repeat:-1})
+				}
+			},
+			'start1+=.4'
+		)
+
+		let speArr = [1,2,4,5],
+			speArr2= [6,7,8,9]
+		for(let i = 1; i < 10; i++){
+			let timelineSpan = new TimelineMax()
+			//text
+			.fromTo(gameView[`zhane_index_text_${i}`],1,
+				{y:gameView[`zhane_index_text_${i}`].oy-700,x:gameView[`zhane_index_text_${i}`].ox-200},
+				{y:gameView[`zhane_index_text_${i}`].oy,x:gameView[`zhane_index_text_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
+				`text_${i}`
+			)
+			//line
+			.fromTo(gameView[`zhane_index_line_${i}`],1,
+				{y:gameView[`zhane_index_line_${i}`].oy-700,x:gameView[`zhane_index_line_${i}`].ox-200},
+				{y:gameView[`zhane_index_line_${i}`].oy,x:gameView[`zhane_index_line_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
+				`text_${i}`
+			)
+			.fromTo(gameView[`zhane_index_text_${i}`],.5,
+				{rotation:0},
+				{rotation:-25},
+				`text_${i}+=.4`
+			)
+			.to(gameView[`zhane_index_text_${i}`],.6,
+				{rotation:0},
+				`text_${i}+=1`
+			)
+			.timeScale(2.2)
+			
+
+			A.textTimeLine.add(timelineSpan,`-=${i == 1 ? 0 : .6}`)
+			A.textTimeLine.timeScale(1.2)
+		}
+
+		//other show animations
+		A.textTimeLine
+		
+		
+		// .fromTo(
+		// 	gameView.index_pipe,
+		// 	.7,
+		// 	{y:-800},
+		// 	{y:gameView.index_pipe.oy,ease:Back.easeOut.config(1.2)},
+		// 	'robot-=.3'
+		// )
+		
+		.fromTo(
+			[gameView.zhane_index_stars_1],
+			.7,
+			{x:gameView.zhane_index_stars_1.ox+300,alpha:0},
+			{x:gameView.zhane_index_stars_1.ox,alpha:1,onComplete:()=>{
+				A.waitLine.play();
+			}},
+			'robot+=.3'
+		)
+		.fromTo(
+			[gameView.zhane_index_stars_2],
+			.7,
+			{x:gameView.zhane_index_stars_2.ox-300,alpha:0},
+			{x:gameView.zhane_index_stars_2.ox,alpha:1},
+			'robot+=.55'
+		)
+		.fromTo(
+			[gameView.zhane_index_stars_3],
+			.7,
+			{x:gameView.zhane_index_stars_3.ox-300,alpha:0},
+			{x:gameView.zhane_index_stars_3.ox,alpha:1},
+			'robot+=.625'
+		)
+		.fromTo(
+			[gameView.zhane_index_star_2],
+			.7,
+			{x:gameView.zhane_index_star_2.ox-300,alpha:0},
+			{x:gameView.zhane_index_star_2.ox,alpha:1},
+			'robot+=.7'
+		)
+		.fromTo(
+			[gameView.zhane_index_leida],
+			.7,
+			{x:gameView.zhane_index_leida.ox+300,alpha:0},
+			{x:gameView.zhane_index_leida.ox,alpha:1},
+			'robot+=.8'
+		)
+		.fromTo(
+			[gameView.zhane_index_star_1],
+			.7,
+			{x:gameView.zhane_index_star_1.ox+300,alpha:0},
+			{x:gameView.zhane_index_star_1.ox,alpha:1},
+			'robot+=.9'
+		)
+			
+
+
+		
+		// 暂停
+		A.pause = function(){
+			A.textTimeLine.pause();
+		}
+
+		// 开始
+		A.play = function(){
+			A.textTimeLine.play();
+		}
+
+
+		return A
+	}
+}
+module.exports = animation;

src/page/index/PushCoinGame/game/createView.js

@@ -0,0 +1,496 @@
+import frameData from './frameData';
+import maskCreater from './maskCreater';		//mask creater
+
+/**
+ * 
+ * @method 
+ * @desc   -  a creater for game view
+ * @param argument{
+ *		@param {Object}  game         - find game object 				
+ *		@param {Object}  loader       - find game loader		
+ *		@param {Object}  layout       - find layout object		
+ *		@param {Boolean} sprite       - is sprite ? 
+ *		@param {Object}  circle       - draw circle param 
+ *		@param {String}  layId        - layout id 
+ *		@param {String}  imgId        - img id
+ *		@param {Number}  x            - obj x-pos
+ *		@param {Number}  y            - obj y-pos
+ *		@param {Number}  width        - createjs rect width
+ *	    @param {Number}  height       - createjs rect height
+ *	    @param {String}  bg           - createjs rect background
+ *		@param {Number}  regX         - animation orgin x
+ *		@param {Number}  regY         - animation orgin y
+ *		@param {Number}  scaleX       - obj scale x
+ *		@param {Number}  scaleY       - obj scale y
+ *		@param {Number}  moved        - obj can move or no
+ *		@param {Number}  vx           - obj x move speed
+ *		@param {Number}  alpha        - obj alpha
+ *		@param {Number}  type         - obj type --- 1 normal / 2 ding / 3 break / 4 word-1 / 5 word -2
+ *		@param {Boolean} visible      - obj visible
+ *		@param {Number}  framesName   - sprite frames name
+ *		@param {String}  aniName      - sprite name
+ *		@param {String}  ani_1        - sprite aniamtions name - 1
+ *		@param {String}  container    - addchild container
+ *		@param {String}  textBaseline - text base line
+ *	    @param {String}  textAlign    - text align
+ *	    @param {String}  textColor    - text color
+ *	    @param {String}  textSize     - text size
+ *	    @param {Boolean} shadow       - show text shadow true or false
+ *	    @param {Boolean} shadowColor  - text shadow color
+ *	    @param {Boolean} shadowOffsetX- text shadow offsetX
+ *	    @param {Boolean} shadowOffsetY- text shadow offsetY
+ *	    @param {Boolean} shadowBlur   - text shadow blur
+ *	    @param {Number}  cacheX       - cache Text X
+ *		@param {Number}  cacheY       - cache Text Y
+ *		@param {Number}  cacheW       - cache Text width
+ *		@param {Number}  cacheH       - cache Text height
+ *	}
+ *	
+ */
+
+
+const creater = function (argument) {
+	let _default = {
+		game: null,
+		loader: null,
+		layout: null,
+		sprite: false,
+		single: false,
+		empty: false,
+		layId: '',
+		imgId: '',
+		name: '',
+		ox: 0,
+		oy: 0,
+		x: 0,
+		y: 0,
+		width: 750,
+		height: 1334,
+		rotation: 0,
+		bg: 'rgba(255,255,255,1)',
+		regX: 0,
+		regY: 0,
+		visible: true,
+		hide: false,
+		moved: 0,
+		vx: 1,
+		circle: {
+			visible: false,
+			sector: false,
+			startAngle: 0,
+			endAngle: Math.PI * 2,
+		},
+		circleLine: {
+			visible: false,
+			borderWidth: 2,
+			color: '#ffffff',
+		},
+		mask: {
+			visible: false,
+			x: 0,
+			y: 0,
+			r: 0,
+			p: null,
+			debug: false
+		},
+		scaleX: 1,
+		scaleY: 1,
+		alpha: 1,
+		type: 0,
+		framesName: '',
+		defaultAni: 'default',
+		container: '',
+		rect: {
+			x: 0,
+			y: 0,
+			borderWidth: 1,
+			p: null,
+			blurFilter: false
+		},
+		text: {
+			visible: false,
+			word: "",
+			baseline: "alphabetic",
+			align: "center",
+			color: "#ffffff",
+			size: "26px fzzt",
+			lineHeight: "30"
+		},
+		singleSprite: {
+			visible: false,
+			parent: {},
+			name: ''
+		},
+		shadow: false,
+		shadowColor: '#dddddd',
+		roCenter: false,
+		shadowOffsetX: 0,
+		shadowOffsetY: 0,
+		shadowBlur: 2,
+		cacheX: 0,
+		cacheY: 0,
+		cacheW: 750,
+		cacheH: 1334,
+		return: false,
+		mouseEnabled: true,
+		compositeOperation: ''
+	}
+
+	let maskObj = Object.assign({}, _default.mask, argument.mask);
+	let textObj = Object.assign({}, _default.text, argument.text);
+	let rectObj = Object.assign({}, _default.rect, argument.rect);
+	let circleObj = Object.assign({}, _default.circle, argument.circle);
+	let singleSpriteObj = Object.assign({}, _default.singleSprite, argument.singleSprite);
+	let circleLineObj = Object.assign({}, _default.circleLine, argument.circleLine);
+
+
+	let opts = Object.assign({}, _default, argument);
+	opts.mask = maskObj;
+	opts.text = textObj;
+	opts.rect = rectObj;
+	opts.circle = circleObj;
+	opts.circleLine = circleLineObj;
+	opts.singleSprit = singleSpriteObj;
+
+	// console.log(opts.layId,opts.imgId)
+	//雪碧图单帧
+	if (opts.singleSprite.visible) {
+		// console.log(opts.singleSprite.parent,opts.singleSprite.name)
+		opts.layout[opts.layId] = new createjs.Sprite(opts.singleSprite.parent.spriteSheet, opts.singleSprite.name).set({
+			x: opts.x + (opts.roCenter ? opts.width / 2 : 0),
+			y: opts.y + (opts.roCenter ? opts.height / 2 : 0),
+			ox: opts.ox ? opts.ox : opts.x + (opts.roCenter ? opts.width / 2 : 0),
+			oy: opts.oy ? opts.oy : opts.y + (opts.roCenter ? opts.height / 2 : 0),
+			regX: opts.regX + (opts.roCenter ? opts.width / 2 : 0),
+			regY: opts.regY + (opts.roCenter ? opts.height / 2 : 0),
+			type: opts.type,
+			tindex: opts.tindex,
+			hide: opts.hide,
+			state: opts.state,
+			scaleX: opts.scaleX,
+			scaleY: opts.scaleY,
+			rotation: opts.rotation,
+			width: opts.width,
+			height: opts.height,
+			name: opts.name || opts.layId,
+			moved: opts.moved,
+			vx: opts.vx,
+			sp: opts.sp,
+			hs: opts.hs,
+			alpha: opts.alpha,
+			visible: opts.visible,
+			mask: opts.mask.visible ? shape : null,
+			mouseEnabled: opts.mouseEnabled
+		});
+		if (opts.maskAnimation) {
+			opts.maskContainer = new createjs.Container();
+
+			if (opts.transform)
+				opts.layout[opts.layId].setTransform(...opts.transform);
+
+
+			opts.maskContainer.mask = new maskCreater(opts.mask.name, opts.mask.type, opts.mask.transform);
+			opts.maskContainer.compositeOperation = opts.compositeOperation;
+			opts.maskContainer.addChild(opts.layout[opts.layId]);
+		}
+	}
+	//帧动画
+	else if (opts.sprite) {
+		let img = opts.loader.getResult(opts.imgId);
+		var spriteSheet = new createjs.SpriteSheet({
+			images: [img],
+			frames: frameData[opts.framesName].frames,
+			animations: opts.animations
+		});
+
+		opts.layout[opts.layId] = new createjs.Sprite(spriteSheet, opts.defaultAni).set({
+			x: opts.x + (opts.roCenter ? opts.width / 2 : 0),
+			y: opts.y + (opts.roCenter ? opts.height / 2 : 0),
+			// width:  frameData[opts.framesName].sourceW,
+			// height: frameData[opts.framesName].sourceH,
+			ox: opts.ox ? opts.ox : opts.x + (opts.roCenter ? opts.width / 2 : 0),
+			oy: opts.oy ? opts.oy : opts.y + (opts.roCenter ? opts.height / 2 : 0),
+			regX: opts.regX + (opts.roCenter ? opts.width / 2 : 0),
+			regY: opts.regY + (opts.roCenter ? opts.height / 2 : 0),
+			type: opts.type,
+			state: opts.state,
+			scaleX: opts.scaleX,
+			scaleY: opts.scaleY,
+			name: opts.name || opts.layId,
+			compositeOperation: opts.compositeOperation,
+			alpha: opts.alpha
+		});
+	} else if (opts.maskAnimation) {
+		//遮罩动画
+		opts.maskContainer = new createjs.Container();
+		let img = opts.loader.getResult(opts.imgId);
+
+		opts.layout[opts.layId] = new createjs.Bitmap(img).setTransform(...opts.transform).set({
+			alpha: opts.alpha,
+			ox: opts.ox,
+			oy: opts.oy
+		});
+
+		opts.maskContainer.mask = new maskCreater(opts.mask.name, opts.mask.type, opts.mask.transform);
+		opts.maskContainer.compositeOperation = opts.compositeOperation;
+		opts.maskContainer.addChild(opts.layout[opts.layId]);
+
+	} else if (opts.text.visible) {
+		//文字
+		let shape;
+		if (opts.mask.visible) {
+			let g = new createjs.Graphics();
+			shape = new createjs.Shape().set({
+				graphics: g.drawRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height),
+				x: opts.mask.x,
+				y: opts.mask.y,
+			});
+		}
+		let shadow = opts.shadow ? new createjs.Shadow(opts.shadowColor, opts.shadowOffsetX, opts.shadowOffsetY, opts.shadowBlur) : null;
+
+		opts.layout[opts.layId] = new createjs.Text(opts.text.word, opts.text.size, opts.text.color).set({
+			x: opts.x,
+			y: opts.y,
+			ox: opts.ox ? opts.ox : opts.x,
+			oy: opts.oy ? opts.oy : opts.y,
+			regX: opts.regX,
+			regY: opts.regY,
+			scaleX: opts.scaleX,
+			scaleY: opts.scaleY,
+			alpha: opts.alpha,
+			shadow: shadow,
+			name: opts.name || opts.layId,
+			mask: opts.mask.visible ? shape : null,
+			lineHeight: opts.text.lineHeight,
+			textBaseline: opts.text.baseline,
+			textAlign: opts.text.align,
+			mouseEnabled: opts.mouseEnabled
+		})
+		// console.log(opts.layout[opts.layId])
+		opts.game.webGL && opts.cacheContainer.addChild(opts.layout[opts.layId])
+		opts.game.webGL && opts.cacheContainer.cache(opts.cacheX, opts.cacheY, opts.cacheW, opts.cacheH);
+	} else if (opts.rect.visible) {
+		//Graphics rect
+		let g = new createjs.Graphics();
+
+		// if (opts.mask.visible) {
+		// 	let g2 = new createjs.Graphics();
+		// 	shape = new createjs.Shape().set({
+		// 		graphics: opts.mask.p ? g2.p(opts.mask.p) : g2.drawRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height),
+		// 		x: opts.x,
+		// 		y: opts.y,
+		// 	});
+		// }
+
+		let graphics;
+		if (opts.rect.blurFilter) {
+			graphics = g.beginBitmapFill(opts.loader.getResult(opts.imgId), 'no-repeat')
+				.drawRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height)
+
+		} else {
+			// console.log(opts.rect)
+			if (opts.rect.round && opts.rect.roundLine)
+				graphics = g.setStrokeStyle(opts.rect.borderWidth).f(opts.bg).s(opts.rect.bg).drawRoundRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height, opts.rect.r).es();
+			else if (opts.rect.round)
+				graphics = g.f(opts.bg).drawRoundRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height, opts.rect.r)
+			else if (opts.rect.roundLine)
+				graphics = g.setStrokeStyle(opts.rect.borderWidth).f(opts.bg).s(opts.rect.bg).drawRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height).es();
+			else if (opts.rect.p)
+				graphics = g.p(opts.rect.p);
+			else
+				graphics = g.f(opts.bg).drawRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height);
+		}
+
+		//create shape
+		opts.layout[opts.layId] = new createjs.Shape().set({
+			graphics: graphics,
+			x: opts.x,
+			y: opts.y,
+			regX: opts.regX,
+			regY: opts.regY,
+			alpha: opts.alpha,
+			name: opts.name || opts.layId,
+			mouseEnabled: opts.mouseEnabled
+		});
+
+		opts.layout[opts.layId].mask = new maskCreater(opts.mask.name, opts.mask.type, opts.mask.transform);
+
+		if (opts.rect.blurFilter) {
+			let blurFilter = new createjs.BlurFilter(10, 10, 10);
+			opts.layout[opts.layId].filters = [blurFilter];
+			opts.layout[opts.layId].cache(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height);
+		}
+
+		opts.game.webGL && opts.cacheContainer.addChild(opts.layout[opts.layId])
+		opts.game.webGL && opts.cacheContainer.cache(opts.cacheX, opts.cacheY, opts.cacheW, opts.cacheH);
+	}
+	else if (opts.circle.visible) {
+		//Graphics circle
+		let g = new createjs.Graphics();
+		let angle, startAngle, endAngle, x1 = 0, y1 = 0;
+		if (opts.circle.sector) {	//画扇形
+			angle = (Math.abs(opts.circle.angle) > 360) ? 360 : opts.circle.angle;
+			startAngle = opts.circle.startAngle * Math.PI / 180;
+			endAngle = opts.circle.startAngle + angle * Math.PI / 180;
+			x1 = opts.circle.x + opts.circle.r * Math.cos(startAngle);
+			y1 = opts.circle.x + opts.circle.r * Math.sin(startAngle);
+		}
+
+		opts.layout[opts.layId] = new createjs.Shape().set({
+			graphics: g.f(opts.bg).moveTo(opts.circle.x, opts.circle.y).arc(opts.circle.x, opts.circle.y, opts.circle.r, startAngle ? startAngle : 0, endAngle ? endAngle : Math.PI * 2).endFill(),
+			x: opts.x + (opts.roCenter ? opts.circle.r : 0),
+			y: opts.y + (opts.roCenter ? opts.circle.r : 0),
+			regX: opts.regX + (opts.roCenter ? opts.circle.r : 0),
+			regY: opts.regY + (opts.roCenter ? opts.circle.r : 0),
+			rotation: opts.rotation,
+			alpha: opts.alpha,
+			name: opts.name || opts.layId,
+			mouseEnabled: opts.mouseEnabled
+		});
+		// opts.game.webGL && opts.cacheContainer.addChild(opts.layout[opts.layId])
+		// opts.game.webGL && opts.cacheContainer.cache(opts.cacheX,opts.cacheY,opts.cacheW,opts.cacheH);
+	}
+	else if (opts.circleLine.visible) {
+		//circle line
+		let g = new createjs.Graphics();
+
+		opts.layout[opts.layId] = new createjs.Shape().set({
+			graphics: g.setStrokeStyle(opts.circleLine.borderWidth).s(opts.circleLine.color).arc(opts.circleLine.x, opts.circleLine.y, opts.circleLine.r, opts.circleLine.startAngle, opts.circleLine.endAngle).endFill(),
+			x: opts.x + (opts.roCenter ? opts.circleLine.r : 0),
+			y: opts.y + (opts.roCenter ? opts.circleLine.r : 0),
+			regX: opts.regX + (opts.roCenter ? opts.circleLine.r : 0),
+			regY: opts.regY + (opts.roCenter ? opts.circleLine.r : 0),
+			rotation: opts.rotation,
+			alpha: opts.alpha,
+			name: opts.name || opts.layId,
+			mouseEnabled: opts.mouseEnabled
+		});
+
+		// opts.game.webGL && opts.cacheContainer.addChild(opts.layout[opts.layId])
+		// opts.game.webGL && opts.cacheContainer.cache(opts.cacheX,opts.cacheY,opts.cacheW,opts.cacheH);
+	}
+	else if (opts.bitmapShap) {
+		let g = new createjs.Graphics();
+		let img = opts.loader.getResult(opts.imgId);
+		opts.layout[opts.layId] = new createjs.Shape().set({
+			graphics: g.beginBitmapFill(img, "no-repeat").drawRect(0, 0, opts.width, opts.height),
+			x: opts.x,
+			y: opts.y,
+			scaleX: opts.scaleX,
+			scaleY: opts.scaleY,
+			alpha: opts.alpha,
+			name: opts.name || opts.layId,
+			mouseEnabled: false
+		});
+		// (opts.game.webGL || opts.game.needCache) && opts.cacheContainer.cache(opts.cacheX,opts.cacheY,opts.cacheW,opts.cacheH);
+	}
+	else if (opts.bitmapCircle) {
+		let g = new createjs.Graphics();
+		let img;
+		if (typeof (opts.imgId) == 'object') {
+			if (opts.imgId.other) {
+				img = opts.game.friend.loadedPhoto;
+			}
+			else if (opts.imgId.fighter) {
+				img = opts.imgId.fighter
+			}
+			else {
+				img = opts.game.userinfo.loadedPhoto
+			}
+		} else {
+			img = opts.loader.getResult(opts.imgId)
+		}
+		opts.layout[opts.layId] = new createjs.Shape().set({
+			graphics: g.beginBitmapFill(img, "no-repeat").drawCircle(opts.circle.x, opts.circle.y, opts.circle.r),
+			x: opts.x,
+			y: opts.y,
+			scaleX: opts.scaleX,
+			scaleY: opts.scaleY,
+			alpha: opts.alpha,
+			name: opts.name || opts.layId,
+			mouseEnabled: false
+		});
+		// (opts.game.webGL || opts.game.needCache) && opts.cacheContainer.cache(opts.cacheX,opts.cacheY,opts.cacheW,opts.cacheH);
+	}
+	else {
+		//图
+		let img = opts.loader.getResult(opts.imgId);
+		//taikohui userphoto
+		let shape;
+		if (opts.mask.visible) {
+			let g = new createjs.Graphics();
+			shape = new createjs.Shape().set({
+				graphics: g.drawRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height),
+				x: opts.x,
+				y: opts.y,
+			});
+		}
+		opts.layout[opts.layId] = new createjs.Bitmap(img).set({
+			x: opts.x + (opts.roCenter ? opts.width / 2 : 0),
+			y: opts.y + (opts.roCenter ? opts.height / 2 : 0),
+			ox: opts.ox ? opts.ox : opts.x,
+			oy: opts.oy ? opts.oy : opts.y,
+			width: opts.width ? opts.width : img.width,
+			height: opts.height ? opts.height : img.height,
+			regX: opts.regX + (opts.roCenter ? opts.width / 2 : 0),
+			regY: opts.regY + (opts.roCenter ? opts.height / 2 : 0),
+			rotation: opts.rotation,
+			visible: opts.visible,
+			scaleX: opts.scaleX,
+			scaleY: opts.scaleY,
+			type: opts.type,
+			moved: opts.moved,
+			name: opts.name || opts.layId,
+			vx: opts.vx,
+			hide: opts.hide,
+			state: opts.state,
+			mask: opts.mask.visible ? shape : null,
+			alpha: opts.alpha,
+			mouseEnabled: opts.mouseEnabled
+		});
+	}
+
+	if (opts.mask.visible) {
+		let shape;
+		let g = new createjs.Graphics();
+		if (opts.mask.graph == 'rect') {
+			shape = new createjs.Shape().set({
+				graphics: g.drawRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height),
+				// x : opts.mask.x,
+				// y : opts.mask.y,
+			});
+		}
+		else if (opts.mask.graph == 'rectRound') {
+			shape = new createjs.Shape().set({
+				graphics: g.drawRoundRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height, opts.mask.r)
+			});
+		}
+		else {
+			shape = new createjs.Shape().set({
+				graphics: g.drawCircle(0, 0, opts.mask.r),
+				x: opts.mask.x,
+				y: opts.mask.y,
+			});
+		}
+
+		opts.layout[opts.layId].mask = shape;
+	}
+
+	if (!opts.return) {
+		let target = opts.layout[opts.layId];
+
+		if ((opts.text.visible || opts.rect.visible) && opts.game.webGL) {
+			target = opts.cacheContainer
+		} else {
+			opts.maskContainer
+		}
+
+		opts.container.addChild(target)
+		// opts.container.addChild(opts.text.visible || opts.rect.visible ? opts.cacheContainer : opts.maskAnimation ? opts.maskContainer : opts.layout[opts.layId])
+	}
+
+
+
+	return opts.layout[opts.layId]
+}
+module.exports = creater;

src/page/index/PushCoinGame/game/frameData.js

@@ -0,0 +1,44 @@
+/*================================*/
+/*============= 帧数据 ============*/
+/*================================*/
+const framesData = {
+	'loading': {
+		"sourceW": 1506,
+		"sourceH": 1837,
+		"frames": [
+			[1, 1, 645, 32, 0, 0, 0],
+			[648, 1, 359, 419, 0, 0, 0],
+			[1, 422, 395, 520, 0, 0, 0],
+			[398, 35, 246, 84, 0, 0, 0],
+			[1, 35, 392, 334, 0, 0, 0],
+			[398, 121, 243, 28, 0, 0, 0],
+			[643, 121, 3, 3, 0, 0, 0],
+			[643, 126, 3, 3, 0, 0, 0],
+			[1, 371, 37, 41, 0, 0, 0],
+			[1, 414, 4, 3, 0, 0, 0],
+			[7, 414, 4, 3, 0, 0, 0],
+			[40, 371, 402, 32, 0, 0, 0],
+			[40, 405, 15, 15, 0, 0, 0],
+			[57, 405, 14, 14, 0, 0, 0],
+			[73, 405, 10, 12, 0, 0, 0],
+			[85, 405, 11, 11, 0, 0, 0],
+			[98, 405, 10, 10, 0, 0, 0],
+			[110, 405, 10, 10, 0, 0, 0],
+			[122, 405, 7, 8, 0, 0, 0],
+			[131, 405, 7, 8, 0, 0, 0],
+			[140, 405, 10, 7, 0, 0, 0],
+			[152, 405, 8, 7, 0, 0, 0],
+			[1, 944, 30, 30, 0, 0, 0],
+			[1, 976, 26, 25, 0, 0, 0],
+			[29, 976, 21, 23, 0, 0, 0],
+			[33, 944, 385, 28, 0, 0, 0],
+			[52, 974, 328, 28, 0, 0, 0],
+			[382, 974, 23, 22, 0, 0, 0],
+			[407, 974, 19, 19, 0, 0, 0],
+			[444, 151, 171, 167, 0, 0, 0],
+			[398, 422, 392, 334, 0, 0, 0],
+			[428, 758, 306, 244, 0, 0, 0]
+		],
+	}
+}
+module.exports = framesData;

src/page/index/PushCoinGame/game/index.js

@@ -0,0 +1,369 @@
+import STAGE from "./stage";
+import LAYOUT from "./view";
+import { gsap } from "gsap";
+import Resource from "./preload";
+import utils from '@/utils/index.js';
+import Matter from 'matter-js';
+import decomp from 'poly-decomp';
+
+
+class game {
+    // 构造器
+    constructor() {
+        // 开始debug
+        this.debug = process.env.NODE_ENV === "development" ? true : false;       // process.env !== "production", // 游戏测试模式是否开启
+        // 需要显示的页面
+        this.showPageIndex = 0;  // 0 loading | 1 story  | 2 rule | 3 game index | 4 result | 5 poster
+        this.needUpdate = true;
+
+        this.scene = 1;   // 1 - loading | 2 - index
+
+        this.webGL = true;//window.deviceInfo.system == 'IOS' ? true : false;  // 是否开启webGL
+
+        this.momentFPS = [];
+
+        this.averageFPS = 60;  //平均帧率
+
+        this.nowPlayingAnimation = null;  // 当前正在播放的动画
+
+        this.playingSound = null; // 当前正在播放的声音
+
+        this.afterResLoadedStatus = false;    // 语言资源全部加载完毕状态
+
+        this.otherLoadedStatus = false;  // 对应语言剩余资源全部加载完毕状态
+
+        this.langConfig = { id: 2 };  //语言配置 默认为普通话
+
+        this.playingSounds = [];   // 将播放过的音频推入数据记录
+
+        // 选择语言后的后置资源加载
+        this.afterLoaderArr = [];
+
+        // 备用资源加载 更多反应资源加载
+        this.otherLoaderArr = [];
+
+        this.utils = utils;
+
+        // init Matter
+        this.Matter = Matter;
+        this.Engine = Matter.Engine,
+            this.Render = Matter.Render,
+            this.Runner = Matter.Runner,
+            this.Bodies = Matter.Bodies,
+            this.Composite = Matter.Composite;
+        Matter.Common.setDecomp(decomp)
+    }
+
+    // 初始化
+    init(pointer) {
+        this.vue = pointer;
+        // 初始化画布
+        this.stage = new STAGE().createStage(this);
+        //实例化layout
+        this.VIEW = new LAYOUT(this);
+
+        // 保存帧率
+        // this.saveMomentFPS = setInterval(() => {
+        //     if (this.FPS > 30)
+        //         this.momentFPS.push(this.FPS)
+        //     // console.log(this.momentFPS.length)
+        //     if (this.momentFPS.length > 20)
+        //         this.momentFPS.shift();
+        // }, 10);
+
+
+        // 绑定事件
+        // this.bindEvents();
+
+
+        // 初始化主资源加载器
+        this.loadingRes();
+
+        // 初始化物理引擎
+        this.initMatterEngine();
+
+    }
+
+    // 开发debug模式
+    devDebugMode() {
+
+    }
+
+    loadingRes() {
+        this.loadingLoader = utils.preload({
+            imgList: Resource.before.imgList,
+            // audioList: Resource.main.audioList,
+            loadStart: () => {
+                // console.log(this.VIEW.loading_progress_bar.graphics.command.w)
+            },
+            progressCallBack: (progress) => {
+                // progress;  // 0.99   
+
+
+            },
+            completeCallBack: (result) => {
+                // all loaded triger
+                // 初始化 loading 界面
+                this.gameView = this.VIEW.loading(this);
+                this.VIEW.createLoadingParticle();
+                this.scene = 1;
+                this.loadMainRes();
+            },
+        });
+    }
+
+    // 主资源
+    loadMainRes() {
+        this.mainLoader = utils.preload({
+            imgList: Resource.main.imgList,
+            // audioList: Resource.main.audioList,
+            loadStart: () => {
+                this.scene = 2;
+                // console.log(this.VIEW.loading_progress_bar.graphics.command.w)
+            },
+            progressCallBack: (progress) => {
+                // progress;  // 0.99
+                console.log()
+                gsap.to(this.VIEW.loading_progress_bar.graphics.command, {
+                    w: 30 + 432 * progress,
+                    duration: 0.1,
+                    onUpdate: () => {
+
+                    }
+                });
+
+                this.VIEW.loading_progress_text.text =
+                    Math.floor(progress * 100) + "%";
+
+                this.webGL && this.VIEW.loadingCacheContainer.updateCache();
+            },
+            completeCallBack: (result) => {
+                // all loaded triger
+                this.VIEW.createGamePage(this);
+                setTimeout(() => {
+                    this.VIEW.hideLoading();
+                    this.webGL && this.VIEW.loadingCacheContainer.updateCache();
+                }, 100)
+                // this.mainResLoaded();
+            },
+        });
+    }
+
+    // 主资源加载完毕 显示首页
+    mainResLoaded() {
+        gsap.to([this.gameView.loading_progress_bg, this.gameView.loading_progress_bar, this.gameView.loading_text, this.gameView.loading_progress_text,], {
+            alpha: 0,
+            onUpdate: () => {
+                this.webGL && this.VIEW.loadingCacheContainer.updateCache();
+            }
+        })
+        gsap.fromTo(this.gameView.loading_start, { alpha: 0, scaleX: 0.95, scaleY: 0.95 }, { alpha: 1, scaleX: 1, scaleY: 1, ease: "elastic.out(1, 0.3)" })
+    }
+
+
+    // 求数组平均数
+    getArrAverage(arr) {
+        return arr.reduce((num, item, index) => {
+            if (index != arr.length - 1) {
+                return num + item;
+            } else {
+                return (num + item) / arr.length;
+            }
+        });
+    }
+
+    // 获取平均fps
+    getAverageFPS() {
+        // 计算平均帧率
+        this.saveMomentFPS && clearInterval(this.saveMomentFPS)
+        this.averageFPS = this.getArrAverage(this.momentFPS);
+        if (this.averageFPS <= 50) {
+            console.log('低等性能手机，刷新率为', this.averageFPS)
+        }
+        else if (this.averageFPS > 50 && this.averageFPS < 70) {
+            console.log('中等性能手机，刷新率为', this.averageFPS)
+        }
+        else if (this.averageFPS >= 70) {
+            console.log('高性能手机，高刷新率为', this.averageFPS)
+        }
+
+        // 计算出全局speed
+        this.globalSpeed = 60 / this.averageFPS;
+        console.log(this.globalSpeed)
+    }
+
+    // 初始化物理引擎
+    initMatterEngine() {
+        // create an engine 
+        this.myEngine = this.Engine.create();
+        this.myEngine.gravity.y = 0;
+        this.myWorld = this.myEngine.world;
+
+
+
+        // create a renderer
+        this.myRender = this.Render.create({
+            // element: this.vue.$refs.container,
+            engine: this.myEngine,
+            canvas: this.vue.$refs.matter,
+            options: {
+                width: 375,// 375, //window.innerWidth,
+                height: 812, //812,  //window.innerHeight,
+                pixelRatio: 1, // 设置像素比 window.devicePixelRatio
+                background: 'transparent',
+                wireframeBackground: "transparent",
+                showAngleIndicator: false,
+                wireframes: false,
+                showDebug: false,
+                showVelocity: true,
+            }
+        });
+
+        // create two boxes and a ground
+        // var boxA = this.Bodies.rectangle(100, 200, 80, 80);
+        // var boxB = this.Bodies.rectangle(150, 50, 80, 80);
+        // var boxC = this.Bodies.rectangle(150, 50, 80, 80);
+        // var boxD = this.Bodies.rectangle(150, 50, 80, 80);
+        // var ground = this.Bodies.rectangle(0, 800, 750, 10, { isStatic: true });
+
+
+        // add all of the bodies to the world
+        // this.Composite.add(this.myWorld, [boxA, boxB, boxC, boxD, ground]);
+
+        // create runner
+        this.Render.run(this.myRender);
+
+        // run the engine
+        this.myRunner = this.Runner.create();
+        this.Runner.run(this.myRunner, this.myEngine);
+    }
+
+    //debug mode destroyed
+
+    //game model
+    model() {
+        let M = {};
+        return M
+    }
+
+    //game viewer
+    view() {
+        let V = {};
+        let A = {};
+
+        this.adaptY = _stage.adaptScreen();
+
+        this.gameView = _layout.init(this, V, A);
+
+        V.checkIPhoneX = () => {
+            let windowW = window.innerWidth;
+            let windowH = window.innerHeight;
+            if (windowH < 1130) {
+
+            }
+
+            if (windowW / windowH < 0.56) {        // ios phone X  640*1386 wechat(640*1277) || 750*1624  wechat(750*1496)
+                this.phoneX = true;
+            } else {                                                  // ios other
+                this.phoneX = false;
+            }
+        }
+        V.checkIPhoneX();
+
+        A.commonBtnAni = (target, callbacks) => {
+            let timeline = new TimelineMax({
+                onComplete: () => {
+                    timeline.kill();
+                    callbacks && callbacks();
+                }
+            });
+            timeline
+                .to(target, .4, { scaleX: .9, scaleY: .9 })
+                .to(target, .2, { scaleX: 1, scaleY: 1 })
+        }
+
+        return {
+            layout: V,
+            ani: A
+        };
+    }
+
+    // 静音音频
+    silenceSoundInit() {
+        var audioTag = document.createElement("audio");
+        audioTag.controls = false;
+        audioTag.preload = "auto";
+        audioTag.loop = false;   // looping this seems to cause clicking on older iOS devices
+        audioTag.src = silenceDataURI;
+        document.addEventListener("visibilitychange", function () {
+            if (document.visibilityState == 'visible') audioTag.play();
+        });
+
+        this.silenceAudio = audioTag;
+    }
+
+    // 播放音效
+    playSound(musicId, spe) {
+        // 移除所有声音
+        // createjs.Sound.removeAllSounds();
+        // 暂停上一个音频
+        // console.log(this.playingSound)
+        if (this.playingSound) {
+            console.log('准备暂停音频=>', this.playingSound.name)
+            this.playingSound.paused = true;
+            this.playingSound.destroy();
+        }
+
+
+        console.log('准备播放音频=>', musicId)
+        // let props = new createjs.PlayPropsConfig().set({
+        //     interrupt: createjs.Sound.INTERRUPT_ANY,
+        //     loop: 0,
+        //     volume: 1
+        // });
+        this.playingSound = createjs.Sound.play(('sound-' + musicId));  //如果声音的最大实例数已经在播放，如何中断同一源的任何当前播放的音频实例。值在Sound类上被定义为INTERRUPT_TYPE常量
+        this.playingSound.name = musicId
+        // return sound
+    }
+
+    // 绑定事件
+    bindEvents() {
+        this.gameView.loading_start
+            .on('mousedown', (e) => {
+                this.silenceAudio.play();
+                // createjs.Sound.play('sound-silence', { loop: -1 });
+                console.log(this.vue.$BGM.paused, this.vue.$BGM.mute)
+                // 如果存在背景音乐 如果音乐被暂停同时用户未静音的话
+                if (this.vue.$BGM && this.vue.$BGM.paused && !this.vue.$BGM.mute) {
+                    console.log('playing bgm music')
+                    this.vue.$BGM.play();
+                }
+                this.gameView.loading_start.mouseEnabled = false;
+                // console.log('点击了开始')
+                // 埋点
+                this.vue.$Utils.addTrackEvent("用户点击了开始", '用户loading页点击了开始');
+                this.vue.$Utils.btnTouched(e.currentTarget, () => {
+
+
+                    // 将canvas设置为不可交互
+                    let style = this.stage.stage.canvas.className;
+                    this.stage.stage.canvas.className = 'none'
+
+                    // 初始化 view
+                    this.VIEW.init();
+
+                    // 隐藏loading
+                    this.VIEW.hideLoading();
+                    // 播放guide动画
+                    this.changeSpriteAnimation('guide');
+                    // 播放声音
+                    this.playSound('guide');
+                    // 显示按钮动画
+                    this.vue.showLangBtnAni();
+                })
+            })
+    }
+
+}
+
+export default game

src/page/index/PushCoinGame/game/layout.js

@@ -0,0 +1,292 @@
+const layoutData = {
+	loading: [
+		{
+			sprite: true,
+			framesName: 'loading',
+			layId: 'loadingSprite',
+			imgId: 'loadingSprite',
+			x: 750,
+			"animations": {
+				"loading_text2_en": { "frames": [0] },
+				"arrow": { "frames": [1] },
+				"person": { "frames": [2] },
+				"start": { "frames": [3] },
+				"light": { "frames": [4] },
+				"loading_text3": { "frames": [5] },
+				"snow_19": { "frames": [6] },
+				"snow_9": { "frames": [7] },
+				"snow_1": { "frames": [8] },
+				"snow_10": { "frames": [9] },
+				"snow_20": { "frames": [10] },
+				"loading_text3_en": { "frames": [11] },
+				"snow_2": { "frames": [12] },
+				"snow_8": { "frames": [13] },
+				"snow_11": { "frames": [14] },
+				"snow_13": { "frames": [15] },
+				"snow_17": { "frames": [16] },
+				"snow_6": { "frames": [17] },
+				"snow_14": { "frames": [18] },
+				"snow_7": { "frames": [19] },
+				"snow_16": { "frames": [20] },
+				"snow_15": { "frames": [21] },
+				"snow_3": { "frames": [22] },
+				"snow_12": { "frames": [23] },
+				"snow_18": { "frames": [24] },
+				"loading_text": { "frames": [25] },
+				"loading_text2": { "frames": [26] },
+				"snow_4": { "frames": [27] },
+				"snow_5": { "frames": [28] },
+				"snow": { "frames": [29] },
+				"light_2": { "frames": [30] },
+				"box": { "frames": [31] }
+			},
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		//bg
+		{
+			layId: 'loading_bg',
+			imgId: 'bg',
+			x: 0,
+			y: 0,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 1
+		},
+		// 			imgId: 'snow',
+		{
+			layId: 'loading_snow',
+			singleSprite: {
+				visible: true,
+				name: 'snow'
+			},
+			x: 290,
+			y: 504,
+			width: 171,
+			height: 167,
+			roCenter: true,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 1
+		},
+		// tips-1
+		{
+			layId: 'loading_text',
+			singleSprite: {
+				visible: true,
+				name: 'loading_text'
+			},
+			x: 182,
+			y: 820,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		{
+			layId: 'loading_text2',
+			singleSprite: {
+				visible: true,
+				name: 'loading_text2'
+			},
+			x: 211,
+			y: 1157,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		{
+			layId: 'loading_text2_en',
+			singleSprite: {
+				visible: true,
+				name: 'loading_text2_en'
+			},
+			x: 54,
+			y: 1160,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		{
+			layId: 'loading_text3',
+			singleSprite: {
+				visible: true,
+				name: 'loading_text3'
+			},
+			x: 253,
+			y: 1157,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		{
+			layId: 'loading_text3_en',
+			singleSprite: {
+				visible: true,
+				name: 'loading_text3_en'
+			},
+			x: 174,
+			y: 1160,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		{
+			layId: 'loading_box',
+			singleSprite: {
+				visible: true,
+				name: 'box'
+			},
+			x: 232,
+			y: 869,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		// {
+		// 	layId: 'loading_box2',
+		// 	singleSprite: {
+		// 		visible: true,
+		// 		name: 'box'
+		// 	},
+		// 	x: 232,
+		// 	y: 869,
+		// 	scaleX: 1,
+		// 	scaleY: 1,
+		// 	alpha: 0
+		// },
+		{
+			layId: 'loading_person',
+			singleSprite: {
+				visible: true,
+				name: 'person'
+			},
+			x: 178,
+			y: 313,
+			width: 395,
+			height: 520,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		{
+			layId: 'loading_arrow',
+			singleSprite: {
+				visible: true,
+				name: 'arrow'
+			},
+			x: 195,
+			y: 438,
+			width: 359,
+			height: 419,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		{
+			layId: 'loading_light',
+			singleSprite: {
+				visible: true,
+				name: 'light'
+			},
+			x: 176,
+			y: 673,
+			width: 392,
+			height: 334,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		{
+			layId: 'loading_light2',
+			singleSprite: {
+				visible: true,
+				name: 'light_2'
+			},
+			x: 176,
+			y: 673,
+			width: 392,
+			height: 334,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0
+		},
+		// progress_bg
+		{
+			layId: 'loading_progress_bg',
+			rect: {
+				visible: true,
+				round: true,
+				x: 0,
+				y: 0,
+				r: 15,
+				roundLine: 4,
+				width: 462,
+				height: 30,
+				bg: '#0b3046'
+			},
+			bg: '#23669c',
+			x: 139,
+			y: 760,
+			ox: 0,
+			oy: 0,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 1
+		},
+		// progress_bar
+		{
+			layId: 'loading_progress_bar',
+			rect: {
+				visible: true,
+				round: true,
+				x: 0,
+				y: 0,
+				r: 15,
+				width: 30, //462/2
+				height: 30
+			},
+			bg: '#caf0f6',
+			x: 139,
+			y: 760,
+			ox: 0,
+			oy: 0,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 1
+		},
+		// progress text
+		{
+			layId: 'loading_progress_text',
+			x: 375,
+			y: 910,
+			text: {
+				visible: true,
+				word: '0%',
+				size: '46px hycm',
+				color: '#ffffff',
+				align: 'center',
+				lineHeight: 40
+			},
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 1
+		},
+		{
+			layId: 'loading_start',
+			singleSprite: {
+				visible: true,
+				name: 'start'
+			},
+			x: 252,
+			y: 800,
+			width: 248,
+			height: 84,
+			roCenter: true,
+			scaleX: 1,
+			scaleY: 1,
+			alpha: 0,
+		},
+	],
+}
+module.exports = layoutData

src/page/index/PushCoinGame/game/maskCreater.js

@@ -0,0 +1,26 @@
+import base64Str from './pathCodes'
+
+/*create mask*/
+class maskCreater {
+
+	constructor(pname, type, param, debug) {
+		let mask = new createjs.Shape();
+
+		if (type == 'code')
+			mask.graphics.p(base64Str[pname]);
+
+		if (type == 'func')
+			// ;(new Function('',base64Str[pname]))();
+			// eval(base64Str[pname])
+			base64Str[pname](mask)
+
+
+		if (param)
+			mask.setTransform(...param)
+		// console.log(mask)
+
+		return mask;
+	}
+}
+
+module.exports = maskCreater;

src/page/index/PushCoinGame/game/pathCodes.js

@@ -0,0 +1,9 @@
+module.exports = {
+	"rect": (mask) => {
+		return mask.graphics.f('#000000').drawRoundRect(0, 0, 559, 10, 0).es()
+	},
+
+	"cardMask": "mask.graphics.f('#000000').drawRoundRect(177,439,400,550,0).es()",
+
+	"upload_mask": "mask.graphics.f('#000000').drawRoundRect(140,444,477,647,0).es()"
+}

src/page/index/PushCoinGame/game/preload.js

@@ -0,0 +1,52 @@
+export default {
+	before: {
+		imgList: [
+			{
+				id: 'loadingSprite',
+				src: require("@/assets/images/loading/loadingSprite.png")
+			},
+			{
+				id: 'bg',
+				src: require("@/assets/images/loading/bg.jpg")
+			},
+			{
+				id: 'snowSprite',
+				src: require("@/assets/images/loading/snowSprite.png")
+			},
+		],
+		audioList: [
+			// {
+			// 	id: 'sound-silence',
+			// 	src: require("@/assets/media/silence.mp3")
+			// }
+		]
+	},
+	main: {
+		imgList: [
+			{
+				id: 'coin',
+				src: require("@/assets/images/push-coin/coin.png")
+			},
+			{
+				id: 'top',
+				src: require("@/assets/images/push-coin/top.png")
+			},
+			{
+				id: 'bottom_ban',
+				src: require("@/assets/images/push-coin/bottom_ban.png")
+			},
+			{
+				id: 'pusher',
+				src: require("@/assets/images/push-coin/pusher.png")
+			},
+
+		],
+		audioList: [
+		]
+	},
+	// 剩余资源
+	after: {
+		imgList: [],
+		audioList: []
+	},
+}

src/page/index/PushCoinGame/game/stage.js

@@ -0,0 +1,185 @@
+// import 'createjs';
+// import '../plugins/easeljs-0.8.2.min';
+import '@/utils/plugins/easeljs-1.0.0.min';
+import Stats from '@/utils/plugins/stats-2d';     //frame rate
+import Stats3d from '@/utils/plugins/stats-3d.min';     //frame rate
+import { gsap } from 'gsap'                        //动画插件
+import utils from '@/utils/index.js'
+
+class creater {
+    constructor() {
+        this.FPS = 60;
+        window.createjs = createjs;
+    }
+
+    createStage(APP) {
+        this.app = APP;
+        let that = this;
+        let stage = document.createElement('canvas');
+        // stage.width  = 750;
+        // stage.height = 1450;
+        stage.id = 'stageCanvas';
+        let container = document.getElementById('container');
+        container.appendChild(stage);
+        if (this.app.webGL) {
+            this.stage = new createjs.StageGL(stage, { transparent: true, antialias: true });
+            this.stage.setTextureParams = function (gl, isPOT) {
+                if (this._antialias) {
+                    //non POT linear works in some devices, but performance is NOT good, investigate
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                } else {
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+                }
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            };
+            console.log('开启了webgl')
+        } else {
+            this.stage = new createjs.Stage(stage);
+            console.log('未开启webgl,canvas2d模式')
+        }
+        this.setStage();
+
+        //add stage frame rate stats
+        // if (this.app.debug) {
+        Stats.startFPS(this.stage, { x: 0, y: 200 }, this.app)
+        // }
+
+        // 3d stats
+        if (this.app.debug) {
+            this.stats = new Stats3d();
+            container.appendChild(this.stats.domElement);
+        }
+
+        createjs.Ticker.timingMode = createjs.Ticker.RAF//TIMEOUT || RAF_SYNCHED || RAF
+        createjs.Ticker.framerate = this.FPS;
+
+        let count = 0;
+
+        createjs.Ticker.on("tick", function handleTicker(event) {
+            that.stage.update();
+            that.app.FPS = Stats.FPS;
+            // 3d states
+            that.app.debug && that.stats.update();
+            // count++;
+            // if (count % 100 == 0) {
+            //     console.log("Paused:", event.delta);
+            // }
+            if (APP.status == 2 && !APP.paused) APP.update()
+            if (APP.needUpdate && APP.gameView) {
+                APP.gameView.update();
+            }
+        });
+
+        return this
+    }
+
+    //屏幕自适应 
+    adaptScreen() {
+        if (this.app.needAdaptScreen === false) return
+        // 横屏模式
+        if (window.innerWidth > window.innerHeight) {
+            this.currentStageWidth = window.innerWidth;
+            this.currentStageHeight = window.innerHeight;
+            this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;
+            this.offsetTop = 0;
+        } else {
+            this.currentStageWidth = window.innerWidth;
+            this.currentStageHeight = 1624 / 750 * window.innerWidth;
+            this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;
+            this.offsetTop = (window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY;
+        }
+        if (this.currentStageWidth > this.currentStageHeight) {
+            if (this.initWidthHeightScale < this.currentWidthHeightScale)
+                this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageWidth / this.initStageWidth;
+            else
+                this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageHeight / this.initStageHeight;
+        }
+        else {
+            if (this.initWidthHeightScale < this.currentWidthHeightScale)
+                this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageWidth / this.initStageWidth;
+            else
+                this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageHeight / this.initStageHeight;
+        }
+        this.stage.x = 0//(this.currentStageWidth - this.initStageWidth) * this.stageCanvas.scaleX / 2;
+        this.stage.y = 0//(window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY / 2;
+
+
+        if (window.innerHeight < this.currentStageHeight)
+            gsap.set(this.stageCanvas, { y: this.offsetTop });  //+ (window.deviceInfo.screenSize <= 2 ? 20 : 0)
+        else
+            gsap.set(this.stageCanvas, { y: 0 });
+
+
+        // console.log(this.stageCanvas.scaleX,this.stageCanvas.scaleY,window.devicePixelRatio)
+        // console.log(this.stageContainer.x,this.stageContainer.y,this.currentStageHeight,this.offsetTop)
+
+        if (!this.ratio) {
+            this.ratio = /*appPlugins.isAndriod() ? 1 :*/  2 //window.devicePixelRatio //appPlugins.getDevicePixelRatio(this.stageCanvas.getContext("3d"));
+        }
+        this.stageCanvas.width = this.currentStageWidth * this.ratio;
+        this.stageCanvas.height = this.currentStageHeight * this.ratio;
+        this.stageCanvas.style.width = this.currentStageWidth + "px";
+        this.stageCanvas.style.height = this.currentStageHeight + "px";
+        this.stage.scaleX = this.ratio * this.stageCanvas.scaleX;
+        this.stage.scaleY = this.ratio * this.stageCanvas.scaleY;
+        this.stageRenderWidth = 750;
+        this.stageRenderHeight = this.currentStageHeight / this.currentStageWidth * this.stageRenderWidth;
+
+        // console.log(this.stageRenderWidth,this.stageCanvas.height)
+
+        if (this.app.webGL) {
+            this.stage.updateViewport(this.stageCanvas.width, this.stageCanvas.height)
+        }
+        // this.stage.updateViewport(this.stageCanvas.width,this.stageCanvas.height)
+        // 
+        return (this.currentStageHeight - this.initStageHeight) * this.stageCanvas.scaleY / 2
+    }
+
+    setStage() {
+        var initWidth = 750;
+        var initHeight = 1624;
+
+        this.stageCanvas = this.stage.canvas;
+        this.stageCanvas.width = initHeight;
+        this.stageCanvas.height = initHeight;
+        this.initStageWidth = initWidth;
+        this.initStageHeight = initHeight;
+        this.initWidthHeightScale = initWidth / initHeight;
+
+
+        // this.backgroundContainer  = new createjs.Container();//加载层
+        this.loadingContainer = new createjs.Container();   //加载层
+        this.mainContainer = new createjs.Container().set({ alpha: 0 });   //游戏层
+
+        // this.mission_success_Container  = new createjs.Container().set({alpha:0});   //通关层
+        // this.timeCount_Container  = new createjs.Container().set({alpha:0});         //timeCount层
+
+        // this.resultContainer      = new createjs.Container();   //游戏结果页
+        this.stageContainer = new createjs.Container();      //我的 最外层
+        // this.panelContainer        = new createjs.Container().set({alpha:0});
+
+        this.stageContainer.addChild(this.loadingContainer, this.mainContainer);
+
+        this.stage.addChild(this.stageContainer);
+        // this.app.webGL && this.stage.setClearColor("#051e56");
+
+        createjs.Touch.enable(this.stage);
+        // console.log(this.stage)
+        this.stage.enableMouseOver(10);
+        this.stage.mouseMoveOutside = true;
+
+        this.adaptScreen();
+
+        window.addEventListener("resize", (event) => {
+            utils.sleep(300).then(() => {
+                this.adaptScreen();
+            })
+        });
+    }
+
+}
+
+module.exports = creater;

src/page/index/PushCoinGame/game/view.js

@@ -0,0 +1,301 @@
+// import frameData from './frameData';
+import layoutData from './layout';
+import createLayout from './createView';
+// import maskCreater from './maskCreater';		//mask creater
+import { gsap } from "gsap";
+import decomp from 'poly-decomp';
+// import utils from '@/utils/index.js'
+// import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
+// import Soul 		 from './plugins/ScrollContainer';	//app scroll plugin module
+
+class layout {
+	constructor() {
+		this.filterMatrix = new createjs.ColorMatrix().adjustSaturation(-200);
+
+		// 注册路径插件
+		// gsap.registerPlugin(MotionPathPlugin);
+	}
+
+	init() {
+		//update btns position by viewport
+		// this.updatePosByViewport();
+
+		return this
+	}
+
+	upgrate(GAME, VIEW, ANI) {
+		this.game = GAME;
+		this.view = VIEW;
+		this.ani = ANI;
+
+		return this
+	}
+
+	//根据页面更新适配内容
+	updatePosByViewport() {
+		// console.log(this.game.scene.oHeight)
+		if (this.game.oHeight <= 1181 / 2) {
+			if (this.game.scene.oHeight > 1110 / 2) {
+				//iphone 5 5s
+				console.log('iphone 5 5s')
+				this.game_score_text.y += 140;
+				this.game_time_bar.y += 140;
+				this.game_score_bar.y += 140;
+				this.game_time_text.y += 140;
+
+			} else {
+				//suitable huawei		
+				console.log('suitable huawei')
+				this.game_score_text.y += 220;
+				this.game_time_bar.y += 220;
+				this.game_score_bar.y += 220;
+				this.game_time_text.y += 220;
+
+			}
+		} else if (this.game.scene.oHeight <= 673) {
+			console.log('iphone8p')
+			this.game_score_text.y += 120;
+			this.game_time_bar.y += 120;
+			this.game_score_bar.y += 120;
+			this.game_time_text.y += 120;
+
+		} else {
+			console.log('适配机型x')
+		}
+	}
+
+	createBitmap(name) {
+		let img = this.game.mainLoader && this.game.mainLoader.getResult(name);
+		return new createjs.Bitmap(img);
+	}
+
+	//创建loading页
+	loading(GAME) {
+		this.game = GAME;
+		this.loadingCacheContainer = new createjs.Container();
+		this.loadingAnimation = {};
+		//create layout
+		for (let i in layoutData['loading']) {
+			let item = layoutData['loading'][i];
+			item.layout = this;
+			item.game = this.game;
+			item.loader = this.game.loadingLoader;
+			item.container = this.game.stage.loadingContainer;
+			item.cacheContainer = this.loadingCacheContainer;
+
+			if (item.singleSprite && item.singleSprite.visible) {
+				item.singleSprite.parent = this.loadingSprite;
+			}
+
+			createLayout(item);
+		}
+
+		gsap.to(this.loading_snow, { rotation: 360, ease: 'none', repeat: -1, duration: 5 })
+
+		// 创建粒子动画
+		this.createLoadingParticle();
+
+		// console.log(this.loading_bg)
+
+		return this
+	}
+
+	//隐藏loading页面
+	hideLoading() {
+		//create story index
+		gsap.to(this.game.stage.loadingContainer, { alpha: 0, duration: 0.65, })
+		gsap.to([this.game.stage.mainContainer, this.gamePage], { alpha: 1, duration: 0.65 });
+	}
+
+	// 创建游戏页
+	createGamePage(game) {
+		this.game = game;
+		this.gamePage = new createjs.Container().set({ alpha: 0 });
+		this.game.stage.mainContainer.addChild(this.gamePage);
+
+		let bottom = this.createBitmap('bottom_ban').set({ y: 560 });
+		let top = this.createBitmap('top');
+		// 添加推板
+		let pusher = this.createBitmap('pusher').set({
+			x: 142,
+			y: 683
+		});
+
+		// console.log(pusher)
+
+		gsap.to(pusher, { y: '-=202', yoyo: true, repeat: -1, ease: 'none', duration: 5 })
+
+		// 添加到
+		this.gamePage.addChild(bottom, pusher, top);
+
+
+		// Create a concave polygon
+		var _g = [
+			// 顶点坐标
+			{ x: 0, y: 0 },
+			{ x: 0, y: 956 },
+			{ x: 141, y: 881 },
+			{ x: 206, y: 683 },
+			{ x: 548, y: 683 },
+			{ x: 614, y: 881 },
+			{ x: 750, y: 956 },
+			{ x: 750, y: 0 },
+		];
+		var concavePolygon = [
+			// 顶点坐标
+			[0, 0],
+			[0, 956],
+			[141, 881],
+			[206, 683],
+			[548, 683],
+			[614, 881],
+			[750, 956],
+			[750, 0],
+		];
+
+		// Make sure the polygon has counter-clockwise winding. Skip this step if you know it's already counter-clockwise.
+		decomp.makeCCW(concavePolygon);
+
+
+		var convexPolygons = decomp.quickDecomp(concavePolygon);
+		// ==> [  [[1,0],[1,1],[0.5,0.5]],  [[0.5,0.5],[-1,1],[-1,0],[1,0]]  ]
+
+		// // Decompose using the slow (but optimal) algorithm
+		// var convexPolygons = decomp.decomp(concavePolygon);
+
+		convexPolygons.forEach((item) => {
+			item.forEach((t, i) => {
+				item.push({
+					x: t[0],
+					y: t[1]
+				})
+				if (i == (item.length / 2) - 1) {
+					item.splice(0, item.length / 2)
+				}
+			})
+		})
+
+		console.log(convexPolygons)
+		// 添加ground 
+		this.game.Composite.add(this.game.myWorld,
+			this.game.Bodies.fromVertices(
+				window.innerWidth / 2, window.innerHeight / 2,
+				_g,
+				{
+					isStatic: true,
+					scale: {
+						screenX: 0.5,
+						screenY: 0.5,
+					},
+					render: {
+						fillStyle: 'rgba(39,7,238,0.25)'
+					}
+				},
+
+			)
+		);
+
+		// 
+		// let bounds = pusher.getBounds();
+		// pusher.body = this.game.Bodies.trapezoid(
+		// 	pusher.x,
+		// 	pusher.y,
+		// 	bounds.width,
+		// 	bounds.height,
+		// 	1,
+		// 	{ isStatic: true }
+		// );
+		// this.game.Composite.add(this.myWorld, [pusher.body]);
+	}
+
+	// 生成硬币
+	createCoin() {
+		let coinImg = this.game.mainLoader.getResult('coin');
+		let coin = new createjs.Bitmap(coinImg);
+	}
+
+	// loading 粒子制造机
+	createLoadingParticle() {
+		const container = new createjs.Container();
+
+		const arr = [];
+		for (let i = 0; i < (window.deviceInfo.system == 'IOS' ? 200 : 250); i++) {
+			const scale = Math.random() * 0.35 + 0.5;
+			const name = `snow_${this.game.utils.rangeRandom(1, 20)}`;
+			const sprite = this.createBitmap(this.loadingSprite.spriteSheet, name).set({
+				x: Math.random() * 750 - 30,
+				y: Math.random() * 1624,
+				ox: Math.random() * 750,
+				oy: -100,
+				// regX:14,
+				// regY:14,
+				scaleX: scale,
+				scaleY: scale,
+				speedX: (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 0.25 + 0.25),
+				speedY: Math.random() * 1 + 0.5,
+				alpha: Math.random() * 0.3 + 0.5
+			})
+
+			arr.push(sprite)
+		}
+		// const mask = new createjs.Shape().setTransform(0, 0, 1, 1);
+		// mask.graphics.f('#000000').drawRoundRect(0, 0, 750, 1300, 0).es();
+		// contianer.mask = mask;
+		// contianer.compositeOperation = 'darker';
+		// arr.push(mask)
+		container.children = arr;
+
+		this.loadingPrarticleContainer = container;
+		this.game.stage.loadingContainer.addChild(container);
+		return container
+	}
+
+	//粒子动画更新
+	update() {
+		if (!this.game) return
+		if (this.game.scene == 1 && this.loadingPrarticleContainer) {
+			if (this.loadingPrarticleContainer.alpha == 0) {
+				// console.log('2=>1')
+				this.loadingPrarticleContainer.alpha = 1;
+			}
+			if (this.prarticleContainer && this.prarticleContainer.alpha == 1) {
+				this.prarticleContainer.alpha = 0;
+			}
+			this.loadingPrarticleContainer.children.forEach((item, index) => {
+
+				if (item.x < -30 || item.x > 800 || item.y > 1624) {
+					item.y = item.oy;
+					item.x = item.ox;
+				}
+				item.x += item.speedX
+				item.y += item.speedY
+
+			})
+		}
+		if (this.game.scene == 2 && this.prarticleContainer) {
+			if (this.prarticleContainer.alpha == 0) {
+				// console.log('1=>2')
+				this.prarticleContainer.alpha = 1;
+			}
+
+			if (this.loadingPrarticleContainer.alpha == 1) {
+				this.loadingPrarticleContainer.alpha = 0;
+			}			//题目一 粒子运动
+			this.prarticleContainer.children.forEach((item, index) => {
+
+				if (item.x < -30 || item.x > 800 || item.y > 1400) {
+					item.y = item.oy;
+					item.x = item.ox;
+					item.rotation = 0;
+				}
+				item.x += item.speedX * this.game.globalSpeed
+				item.y += item.speedY * this.game.globalSpeed
+				item.rotation += item.speedR * this.game.globalSpeed
+
+			})
+		}
+
+	}
+}
+
+module.exports = layout;

src/page/index/PushCoinGame/index.vue

@@ -0,0 +1,51 @@
+<!--
+ * @Author: your name
+ * @Date: 2020-08-28 15:20:15
+ * @LastEditTime: 2020-10-10 17:19:06
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
+-->
+<template>
+  <div class="pushcoin" id="container" ref="container">
+    <canvas ref="matter" class="matter"></canvas>
+  </div>
+</template>
+<script>
+// @ is an alias to /src
+import gsap from "gsap";
+import game from "./game/index";
+export default {
+  name: "ColorSort",
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {
+    rennderCssHSL() {
+      return function (item) {
+        return `background-color: ${item.csshsl};`;
+      };
+    },
+  },
+  mounted() {
+    this.game = new game();
+    this.game.init(this);
+  },
+  methods: {},
+};
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less">
+.pushcoin {
+  .prLayout(100%,100%);
+  overflow: hidden;
+  background-color: #333;
+  .matter {
+    .paPos(0,0,1);
+  }
+  #stageCanvas {
+    .paLayout(0,0,750px,1624px,0);
+  }
+}
+</style>

src/page/index/colorSort/index.vue

@@ -22,36 +22,42 @@
                 v-for="(item, index) in newColorArr"
                 :key="index"
             >
-				<div class="header">Group {{ index + 1 }}</div>
+                <div class="header">Group {{ item.name }}</div>
+                <div class="spans">
                     <div
                         class="color-span"
-					v-for="(t, i) in item"
+                        v-for="(t, i) in item.data"
                         :key="i"
                         :style="rennderCssHSL(t)"
                     ></div>
                 </div>
-		</div>
+
-		<div class="show-con cluster" ref="clusterCon">
+                <div class="desc" v-if="sortedStatus">
-			<div
+                    <div class="row">
-				class="color-group"
+                        <p>最小值: {{ item.min }}</p>
-				v-for="(item, index) in clusters"
-				:key="index"
-			>
-				<div class="header">
-					<div class="span" :style="rennderHeaderCss(item)"></div>
-					{{ item.name }} Group
-				</div>
                         <div
                             class="color-span"
-					v-for="(item, index) in item.colors"
+                            :style="rennderCssHex(item.min)"
-					:key="index"
+                        ></div>
-					:style="rennderCssHex(item)"
+                    </div>
+                    <div class="row">
+                        <p>平均值: {{ item.average }}</p>
+                        <div
+                            class="color-span"
+                            :style="rennderCssHex(item.average)"
+                        ></div>
+                    </div>
+                    <div class="row">
+                        <p>最大值: {{ item.max }}</p>
+                        <div
+                            class="color-span"
+                            :style="rennderCssHex(item.max)"
                         ></div>
                     </div>
                 </div>
+            </div>
+        </div>
         <div class="btn-groups">
-			<!-- <div class="btn" @click="sortColor">颜色归类</div> -->
-
             <div class="p">根据Hue色调分组</div>
             <div class="ios-checkbox">
                 <input
@@ -65,7 +71,8 @@
                 />
                 <label for="ios-checkbox" class="emulate-ios-button"></label>
             </div>
-			<div class="p">根据固定颜色分组</div>
+
+            <!-- <div class="p">根据固定颜色分组</div>
 			<div class="ios-checkbox">
 				<input
 					type="checkbox"
@@ -77,30 +84,22 @@
 					hidden
 				/>
 				<label for="ios-checkbox2" class="emulate-ios-button"></label>
-			</div>
+			</div> -->
-			<div
-				class="btn"
-				@click="sortColorSaturation"
-				:class="{ active: active1 }"
-				ref="btn1"
-			>
-				根据饱和度排序
-			</div>
             <div
                 class="btn"
                 @click="sortColorLight"
                 :class="{ active: active2 }"
                 ref="btn2"
             >
-				根据明度排序
+                排序
             </div>
-			<div class="show-color" ref="showColor">
 			<div
-					class="color-span"
+                class="btn"
-					v-for="(item, index) in clusters"
+                @click="export2Excel"
-					:key="index"
+                :class="{ active: active3 }"
-					:style="rennderHeaderCss(item)"
+                ref="btn3"
-				></div>
+            >
+                导出excel
             </div>
         </div>
     </div>
@@ -109,6 +108,7 @@
 // @ is an alias to /src
 import colorUtil from "color-util";
 import colors from "@/data/color.json";
+import { export_json_to_excel } from "@/utils/plugins/Export2Excel";
 import gsap from "gsap";
 export default {
     name: "ColorSort",
@@ -116,274 +116,405 @@ export default {
     data() {
         return {
             hideOrigin: false,
-			hideOrigin2: false,
             colorArr: colors,
+            sortedStatus: false,
             active1: false,
             active2: false,
+            active3: false,
             hlsColorArr: [],
-			clustersColorArr: [],
+            newColorArr: [
-			newColorArr: [[], [], [], [], [], [], [], [], [], [], [], []],
+                {
-			clusters: [
+					name: "红",
-				//指定颜色分类
+					data: [],
-				{ name: "red", leadColor: [255, 0, 0], colors: [] },
+					average: "",
-				{ name: "orange", leadColor: [255, 128, 0], colors: [] },
+					min: "",
-				{ name: "yellow", leadColor: [255, 255, 0], colors: [] },
+					max: "",
-				{ name: "chartreuse", leadColor: [128, 255, 0], colors: [] },
+				},
-				{ name: "green", leadColor: [0, 255, 0], colors: [] },
+				{
-				{ name: "spring green", leadColor: [0, 255, 128], colors: [] },
+					name: "紫",
-				{ name: "cyan", leadColor: [0, 255, 255], colors: [] },
+					data: [],
-				{ name: "azure", leadColor: [0, 127, 255], colors: [] },
+					average: "",
-				{ name: "blue", leadColor: [0, 0, 255], colors: [] },
+					min: "",
-				{ name: "violet", leadColor: [127, 0, 255], colors: [] },
+					max: "",
-				{ name: "magenta", leadColor: [255, 0, 255], colors: [] },
+				},
-				{ name: "rose", leadColor: [255, 0, 128], colors: [] },
+				{
-				{ name: "black", leadColor: [0, 0, 0], colors: [] },
+					name: "蓝紫",
-				{ name: "grey", leadColor: [235, 235, 235], colors: [] },
+					data: [],
-				// { name: "white", leadColor: [255, 255, 255], colors: [] },
+					average: "",
+					min: "",
+					max: "",
+				},
+				{
+					name: "蓝",
+					data: [],
+					average: "",
+					min: "",
+					max: "",
+				},
+				{
+					name: "青",
+					data: [],
+					average: "",
+					min: "",
+					max: "",
+				},
+				{
+					name: "绿",
+					data: [],
+					average: "",
+					min: "",
+					max: "",
+				},
+				{
+					name: "黄绿",
+					data: [],
+					average: "",
+					min: "",
+					max: "",
+				},
+				{
+					name: "黄",
+					data: [],
+					average: "",
+					min: "",
+					max: "",
+				},
+				{
+					name: "橘色",
+					data: [],
+					average: "",
+					min: "",
+					max: "",
+				},
+				{
+					name: "黑",
+					data: [],
+					average: "",
+					min: "",
+					max: "",
+				},
+				{
+					name: "白",
+					data: [],
+					average: "",
+					min: "",
+					max: "",
+				},
+				{
+					name: "灰",
+					data: [],
+					average: "",
+					min: "",
+					max: "",
+				},
             ],
+            sortedColorArr: [],
+            // 1-12 对应 hue 每30度  | 13 - 黑 | 14 - 白 | 15 - 灰
+            balance: [0.9, 0, 0.01],
+            balance2: [0.3, 0, 0],
+            balance3: [0.5, 0.2, 0.1],
+            caclulTime: 0,
         };
     },
     computed: {
         rennderCssHSL() {
             return function (item) {
-				return `background-color: ${colorUtil.hsl.to.csshsl(item)};`;
+                return `background-color: ${item.csshsl};`;
             };
         },
         rennderCssHex() {
             return function (item) {
-				return `background-color: ${item.csshsl};`;
+                return `background-color: ${item};`;
             };
         },
         rennderHeaderCss() {
             return function (item) {
-				return `background-color: ${colorUtil.rgb.to.cssrgb({
+                return `background-color: ${item.csshsl};`;
-					r: item.leadColor[0],
-					g: item.leadColor[1],
-					b: item.leadColor[2],
-					a: 255,
-				})};`;
             };
         },
     },
     mounted() {
-		// console.log(this.newColorArr);
         this.reHandleColor();
     },
     methods: {
         // 显示隐藏分组
         showGroup(index) {
-			let target = this.$refs.sortCon;
+            gsap.to(this.$refs.sortCon, {
-			gsap.to(target, {
                 autoAlpha: 1,
                 x: this.hideOrigin ? 0 : "100%",
                 zIndex: this.hideOrigin ? 2 : 10,
-				onStart: () => {
+                onStart: () => {},
-					if (this.active1) {
+            });
-						this.sortColorSaturation();
-					}
-					if (this.active2) {
-						this.sortColorLight();
-					}
         },
-			});
+		// 格式化json数据
-
+		formatJson(filterVal, jsonData) {
-			if (this.hideOrigin) {
+			return jsonData.map(v => filterVal.map(j => v[j]))
-				this.hideOrigin2 = false;
-				gsap.to(this.$refs.clusterCon, {
-					autoAlpha: 0,
-					zIndex: 2,
-					x: 0,
-				});
-				gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 1 });
-				gsap.to(this.$refs.showColor, { autoAlpha: 0 });
-			}
 		},
-		showGroup2(index) {
+		// 导出excel
-			let target = this.$refs.clusterCon;
+		export2Excel(){
-			gsap.to(target, {
+			if (!this.active2 || !this.hideOrigin){
-				autoAlpha: 1,
+				this.$Utils.showTips({
-				zIndex: this.hideOrigin2 ? 2 : 10,
+					message: `请先分组排序...`,
-				x: this.hideOrigin2 ? 0 : "100%",
 				});
-
+				return false
-			if (this.hideOrigin2) {
-				this.hideOrigin = false;
-				gsap.to(this.$refs.sortCon, {
-					autoAlpha: 0,
-					zIndex: 2,
-					x: 0,
-				});
-
-				gsap.to(this.$refs.showColor, { autoAlpha: 1 });
-				gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 0 });
-			} else {
-				gsap.to(this.$refs.showColor, { autoAlpha: 0 });
-				gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 1 });
 			}
+			const tHeader = ['组名','最小值','最大值','平均值','组内全部颜色',];
+			const filterVal = ['name', 'min', 'max', 'average', 'hexArr', ];
+			const list = this.newColorArr;
+			const data = this.formatJson(filterVal, list);
+			export_json_to_excel(tHeader, data, '颜色色环分组排序');
 		},
         // 颜色数据转换为hsl
         reHandleColor() {
+            // this.colorArr
             this.colorArr.forEach((item, index) => {
-				if (item.R && item.G && item.B) {
                 this.hlsColorArr.push(
-						// this.rgbToHsl(item.R, item.G, item.B)
+                    colorUtil.color(item.HEX) //item.HEX
-						colorUtil.rgb.to.hsl({
-							r: item.R,
-							g: item.G,
-							b: item.B,
-							a: 255,
-						})
                 );
-				}
             });
 
-			console.log(this.hlsColorArr);
+            // console.log(this.hexColorArr);
             //根据hue分组
             this.sortColorByHue();
-			// 按照预定颜色分组
-			this.sortColorByClusters();
         },
         // 按照色环分组
         sortColorByHue() {
             this.hlsColorArr.forEach((item, index) => {
-				if (item.h) {
+                let color = item.hsl;
-					let _index = 11 - Math.floor((item.h * 360) / 30); //将360度色盘区分为12个维度
+                if (color.h) {
-					// let _index = Math.floor(
+                    let _index = 8 - Math.floor((color.h * 360) / 40); //将360度色盘区分为12个维度
-					// 	(item.h * item.hsl[1] * item.hsl[2]) / 20
+                    // // 灰
-					// );
+                    // if (
-					// if (_index > 11) {
+                    // 	// 当饱和度为0时
+                    // 	color.s <= 0.3 &&
+                    // 	color.l <= 0.7 &&
+                    // 	color.l >= 0.1
+                    // ) {
                     // 	_index = 11;
                     // }
-					this.newColorArr[_index].push(item);
+                    // // 黑色
+                    // if (color.l < 0.4 && color.s < 0.4) {
+                    // 	_index = 9;
+                    // }
+                    // // 白色
+                    // if (color.l > 0.7 && color.s < 0.3) {
+                    // 	_index = 10;
+                    // }
+                    // 灰
+                    if (
+                        // 当饱和度为0时
+                        color.s <= 0.15 &&
+                        color.l <= 0.75 &&
+                        color.l >= 0.2
+                    ) {
+                        _index = 11;
+                    }
+                    // 黑色
+					if ((color.l < 0.3 && color.s < 0.2) || color.l < 0.1) {
+						_index = 9;
+					}
+					// 白色
+					if ((color.l > 0.7 && color.s < 0.4) || color.l > 0.9) {
+						_index = 10;
+					}
+                    this.newColorArr[_index].data.push(item);
                 }
             });
             // console.log(this.newColorArr);
         },
-		// 按照预定颜色分组
-		sortColorByClusters() {
-			const sortedClusters = this.sortWithClusters(this.hlsColorArr);
-			const sortedColors = sortedClusters.reduce((acc, curr) => {
-				const colors = curr.colors.map((color) => color.hex);
-				return [...acc, ...colors];
-			}, []);
-
-			this.clustersColorArr = sortedColors;
-			console.log(this.clustersColorArr);
-		},
-		// 根据饱和度排序
-		sortColorSaturation() {
-			this.active1 = true;
-			this.active2 = false;
-			if (this.hideOrigin) {
-				// 分组
-				this.newColorArr.forEach((item, index) => {
-					item.sort((a, b) => {
-						return b.s - a.s;
-					});
-				});
-			} else {
-				this.hlsColorArr.sort((a, b) => {
-					return b.s - a.s;
-				});
-			}
-
-			console.log(this.newColorArr);
-		},
         // 根据亮度
         sortColorLight() {
-			this.active1 = false;
             this.active2 = true;
+            this.caclulTime++;
+            this.$Utils.showTips({
+                message: `正在计算，请稍等...`,
+            });
+
+            let height = 100; //boxHeight
+            // if (word.length > 180) {
+            // 	height = 180;
+            // }
+
+            setTimeout(() => {
                 if (this.hideOrigin) {
                     // 分组
                     this.newColorArr.forEach((item, index) => {
-					item.sort((a, b) => {
+						// 存储排序后的hex
-						return (
+						let hexArr = [];
-							b.l - a.l
+						// 灰度区分
-							// b.hsl[0] * b.hsl[1] * b.hsl[2] -
+						// item = this.sortColorByHSL(item);
-							// a.hsl[0] * a.hsl[1] * a.hsl[2]
+						item.data.forEach((t, i) => {
-						);
+							let hsl = t.hsl;
+							let rgb = t.rgb;
+							// t.grey = hsl.l * 10 + hsl.s * 4 + hsl.h
+							t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
+							// console.log(t.grey)
+							if (hsl.l > 0.8){
+								t.grey *= 1.8;
+							}
+							if (hsl.s < 0.1){
+								t.grey *= 0.85;
+							}
+							if (hsl.l < 0.3 && hsl.s > 0.8) {
+								t.grey *= 0.95;
+							}
 						});
+						item.data.sort((a, b) => {
+							let deltaGrey = b.grey - a.grey;
+							return deltaGrey
+						});
+						item.data.forEach(element => {
+							hexArr.push(element.hex)
+						});
+						item.hexArr = hexArr;
+
+						// let sortedArr = this.sortColors(item.data);
+						// this.newColorArr[index].data = [];
+						// this.newColorArr[index].data.push(...sortedArr);
+
+						// // let other = this.getOtherInfo(sortedArr);
+						// console.log(sortedArr[0]);
+						this.newColorArr[index].min = item.data[0].hex;
+						this.newColorArr[index].max =
+							item.data[item.data.length - 1].hex;
+						this.newColorArr[index].average =
+							item.data[Math.ceil(item.data.length / 2)].hex;
+						// this.newColorArr[index].name =
+						// 	this.newColorArr[index].average;
 					});
                 } else {
-				this.hlsColorArr.sort((a, b) => {
+                    // this.hlsColorArr.sort((a, b) => {
-					return b.l - a.l;
+                    // 	return b.hsl.l - a.hsl.l;
-				});
+                    // });
+                    this.hlsColorArr = this.sortColors(this.hlsColorArr);
                 }
 
+                // this.active2 = false;
+                this.sortedStatus = true;
+            }, 1000);
+
             // console.log(this.newColorArr);
         },
-		// 计算颜色距离
+        // 计算hsl颜色距离
-		colorDistance(color1, color2) {
+        colorDistanceHsl(_color1, _color2) {
-			const x =
+            let color1 = _color1;
-				Math.pow(color1[0] - color2[0], 2) +
+            let color2 = _color2;
-				Math.pow(color1[1] - color2[1], 2) +
+            let result = 0;
-				Math.pow(color1[2] - color2[2], 2);
+            color1 = color1.hsl;
-			return Math.sqrt(x);
+            color2 = color2.hsl;
-		},
+            Object.keys(color1).forEach((key, index) => {
-		// 一维排序
+                if (key != "a") {
-		oneDimensionSorting(colors, dim) {
+                    result +=
-			return colors.sort((colorA, colorB) => {
+                        (color1[key] - color2[key]) *
-				if (colorA.hsl[dim] < colorB.hsl[dim]) {
+                        (color1[key] - color2[key]) *
-					return -1;
+                        this.balance2[index];
-				} else if (colorA.hsl[dim] > colorB.hsl[dim]) {
+                }
-					return 1;
+            });
-				} else {
+            if (Math.floor(color1.r / 30) !== Math.floor(color2.r / 30)) {
                 return 0;
             }
-			});
+            return result;
         },
-		// 根据明度
+        // 计算rgb颜色距离
-		blendRgbaWithWhite(rgba) {
+        colorDistanceRgb(_color1, _color2) {
-			const color = colorUtil.color(rgba);
+            let color1 = _color1;
-			const a = color.rgb.a / 255;
+            let color2 = _color2;
-			const r = Math.floor(color.rgb.r * a + 0xff * (1 - a));
+            let result = 0;
-			const g = Math.floor(color.rgb.g * a + 0xff * (1 - a));
+            color1 = color1.rgb;
-			const b = Math.floor(color.rgb.b * a + 0xff * (1 - a));
+            color2 = color2.rgb;
-			return "#" + ((r << 16) | (g << 8) | b).toString(16);
+            Object.keys(color1).forEach((key, index) => {
-		},
+                if (key != "a") {
-		sortWithClusters(colorsToSort) {
+                    result +=
-			const mappedColors = colorsToSort
+                        (color1[key] - color2[key]) *
-				// .map((color) => {
+                        (color1[key] - color2[key]) *
-				// 	console.log(color);
+                        this.balance3[index];
-				// 	const isRgba = color.includes("rgba");
-				// 	if (isRgba) {
-				// 		return blendRgbaWithWhite(color);
-				// 	} else {
-				// 		return color;
-				// 	}
-				// })
-				.map(colorUtil.color);
-
-			mappedColors.forEach((color) => {
-				let minDistance;
-				let minDistanceClusterIndex;
-
-				this.clusters.forEach((cluster, clusterIndex) => {
-					const colorRgbArr = [color.rgb.r, color.rgb.g, color.rgb.b];
-					const distance = this.colorDistance(
-						colorRgbArr,
-						cluster.leadColor
-					);
-					if (
-						typeof minDistance === "undefined" ||
-						minDistance > distance
-					) {
-						minDistance = distance;
-						minDistanceClusterIndex = clusterIndex;
                 }
             });
-
+            return result;
-				this.clusters[minDistanceClusterIndex].colors.push(color);
+        },
+        // 计算hsv颜色距离 然后和rgb 以及 hsl 距离相加
+        colorDistance(_color1, _color2) {
+            let color1 = _color1;
+            let color2 = _color2;
+            let result = 0;
+            result += this.colorDistanceRgb(color1, color2);
+            result += this.colorDistanceHsl(color1, color2);
+            color1 = color1.hsv;
+            color2 = color2.hsv;
+            Object.keys(color1).forEach((key, index) => {
+                if (key != "a") {
+                    result +=
+                        (color1[key] - color2[key]) *
+                        (color1[key] - color2[key]) *
+                        this.balance[index];
+                }
             });
+            return result;
+        },
+        // 根据根据颜色距离排序
+        sortColors(colors) {
+            // Calculate distance between each color
+            console.log("origin length =", colors.length);
+            if (colors.length === 0) return colors;
+            const distances = [];
+            for (let i = 0; i < colors.length; i++) {
+                distances[i] = [];
+                for (let j = 0; j < i; j++) {
+                    // if (colors[i].hex === colors[j].hex){
+                    // 	console.log('相同',colors[i].hex)
+                    // }
+                    distances.push([
+                        colors[i],
+                        colors[j],
+                        this.colorDistance(colors[i], colors[j]),
+                    ]);
+                }
+            }
+            distances.sort((a, b) => a[2] - b[2]);
 
-			this.clusters.forEach((cluster) => {
+            // console.log(distances.length);
-				const dim = ["white", "grey", "black"].includes(cluster.name)
-					? "l"
-					: "s";
-				cluster.colors = this.oneDimensionSorting(cluster.colors, dim);
-			});
 
-			return this.clusters;
+            // Put each color into separate cluster initially
+            const colorToCluster = {};
+            for (let i = 0; i < colors.length; i++) {
+                colorToCluster[colors[i].hex] = [colors[i]];
+            }
+
+            // Merge clusters, starting with lowest distances
+            let lastCluster;
+            for (let i = 0; i < distances.length; i++) {
+                const color1 = distances[i][0];
+                const color2 = distances[i][1];
+
+                const cluster1 = colorToCluster[color1 && color1.hex];
+                const cluster2 = colorToCluster[color2 && color2.hex];
+
+                if (!cluster1 || !cluster2 || cluster1 === cluster2) {
+                    continue;
+                }
+
+                // Make sure color1 is at the end of its cluster and
+                // color2 at the beginning.
+                if (color1 !== cluster1[cluster1.length - 1]) {
+                    // cluster1 = this.colorReverse(cluster1);
+                    cluster1.reverse();
+                }
+                if (color2 !== cluster2[0]) {
+                    cluster2.reverse();
+                    // cluster2 = this.colorReverse(cluster2);
+                }
+
+                // Merge cluster2 into cluster1
+                cluster1.push(...cluster2);
+                delete colorToCluster[color1.hex];
+                delete colorToCluster[color2.hex];
+                colorToCluster[cluster1[0].hex] = cluster1;
+                colorToCluster[cluster1[cluster1.length - 1].hex] = cluster1;
+                lastCluster = cluster1;
+            }
+            console.log("sorted length =", lastCluster.length);
+            // By now all colors should be in one cluster
+            return lastCluster;
         },
     },
 };
@@ -403,7 +534,8 @@ export default {
         flex-direction: row;
         flex-wrap: wrap;
         padding-bottom: 260px;
-		background: #e3e7e8;
+        // background: #e3e7e8;
+        background: rgb(84, 83, 83);
         .color-span {
             .prLayout(25px,25px);
         }
@@ -423,7 +555,7 @@ export default {
                 flex-wrap: wrap;
                 .header {
                     .prLayout(100%,60px);
-					margin: 140px 0 40px 0;
+                    margin: 0 0 0px 0;
                     line-height: 50px;
                     text-indent: 10px;
                     font-size: 30px;
@@ -434,10 +566,44 @@ export default {
                     align-items: center;
                     border-top: 2px solid #333;
                     border-bottom: 2px solid #333;
+                    background: #e3e7e8;
                     .span {
                         .prLayout(30px,30px);
                     }
                 }
+                .spans {
+                    .prLayout(100%,auto);
+                    display: flex;
+                    flex-direction: row;
+                    align-content: center;
+                    align-items: center;
+                    flex-wrap: wrap;
+                }
+                .desc {
+                    padding: 20px;
+                    display: flex;
+                    flex-direction: column;
+                    align-content: center;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    .row {
+                        .prLayout(100%,60px);
+                        line-height: 60px;
+                        display: flex;
+                        flex-direction: row;
+                        align-content: center;
+                        align-items: center;
+                        p {
+                            width: 200px;
+                            margin-right: 20px;
+                        }
+                    }
+                }
+                &::nth-first {
+                    .header {
+                        margin-top: 0;
+                    }
+                }
             }
         }
     }
@@ -451,6 +617,15 @@ export default {
         align-items: center;
         flex-wrap: wrap;
         color: rgba(0, 0, 0, 0.8);
+        .first {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+        }
         .p {
             line-height: 26px;
         }
@@ -460,9 +635,10 @@ export default {
             text-align: center;
             border-radius: 20px;
             padding: 0 20px;
-			margin: 10px;
+            margin: 40px 20px;
             background: linear-gradient(315deg, #ec7070, #c75f5f);
             box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e;
+            cursor: pointer;
             &.active {
                 color: rgba(255, 255, 255, 1);
                 background: linear-gradient(315deg, #c75f5f, #ec7070);

src/page/index/router/index.js

@@ -18,6 +18,7 @@ import Video from '../Video/index.vue'
 import Curve from '../modifier_curve/index.vue'
 import Drawing from '../Drawing/index.vue'
 import ColorSort from '../colorSort/index.vue'
+import PushCoin from '../PushCoinGame/index.vue'
 
 
 
@@ -119,10 +120,20 @@ const routes = [
 		name: "ColorSort",
 		component: ColorSort,
 		meta: {
-			title: "Color Sort", // 标题
+			title: "Color Sorting", // 标题
 			keepAlive: false, // 是否保持活跃
 		},
 	},
+	{
+		path: "/pushcoin",
+		name: "PushCoin",
+		component: PushCoin,
+		meta: {
+			title: "Push Coin Game", // 标题
+			keepAlive: false, // 是否保持活跃
+		},
+	},
+
 
 	// {
 	//   path: "/example",

src/utils/plugins/Blob.js

@@ -0,0 +1,179 @@
+/* eslint-disable */
+/* Blob.js
+ * A Blob implementation.
+ * 2014-05-27
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+ plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+(function (view) {
+    "use strict";
+
+    view.URL = view.URL || view.webkitURL;
+
+    if (view.Blob && view.URL) {
+        try {
+            new Blob;
+            return;
+        } catch (e) {}
+    }
+
+    // Internally we use a BlobBuilder implementation to base Blob off of
+    // in order to support older browsers that only have BlobBuilder
+    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
+            var
+                get_class = function(object) {
+                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+                }
+                , FakeBlobBuilder = function BlobBuilder() {
+                    this.data = [];
+                }
+                , FakeBlob = function Blob(data, type, encoding) {
+                    this.data = data;
+                    this.size = data.length;
+                    this.type = type;
+                    this.encoding = encoding;
+                }
+                , FBB_proto = FakeBlobBuilder.prototype
+                , FB_proto = FakeBlob.prototype
+                , FileReaderSync = view.FileReaderSync
+                , FileException = function(type) {
+                    this.code = this[this.name = type];
+                }
+                , file_ex_codes = (
+                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+                ).split(" ")
+                , file_ex_code = file_ex_codes.length
+                , real_URL = view.URL || view.webkitURL || view
+                , real_create_object_URL = real_URL.createObjectURL
+                , real_revoke_object_URL = real_URL.revokeObjectURL
+                , URL = real_URL
+                , btoa = view.btoa
+                , atob = view.atob
+
+                , ArrayBuffer = view.ArrayBuffer
+                , Uint8Array = view.Uint8Array
+                ;
+            FakeBlob.fake = FB_proto.fake = true;
+            while (file_ex_code--) {
+                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+            }
+            if (!real_URL.createObjectURL) {
+                URL = view.URL = {};
+            }
+            URL.createObjectURL = function(blob) {
+                var
+                    type = blob.type
+                    , data_URI_header
+                    ;
+                if (type === null) {
+                    type = "application/octet-stream";
+                }
+                if (blob instanceof FakeBlob) {
+                    data_URI_header = "data:" + type;
+                    if (blob.encoding === "base64") {
+                        return data_URI_header + ";base64," + blob.data;
+                    } else if (blob.encoding === "URI") {
+                        return data_URI_header + "," + decodeURIComponent(blob.data);
+                    } if (btoa) {
+                        return data_URI_header + ";base64," + btoa(blob.data);
+                    } else {
+                        return data_URI_header + "," + encodeURIComponent(blob.data);
+                    }
+                } else if (real_create_object_URL) {
+                    return real_create_object_URL.call(real_URL, blob);
+                }
+            };
+            URL.revokeObjectURL = function(object_URL) {
+                if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+                    real_revoke_object_URL.call(real_URL, object_URL);
+                }
+            };
+            FBB_proto.append = function(data/*, endings*/) {
+                var bb = this.data;
+                // decode data to a binary string
+                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+                    var
+                        str = ""
+                        , buf = new Uint8Array(data)
+                        , i = 0
+                        , buf_len = buf.length
+                        ;
+                    for (; i < buf_len; i++) {
+                        str += String.fromCharCode(buf[i]);
+                    }
+                    bb.push(str);
+                } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+                    if (FileReaderSync) {
+                        var fr = new FileReaderSync;
+                        bb.push(fr.readAsBinaryString(data));
+                    } else {
+                        // async FileReader won't work as BlobBuilder is sync
+                        throw new FileException("NOT_READABLE_ERR");
+                    }
+                } else if (data instanceof FakeBlob) {
+                    if (data.encoding === "base64" && atob) {
+                        bb.push(atob(data.data));
+                    } else if (data.encoding === "URI") {
+                        bb.push(decodeURIComponent(data.data));
+                    } else if (data.encoding === "raw") {
+                        bb.push(data.data);
+                    }
+                } else {
+                    if (typeof data !== "string") {
+                        data += ""; // convert unsupported types to strings
+                    }
+                    // decode UTF-16 to binary string
+                    bb.push(unescape(encodeURIComponent(data)));
+                }
+            };
+            FBB_proto.getBlob = function(type) {
+                if (!arguments.length) {
+                    type = null;
+                }
+                return new FakeBlob(this.data.join(""), type, "raw");
+            };
+            FBB_proto.toString = function() {
+                return "[object BlobBuilder]";
+            };
+            FB_proto.slice = function(start, end, type) {
+                var args = arguments.length;
+                if (args < 3) {
+                    type = null;
+                }
+                return new FakeBlob(
+                    this.data.slice(start, args > 1 ? end : this.data.length)
+                    , type
+                    , this.encoding
+                );
+            };
+            FB_proto.toString = function() {
+                return "[object Blob]";
+            };
+            FB_proto.close = function() {
+                this.size = this.data.length = 0;
+            };
+            return FakeBlobBuilder;
+        }(view));
+
+    view.Blob = function Blob(blobParts, options) {
+        var type = options ? (options.type || "") : "";
+        var builder = new BlobBuilder();
+        if (blobParts) {
+            for (var i = 0, len = blobParts.length; i < len; i++) {
+                builder.append(blobParts[i]);
+            }
+        }
+        return builder.getBlob(type);
+    };
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

src/utils/plugins/Export2Excel.js

@@ -0,0 +1,143 @@
+/* eslint-disable */
+require('script-loader!file-saver');
+require('./Blob.js'); //改成相对路径
+require('script-loader!xlsx/dist/xlsx.core.min');
+function generateArray(table) {
+    var out = [];
+    var rows = table.querySelectorAll('tr');
+    var ranges = [];
+    for (var R = 0; R < rows.length; ++R) {
+        var outRow = [];
+        var row = rows[R];
+        var columns = row.querySelectorAll('td');
+        for (var C = 0; C < columns.length; ++C) {
+            var cell = columns[C];
+            var colspan = cell.getAttribute('colspan');
+            var rowspan = cell.getAttribute('rowspan');
+            var cellValue = cell.innerText;
+            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+            //Skip ranges
+            ranges.forEach(function (range) {
+                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+                }
+            });
+
+            //Handle Row Span
+            if (rowspan || colspan) {
+                rowspan = rowspan || 1;
+                colspan = colspan || 1;
+                ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
+            }
+            ;
+
+            //Handle Value
+            outRow.push(cellValue !== "" ? cellValue : null);
+
+            //Handle Colspan
+            if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+        }
+        out.push(outRow);
+    }
+    return [out, ranges];
+};
+
+function datenum(v, date1904) {
+    if (date1904) v += 1462;
+    var epoch = Date.parse(v);
+    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+    var ws = {};
+    var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
+    for (var R = 0; R != data.length; ++R) {
+        for (var C = 0; C != data[R].length; ++C) {
+            if (range.s.r > R) range.s.r = R;
+            if (range.s.c > C) range.s.c = C;
+            if (range.e.r < R) range.e.r = R;
+            if (range.e.c < C) range.e.c = C;
+            var cell = {v: data[R][C]};
+            if (cell.v == null) continue;
+            var cell_ref = XLSX.utils.encode_cell({c: C, r: R});
+
+            if (typeof cell.v === 'number') cell.t = 'n';
+            else if (typeof cell.v === 'boolean') cell.t = 'b';
+            else if (cell.v instanceof Date) {
+                cell.t = 'n';
+                cell.z = XLSX.SSF._table[14];
+                cell.v = datenum(cell.v);
+            }
+            else cell.t = 's';
+
+            ws[cell_ref] = cell;
+        }
+    }
+    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+    return ws;
+}
+
+function Workbook() {
+    if (!(this instanceof Workbook)) return new Workbook();
+    this.SheetNames = [];
+    this.Sheets = {};
+}
+
+function s2ab(s) {
+    var buf = new ArrayBuffer(s.length);
+    var view = new Uint8Array(buf);
+    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+    return buf;
+}
+
+export function export_table_to_excel(id) {
+    var theTable = document.getElementById(id);
+    console.log('a')
+    var oo = generateArray(theTable);
+    var ranges = oo[1];
+
+    /* original data */
+    var data = oo[0];
+    var ws_name = "SheetJS";
+    console.log(data);
+
+    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+
+    /* add ranges to worksheet */
+    // ws['!cols'] = ['apple', 'banan'];
+    ws['!merges'] = ranges;
+
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+
+    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
+}
+
+function formatJson(jsonData) {
+    console.log(jsonData)
+}
+export function export_json_to_excel(th, jsonData, defaultTitle) {
+
+    /* original data */
+
+    var data = jsonData;
+    data.unshift(th);
+    var ws_name = "SheetJS";
+
+    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+
+    // 设置每列的宽度
+    ws['!cols'] = [{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:800},{wpx:100},{wpx:100},{wpx:100}];
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+
+    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+    var title = defaultTitle || '列表'
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
+}
+

src/utils/plugins/stats-2d.js

@@ -0,0 +1,49 @@
+var FPS = FPS || {};
+FPS.time = 0;
+FPS.FPS = 0;
+FPS.showText = "";
+FPS.startFPS = function (stage, pos = { x: 0, y: 0 }, app) {
+    FPS.app = app;
+    FPS.pos = pos;
+    FPS.shape = new createjs.Shape();
+    FPS.shape.graphics.beginFill("#2dffda").drawRect(pos.x, pos.y, 140, 50);
+    FPS.shape.alpha = .5;
+    FPS.txt = new createjs.Text("COUNT:", "24px Arial", "#ffffff");
+    FPS.txt.x = 20;
+    FPS.txt.y = pos.y + 10;
+    FPS.container = new createjs.Container();
+    if (FPS.app.debug) {
+        stage.addChild(FPS.container);
+    }
+    // FPS.container.addChild(FPS.shape)
+    // FPS.container.addChild(FPS.txt);
+    FPS.container.cache(pos.x, pos.y, 140, 50);
+    createjs.Ticker.addEventListener("tick", FPS.TickerFPS);
+
+    //    setInterval(FPS.TickerFPS,18)
+}
+FPS.TickerFPS = function (event) {
+    FPS.date = new Date();
+    FPS.currentTime = FPS.date.getTime();
+    if (FPS.time != 0) {
+        FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
+    }
+    FPS.time = FPS.currentTime;
+    FPS.txt.text = "FPS: " + FPS.FPS + "\n" + FPS.showText;
+    FPS.container.cache(FPS.pos.x, FPS.pos.y, 140, 50);
+}
+FPS.startFPS2 = function (stage) {
+    FPS.txt = document.getElementById("fps");
+    createjs.Ticker.addEventListener("tick", FPS.TickerFPS2);
+}
+FPS.TickerFPS2 = function (event) {
+    FPS.date = new Date();
+    FPS.currentTime = FPS.date.getTime();
+    if (FPS.time != 0) {
+        FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
+    }
+    FPS.time = FPS.currentTime;
+    FPS.txt.innerText = "FPS: " + FPS.FPS;
+}
+
+module.exports = FPS;

src/utils/plugins/stats-3d.min.js

@@ -0,0 +1,5 @@
+// stats.js - http://github.com/mrdoob/stats.js
+var Stats=function(){function h(a){c.appendChild(a.dom);return a}function k(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();k(++l%c.children.length)},!1);var g=(performance||Date).now(),e=g,a=0,r=h(new Stats.Panel("FPS","#0ff","#002")),f=h(new Stats.Panel("MS","#0f0","#020"));
+if(self.performance&&self.performance.memory)var t=h(new Stats.Panel("MB","#f08","#201"));k(0);return{REVISION:16,dom:c,addPanel:h,showPanel:k,begin:function(){g=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();f.update(c-g,200);if(c>e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}};
+Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=f;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f,
+v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+" "+h+" ("+e(c)+"-"+e(g)+")",t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};"object"===typeof module&&(module.exports=Stats);

vue.config.js

@@ -40,6 +40,12 @@ module.exports = {
         // development模式时打包也带有 hash 值
         config.output.filename('static/js/[name].[hash].js').chunkFilename('static/js/[name].[hash].js').end()
 
+        config.module
+            .rule('images')
+            .use('url-loader')
+            .loader('url-loader')
+            .tap(options => Object.assign(options, { limit: 0 }))
+
         config.resolve.alias
             .set("@", resolve("src"))
             // .set("weui", resolve("src/utils/plugins/weui.js"))