diff --git a/package.json b/package.json
index f8913a3..9d87972 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/css/reset.less b/src/assets/css/reset.less
index 32481f1..b39429a 100644
--- a/src/assets/css/reset.less
+++ b/src/assets/css/reset.less
@@ -143,6 +143,8 @@ html,body{
}
}
+
+
//初始化开始循环 不初始化 不会开始循环
.loop(@i);
}
diff --git a/src/page/index/PushCoinGame/game/index.js b/src/page/index/PushCoinGame/game/index.js
index 3960fa8..e9b1be7 100644
--- a/src/page/index/PushCoinGame/game/index.js
+++ b/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(() => {
- if (this.FPS > 30)
- this.momentFPS.push(this.FPS)
- // console.log(this.momentFPS.length)
- if (this.momentFPS.length > 20)
- this.momentFPS.shift();
- }, 10);
+ // 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);
// 绑定事件
@@ -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);
+
+
+
+
}
diff --git a/src/page/index/PushCoinGame/index.vue b/src/page/index/PushCoinGame/index.vue
index e6b2995..d2fccf3 100644
--- a/src/page/index/PushCoinGame/index.vue
+++ b/src/page/index/PushCoinGame/index.vue
@@ -7,7 +7,7 @@
* @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
-->
-
+