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