导出excel下载完成

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",
@@ -69,6 +72,7 @@
     "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",

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>
@@ -241,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,
@@ -248,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/index.js

@@ -4,6 +4,7 @@ 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 {
@@ -44,11 +45,13 @@ class game {
         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)
     }
 
     // 初始化
@@ -104,7 +107,7 @@ class game {
                 this.gameView = this.VIEW.loading(this);
                 this.VIEW.createLoadingParticle();
                 this.scene = 1;
-                // this.loadMainRes();
+                this.loadMainRes();
             },
         });
     }
@@ -115,10 +118,12 @@ class game {
             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,
@@ -134,7 +139,11 @@ class game {
             },
             completeCallBack: (result) => {
                 // all loaded triger
-                this.VIEW.hideLoading()
+                this.VIEW.createGamePage(this);
+                setTimeout(() => {
+                    this.VIEW.hideLoading();
+                    this.webGL && this.VIEW.loadingCacheContainer.updateCache();
+                }, 100)
                 // this.mainResLoaded();
             },
         });
@@ -183,61 +192,50 @@ class game {
         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({
+        this.myRender = this.Render.create({
             // element: this.vue.$refs.container,
-        //     engine: this.myEngine,
+            engine: this.myEngine,
-        //     options: {
+            canvas: this.vue.$refs.matter,
-        //         width: window.innerWidth,
+            options: {
-        //         height: window.innerHeight,
+                width: 375,// 375, //window.innerWidth,
-        //         pixelRatio: 1, // 设置像素比
+                height: 812, //812,  //window.innerHeight,
-        //         showAngleIndicator: true,
+                pixelRatio: 1, // 设置像素比 window.devicePixelRatio
-        //         wireframes: true,
+                background: 'transparent',
-        //         showDebug: true
+                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 boxA = this.Bodies.rectangle(100, 200, 80, 80);
-        var boxB = this.Bodies.rectangle(150, 50, 80, 80);
+        // var boxB = this.Bodies.rectangle(150, 50, 80, 80);
-        var boxC = 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 boxD = this.Bodies.rectangle(150, 50, 80, 80);
-        var ground = this.Bodies.rectangle(0, 800, 750, 10, { isStatic: true });
+        // var ground = this.Bodies.rectangle(0, 800, 750, 10, { isStatic: true });
+
 
-        // this.Composite.add(this.myWorld, [
-        //     this.Bodies.fromVertices(
-        //         0, 0,
-        //         [
-        //             // 顶点坐标
-        //             { x: 0, y: 0 },
-        //             { x: 0, y: 890 },
-        //             { x: 140, y: 815 },
-        //             { x: 208, y: 614 },
-        //             { x: 548, y: 614 },
-        //             { x: 612, y: 815 },
-        //             { x: 750, y: 890 },
-        //             { x: 750, y: 0 }
-        //         ],
-        //         { isStatic: true }
-        //     )
-        // ]);
         // add all of the bodies to the world
-        this.Composite.add(this.myWorld, [boxA, boxB, boxC, boxD, ground]);
+        // this.Composite.add(this.myWorld, [boxA, boxB, boxC, boxD, ground]);
 
         // create runner
-        // this.Render.run(this.myRender);
+        this.Render.run(this.myRender);
 
         // run the engine
-        // this.myRunner = this.Runner.create();
+        this.myRunner = this.Runner.create();
-        // this.Runner.run(this.myRunner, this.myEngine);
+        this.Runner.run(this.myRunner, this.myEngine);
-        this.Engine.run(this.myEngine);
     }
 
     //debug mode destroyed

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

@@ -24,13 +24,22 @@ export default {
 	main: {
 		imgList: [
 			{
-				id: 'logo',
+				id: 'coin',
-				src: require("@/assets/images/logo.png")
+				src: require("@/assets/images/push-coin/coin.png")
 			},
 			{
-				id: 'logo',
+				id: 'top',
-				src: require("@/assets/images/logo.png")
+				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: [
 		]

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

@@ -79,10 +79,18 @@ class creater {
     //屏幕自适应 
     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;
@@ -98,13 +106,13 @@ class creater {
         this.stage.x = 0//(this.currentStageWidth - this.initStageWidth) * this.stageCanvas.scaleX / 2;
         this.stage.y = 0//(window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY / 2;
 
-        this.offsetTop = (window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY;
 
         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)
 

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

@@ -3,6 +3,7 @@ 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
@@ -16,8 +17,6 @@ class layout {
 	}
 
 	init() {
-
-
 		//update btns position by viewport
 		// this.updatePosByViewport();
 
@@ -65,8 +64,9 @@ class layout {
 		}
 	}
 
-	createBitmap(spriteSheet, name) {
+	createBitmap(name) {
-		return new createjs.Sprite(spriteSheet, name);
+		let img = this.game.mainLoader && this.game.mainLoader.getResult(name);
+		return new createjs.Bitmap(img);
 	}
 
 	//创建loading页
@@ -95,365 +95,125 @@ class layout {
 		// 创建粒子动画
 		this.createLoadingParticle();
 
-		console.log(this.loading_bg)
+		// console.log(this.loading_bg)
 
 		return this
 	}
 
 	//隐藏loading页面
-	hideLoading(step = 1) {
+	hideLoading() {
 		//create story index
-		this.game.scene = 2;
+		gsap.to(this.game.stage.loadingContainer, { alpha: 0, duration: 0.65, })
-		gsap.to(this.game.stage.loadingContainer, {
+		gsap.to([this.game.stage.mainContainer, this.gamePage], { alpha: 1, duration: 0.65 });
-			alpha: 0, duration: 0.65, delay: step == 3 ? 1 : 0, onComplete: () => {
-				// 将loading重置ui显示 为二次加载资源做显示
-				this.changeLoadingLayout(step);
-			}
-		})
-		gsap.to(this.game.stage.mainContainer, { alpha: 1, duration: 0.65 });
 	}
 
-	// 准备下一次loading
+	// 创建游戏页
-	changeLoadingLayout(step) {
+	createGamePage(game) {
-		if (step == 1) {
+		this.game = game;
-			// 进度归零
+		this.gamePage = new createjs.Container().set({ alpha: 0 });
-			this.loading_progress_text.text = '0%';
+		this.game.stage.mainContainer.addChild(this.gamePage);
-			// 隐藏元素
-			gsap.set([this.loading_start, this.loading_progress_bg, this.loading_progress_bar, this.loading_snow, this.loading_text], { alpha: 0 })
-			// 显示元素
-			gsap.set([this.loading_text2, this.loading_box, this.loading_light, this.loading_person], { alpha: 1 })
-			gsap.set(this.loading_progress_text, { alpha: 1, y: 1260 })
-			// 准备动画
-			this.readyLangLoaderAni();
-		} else if (step == 2) {
-			// 隐藏元素
-			gsap.set([this.loading_text2, this.loading_light, this.loading_person], { alpha: 0 })
-			gsap.set(this.loading_progress_text, { alpha: 0 })
-			// 显示元素
-			gsap.set([this.loading_text3, this.loading_light2, this.loading_arrow], { alpha: 1 })
-			// 如果是英文 显示英文文案
-			if (this.game.langConfig.id == 3) {
-				gsap.set([this.loading_text2_en, this.loading_text3], { alpha: 0 })
-				gsap.set([this.loading_text3_en], { alpha: 1 })
-			}
-			// 准备动画
-			this.readyPosterLoaderAni();
-		}
-	}
 
-	// 准备语言加载动画
+		let bottom = this.createBitmap('bottom_ban').set({ y: 560 });
-	readyLangLoaderAni() {
+		let top = this.createBitmap('top');
-		this.langLoaderAni = [];
+		// 添加推板
-		let ani1 = new gsap.timeline({ repeat: -1, paused: true })
+		let pusher = this.createBitmap('pusher').set({
-			.to([this.loading_light, this.loading_person], { alpha: 0.86, duration: 0.2 })
+			x: 142,
-			.to([this.loading_light, this.loading_person], { alpha: 1, duration: 0.15 })
+			y: 683
-			.to([this.loading_light, this.loading_person], { alpha: 0.6, duration: 0.2 })
-			.to([this.loading_light, this.loading_person], { alpha: 1, duration: 0.1 })
-
-		let ani2 = gsap.to([this.loading_person, this.loading_box], { y: '+=15', yoyo: true, repeat: -1, duration: 1.5 })
-
-
-		this.langLoaderAni.push(ani1, ani2)
-	}
-
-	// 播放语言加载时动画
-	playLangLoaderAni() {
-		this.langLoaderAni.forEach((item) => {
-			item.restart();
-		})
-	}
-
-	// 暂停语言加载时动画
-	pauseLangLoaderAni() {
-		this.langLoaderAni.forEach((item) => {
-			item.pause();
-		})
-	}
-
-	// 准备语言加载动画
-	readyPosterLoaderAni() {
-		this.posterLoaderAni = [];
-		let ani1 = new gsap.timeline({ repeat: -1, paused: true })
-			.to(this.loading_light2, { alpha: 0.86, duration: 0.2 })
-			.to(this.loading_light2, { alpha: 1, duration: 0.15 })
-			.to(this.loading_light2, { alpha: 0.6, duration: 0.2 })
-			.to(this.loading_light2, { alpha: 1, duration: 0.1 })
-
-		let ani2 = gsap.to([this.loading_box], { y: '+=15', yoyo: true, repeat: -1, duration: 1.5 })
-
-		let ani3 = gsap.to([this.loading_arrow], { y: '+=15', scaleX: 0.95, yoyo: true, repeat: -1, duration: 1.5 })
-
-
-		this.posterLoaderAni.push(ani1, ani2, ani3)
-	}
-
-	// 播放语言加载时动画
-	playPosterLoaderAni() {
-		this.posterLoaderAni.forEach((item) => {
-			item.restart();
-		})
-	}
-
-	// 暂停语言加载时动画
-	pausePosterLoaderAni() {
-		this.posterLoaderAni.forEach((item) => {
-			item.pause();
-		})
-	}
-
-
-	// 帧生成动画
-	framePlayer(config) {
-		// 图像资源
-		// 容器
-		// const container = new createjs.Container();
-
-		// loader
-		const loader = this.game[config.name];
-
-		// images 
-		const images = [];
-		config.imgIds.forEach((item) => {
-			images.push(loader.getResult(item));
-		})
-
-		// handle speed
-		Object.keys(config.sprite.animations).forEach((key) => {
-			// console.log('speed=', this.game.globalSpeed * 0.18)
-			config.sprite.animations[key].speed = this.game.globalSpeed * 0.18;
-			config.sprite.animations[key].next = 'wait'
 		});
 
-		// animation config
+		// console.log(pusher)
-		const aniData = {
-			images,
-			frames: config.sprite.frames,
-			animations: config.sprite.animations
-		}
 
-		const spriteSheet = new createjs.SpriteSheet(aniData);
+		gsap.to(pusher, { y: '-=202', yoyo: true, repeat: -1, ease: 'none', duration: 5 })
-		const animation = new createjs.Sprite(spriteSheet);
 
-		// default setting
+		// 添加到
-		if (config.name === 'guide' || config.name === 'wait') {
+		this.gamePage.addChild(bottom, pusher, top);
-			animation.set({
+
-				name: config.name,
+
-				x: 390,
+		// Create a concave polygon
-				y: 280 + 512,
+		var _g = [
-				scaleX: 1.25,
+			// 顶点坐标
-				scaleY: 1.25,
+			{ x: 0, y: 0 },
-				regX: 750 * 0.85 / 2,
+			{ x: 0, y: 956 },
-				regY: 1624 * 0.85 / 2,
+			{ x: 141, y: 881 },
-				alpha: 0
+			{ 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)
+				}
 			})
-		} else {
-			animation.set({
-				name: config.name,
-				x: 220,
-				y: 565 + 512,
-				scaleX: 1,
-				scaleY: 1,
-				regX: 750 * 1 / 2,
-				regY: 1624 * 1 / 2,
-				alpha: 0
 		})
-		}
 
-
+		console.log(convexPolygons)
-
+		// 添加ground 
-
+		this.game.Composite.add(this.game.myWorld,
-
+			this.game.Bodies.fromVertices(
-		return animation
+				window.innerWidth / 2, window.innerHeight / 2,
-	}
+				_g,
-
-	// 生成海报
-	createPoster(nickname = '', level = 1) {
-		this.posterContainer = new createjs.Container().set({ alpha: 1, name: 'posterContainer' });
-		// this.game.stage.mainContainer.addChild(this.posterContainer);
-
-		// 海报图片
-		let posterImg = this.game.posterLoader.getResult('poster_bg');
-		// 海报对象
-		let poster = new createjs.Bitmap(posterImg);
-
-		// nickname
-		let nt;
-		if (nickname) {
-			nt = this.game.vue.$Utils.cutString(nickname, 20, true);
-		}
-		let nicknameText = new createjs.Text(nt, "38px Helvetica, Arial, sans-serif", "#31425b").set({
-			x: 375,
-			y: 1086,
-			textAlign: 'center'
-		});
-
-		let levelImg = this.game.posterLoader.getResult(`word_${level}`);
-		let posConfig = [
 				{
-				x: 50,
+					isStatic: true,
-				y: 239
+					scale: {
+						screenX: 0.5,
+						screenY: 0.5,
 					},
-			{
+					render: {
-				x: 70,
+						fillStyle: 'rgba(39,7,238,0.25)'
-				y: 242
-			},
-			{
-				x: 54,
-				y: 243
-			},
-			{
-				x: 57,
-				y: 224
-			},
-			{
-				x: 50,
-				y: 243
 					}
-		]
+				},
-		// 等级称号
+
-		let levelTitle = new createjs.Bitmap(levelImg).set(
+			)
-			this.game.langConfig.id == 3 ? posConfig[Number(level) - 1] : posConfig[4]
 		);
 
-
+		// 
-		let personImg = this.game.posterLoader.getResult('person');
+		// let bounds = pusher.getBounds();
-		// 王冰冰
+		// pusher.body = this.game.Bodies.trapezoid(
-		let person = new createjs.Bitmap(personImg).set({
+		// 	pusher.x,
-			x: this.game.langConfig.id == 3 ? 76 : 86,
+		// 	pusher.y,
-			y: this.game.langConfig.id == 3 ? 381 : 256
+		// 	bounds.width,
-		});
+		// 	bounds.height,
-
+		// 	1,
-		// 根据版本选择不同的二维码 目前全部选用微信版本二维码
+		// 	{ isStatic: true }
-		let codeName = 'qrcode';
+		// );
-		// switch (process.env.VUE_APP_CURRENTMODE) {
+		// this.game.Composite.add(this.myWorld, [pusher.body]);
-		// 	case 'ysprod':
-		// 		codeName = 'ys_qrcode';
-		// 		break;
-		// 	case 'wbprod':
-		// 		codeName = 'wb_qrcode';
-		// 		break;
-		// 	default:
-		// 		codeName = 'qrcode';
-		// 		break;
-		// }
-		let qrcodeImg = this.game.posterLoader.getResult(codeName);
-		// 海报对象
-		let qrcode = new createjs.Bitmap(qrcodeImg).set({
-			x: this.game.langConfig.id == 3 ? 305 : 306,
-			y: this.game.langConfig.id == 3 ? 1256 : 1275,
-			scaleX: 0.34,
-			scaleY: 0.34,
-			width: 136,
-			height: 136
-		});
-
-		let logoImg = this.game.posterLoader.getResult('logo');
-		// 海报对象
-		let logo = new createjs.Bitmap(logoImg).set({
-			x: this.game.langConfig.id == 3 ? 341 : 341,
-			y: this.game.langConfig.id == 3 ? 1482 : 1482,
-		});
-
-		// 插入container
-		this.posterContainer.addChild(poster, nicknameText, qrcode, levelTitle, person, logo);
-
-		this.posterContainer.cache(0, 0, 750, 1538);
-
-		// easejs > 1.0.0 getCacheDataURL报错 0.8.2版本正常
-		let baseUrl = this.posterContainer.cacheCanvas.toDataURL('image/png');
-		// let baseUrl = this.posterContainer.getCacheDataURL();
-
-		setTimeout(() => {
-			this.destroyPosterCreater();
-		}, 1000);
-
-		return baseUrl
 	}
 
-	// 销毁海报生成器
+	// 生成硬币
-	destroyPosterCreater() {
+	createCoin() {
-		this.posterContainer.uncache();
+		let coinImg = this.game.mainLoader.getResult('coin');
-		this.posterContainer.removeAllChildren();
+		let coin = new createjs.Bitmap(coinImg);
-		this.game.stage.mainContainer.removeChild(this.posterContainer);
-		this.posterContainer = null;
 	}
 
-	// index 粒子制造机
-	createParticle() {
-
-		// 容器
-		// const loadingContainer = this.game.stage.loadingContainer;
-
-		// loader
-		const loader = this.game.vue.$beforeLoader;
-
-		// sprite image
-		const spriteImg = loader.getResult('snowSprite');
-
-
-		const container = new createjs.Container();
-
-
-		const aniData = {
-			images: [spriteImg],
-			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-1": { "frames": [0] },
-				"snow-2": { "frames": [1] },
-				"snow-3": { "frames": [2] },
-				"snow-4": { "frames": [3] },
-				"snow-5": { "frames": [4] },
-				"snow-6": { "frames": [3] },
-				"snow-7": { "frames": [4] },
-				"snow-8": { "frames": [2] },
-				"snow-9": { "frames": [3] },
-				"snow-10": { "frames": [1] },
-			}
-		}
-
-		const spriteSheet = new createjs.SpriteSheet(aniData);
-
-		const arr = [];
-		for (let i = 0; i < (window.deviceInfo.system == 'IOS' ? 50 : 50); i++) {
-			const scale = Math.random() * 0.35 + 0.5;
-			const name = `snow-${this.game.vue.$Utils.rangeRandom(1, 10)}`;
-			const sprite = this.createBitmap(spriteSheet, name).set({
-				x: Math.random() * 750 - 30,
-				y: Math.random() * 1300,
-				ox: Math.random() * 750,
-				oy: -50,
-				// regX:14,
-				// regY:14,
-				scaleX: scale,
-				scaleY: scale,
-				speedX: (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 0.5 + 0.25),
-				speedY: Math.random() * 1 + 1,
-				speedR: Math.random() * 0.5 + 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.prarticleContainer = container;
-		this.game.stage.mainContainer.addChild(container);
-		return container
-	}
-
-
 	// loading 粒子制造机
 	createLoadingParticle() {
 		const container = new createjs.Container();

src/page/index/PushCoinGame/index.vue

@@ -7,7 +7,9 @@
  * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
 -->
 <template>
-	<div class="pushcoin" id="container" ref="container"></div>
+  <div class="pushcoin" id="container" ref="container">
+    <canvas ref="matter" class="matter"></canvas>
+  </div>
 </template>
 <script>
 // @ is an alias to /src
@@ -34,10 +36,16 @@ export default {
 };
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
+<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

@@ -92,6 +92,14 @@
                 ref="btn2"
             >
                 排序
+            </div>
+			<div
+                class="btn"
+                @click="export2Excel"
+                :class="{ active: active3 }"
+                ref="btn3"
+            >
+                导出excel
             </div>
         </div>
     </div>
@@ -100,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",
@@ -111,87 +120,88 @@ export default {
             sortedStatus: false,
             active1: false,
             active2: false,
+            active3: false,
             hlsColorArr: [],
             newColorArr: [
                 {
-					name: "",
+					name: "红",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "紫",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "蓝紫",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "蓝",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "青",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "绿",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "黄绿",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "黄",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "橘色",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "黑",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "白",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-					name: "",
+					name: "灰",
 					data: [],
 					average: "",
 					min: "",
@@ -236,6 +246,24 @@ export default {
                 onStart: () => {},
             });
         },
+		// 格式化json数据
+		formatJson(filterVal, jsonData) {
+			return jsonData.map(v => filterVal.map(j => v[j]))
+		},
+		// 导出excel
+		export2Excel(){
+			if (!this.active2 || !this.hideOrigin){
+				this.$Utils.showTips({
+					message: `请先分组排序...`,
+				});
+				return false
+			}
+			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
@@ -282,11 +310,11 @@ export default {
                         _index = 11;
                     }
                     // 黑色
-					if (color.l < 0.2 && color.s < 0.18) {
+					if ((color.l < 0.3 && color.s < 0.2) || color.l < 0.1) {
 						_index = 9;
 					}
 					// 白色
-					if (color.l > 0.75 && color.s < 0.15) {
+					if ((color.l > 0.7 && color.s < 0.4) || color.l > 0.9) {
 						_index = 10;
 					}
                     this.newColorArr[_index].data.push(item);
@@ -303,43 +331,56 @@ export default {
             });
 
             let height = 100; //boxHeight
-			if (word.length > 180) {
+            // if (word.length > 180) {
-				height = 180;
+            // 	height = 180;
-			}
+            // }
 
             setTimeout(() => {
                 if (this.hideOrigin) {
                     // 分组
                     this.newColorArr.forEach((item, index) => {
+						// 存储排序后的hex
+						let hexArr = [];
 						// 灰度区分
-						// item = this.sortColor(item);
+						// item = this.sortColorByHSL(item);
-						// console.log(item)
+						item.data.forEach((t, i) => {
-						// item.forEach((t, i) => {
+							let hsl = t.hsl;
-						// 	let rgb = t.rgb;
+							let rgb = t.rgb;
-						// 	t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
+							// t.grey = hsl.l * 10 + hsl.s * 4 + hsl.h
-						// });
+							t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
-						// item.sort((a, b) => {
+							// console.log(t.grey)
-						// 	let deltaGrey = b.grey - a.grey;
+							if (hsl.l > 0.8){
-						// 	let result = deltaGrey;
+								t.grey *= 1.8;
-						// 	return (
+							}
-						// 		// Math.random() > 0.5 ? 1 : -1
+							if (hsl.s < 0.1){
-						// 		result
+								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);
+						// let sortedArr = this.sortColors(item.data);
-						this.newColorArr[index].data = [];
+						// this.newColorArr[index].data = [];
-						this.newColorArr[index].data.push(...sortedArr);
+						// this.newColorArr[index].data.push(...sortedArr);
 
-						// let other = this.getOtherInfo(sortedArr);
+						// // let other = this.getOtherInfo(sortedArr);
-						console.log(sortedArr[0]);
+						// console.log(sortedArr[0]);
-						this.newColorArr[index].min = sortedArr[0].hex;
+						this.newColorArr[index].min = item.data[0].hex;
 						this.newColorArr[index].max =
-							sortedArr[sortedArr.length - 1].hex;
+							item.data[item.data.length - 1].hex;
 						this.newColorArr[index].average =
-							sortedArr[Math.ceil(sortedArr.length / 2)].hex;
+							item.data[Math.ceil(item.data.length / 2)].hex;
-						this.newColorArr[index].name =
+						// this.newColorArr[index].name =
-							this.newColorArr[index].average;
+						// 	this.newColorArr[index].average;
 					});
                 } else {
                     // this.hlsColorArr.sort((a, b) => {
@@ -348,7 +389,7 @@ export default {
                     this.hlsColorArr = this.sortColors(this.hlsColorArr);
                 }
 
-				this.active2 = false;
+                // this.active2 = false;
                 this.sortedStatus = true;
             }, 1000);
 
@@ -594,7 +635,7 @@ export default {
             text-align: center;
             border-radius: 20px;
             padding: 0 20px;
-			margin: 40px;
+            margin: 40px 20px;
             background: linear-gradient(315deg, #ec7070, #c75f5f);
             box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e;
             cursor: pointer;

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

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

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"))