添加了物理引擎

package.json

@@ -67,6 +67,7 @@
     "glslify": "^7.1.1",
     "handtrackjs": "^0.1.5",
     "jsmpeg": "^1.0.0",
+    "matter-js": "^0.18.0",
     "meshline": "^2.0.3",
     "qrcode": "^1.4.4",
     "snapsvg-cjs": "^0.0.6",

src/assets/css/reset.less

@@ -143,6 +143,8 @@ html,body{
 		} 
 	}
 
+	
+
 	//初始化开始循环 不初始化 不会开始循环
 	.loop(@i);
 }

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

@@ -3,6 +3,7 @@ import LAYOUT from "./view";
 import { gsap } from "gsap";
 import Resource from "./preload";
 import utils from '@/utils/index.js';
+import Matter from 'matter-js';
 
 
 class game {
@@ -41,24 +42,31 @@ class game {
         this.otherLoaderArr = [];
 
         this.utils = utils;
+
+        // init Matter
+        this.Engine = Matter.Engine,
+            this.Render = Matter.Render,
+            this.Runner = Matter.Runner,
+            this.Bodies = Matter.Bodies,
+            this.Composite = Matter.Composite;
     }
 
     // 初始化
     init(pointer) {
         this.vue = pointer;
         // 初始化画布
-        this.stage = new STAGE().createStage(this);
+        // this.stage = new STAGE().createStage(this);
         //实例化layout
-        this.VIEW = new LAYOUT(this);
+        // this.VIEW = new LAYOUT(this);
 
         // 保存帧率
-        this.saveMomentFPS = setInterval(() => {
+        // this.saveMomentFPS = setInterval(() => {
-            if (this.FPS > 30)
+        //     if (this.FPS > 30)
-                this.momentFPS.push(this.FPS)
+        //         this.momentFPS.push(this.FPS)
-            // console.log(this.momentFPS.length)
+        //     // console.log(this.momentFPS.length)
-            if (this.momentFPS.length > 20)
+        //     if (this.momentFPS.length > 20)
-                this.momentFPS.shift();
+        //         this.momentFPS.shift();
-        }, 10);
+        // }, 10);
 
 
         // 绑定事件
@@ -66,7 +74,65 @@ class game {
 
 
         // 初始化主资源加载器
-        this.loadingRes();
+        // this.loadingRes();
+
+
+        // create an engine 
+        this.myEngine = this.Engine.create();
+        this.myWorld = this.myEngine.world;
+
+
+        // create a renderer
+        this.myRender = this.Render.create({
+            element: this.vue.$refs.container,
+            engine: this.myEngine,
+            options: {
+                width: window.innerWidth,
+                height: window.innerHeight,
+                pixelRatio: 1, // 设置像素比
+                showAngleIndicator: true,
+                wireframes: true,
+                showDebug: false
+            }
+        });
+
+        // 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 });
+
+        // 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]);
+
+        // create runner
+        this.Render.run(this.myRender);
+
+        // run the engine
+        this.myRunner = this.Runner.create();
+        this.Runner.run(this.myRunner, this.myEngine);
+
+
+
+
 
     }
 

src/page/index/PushCoinGame/index.vue

@@ -7,7 +7,7 @@
  * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
 -->
 <template>
-	<div class="pushcoin" id="container"></div>
+	<div class="pushcoin" id="container" ref="container"></div>
 </template>
 <script>
 // @ is an alias to /src

src/page/index/colorSort/index.vue

@@ -302,6 +302,11 @@ export default {
 				message: `正在计算，请稍等...`,
 			});
 
+			let height = 100;  //boxHeight
+			if (word.length > 180) {
+				height = 180;
+			}
+
 			setTimeout(() => {
 				if (this.hideOrigin) {
 					// 分组