修改多边形生成

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

@@ -44,6 +44,7 @@ class game {
         this.utils = utils;
 
         // init Matter
+        this.Matter = Matter;
         this.Engine = Matter.Engine,
             this.Render = Matter.Render,
             this.Runner = Matter.Runner,
@@ -193,7 +194,7 @@ class game {
     initMatterEngine() {
         // create an engine 
         this.myEngine = this.Engine.create();
-        this.myEngine.gravity.y = 0.1;
+        this.myEngine.gravity.y = 0;
         this.myWorld = this.myEngine.world;
 
 
@@ -203,13 +204,13 @@ class game {
             engine: this.myEngine,
             canvas: this.vue.$refs.matter,
             options: {
-                width: window.innerWidth,
-                height: window.innerHeight,
-                pixelRatio: window.devicePixelRatio, // 设置像素比
+                width: 375, //window.innerWidth,
+                height: 812,  //window.innerHeight,
+                pixelRatio: 1, // 设置像素比 window.devicePixelRatio
                 background: 'transparent',
                 wireframeBackground: "transparent",
                 showAngleIndicator: false,
-                wireframes: true,
+                wireframes: false,
                 showDebug: false,
                 showVelocity: true,
             }

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

@@ -121,60 +121,90 @@ class layout {
 			y: 683
 		});
 
-		console.log(pusher)
+		// console.log(pusher)
 
 		gsap.to(pusher, { y: '-=202', yoyo: true, repeat: -1, ease: 'none', duration: 5 })
 
 		// 添加到
 		this.gamePage.addChild(bottom, pusher, top);
-		// 添加ground 
-		this.game.Composite.add(this.game.myWorld, [
-			this.game.Bodies.fromVertices(
-				window.innerWidth / 2, window.innerHeight / 2,
-				[
-					// 顶点坐标
-					{ 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 }
-				],
-				// { isStatic: true }
-			)
-		]);
+
 
 		// 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 = [
-			[-1, 1],
-			[-1, 0],
-			[1, 0],
-			[1, 1],
-			[0.5, 0.5]
+			// 顶点坐标
+			[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);
 
-		// Decompose into convex polygons, using the faster algorithm
-		var convexPolygons = decomp.quickDecomp(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);
+		// // 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,
+				convexPolygons,
+				{
+					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,
-			{ isStatic: true }
-		);
+		// 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]);
 	}
 

src/page/index/PushCoinGame/index.vue

@@ -36,13 +36,13 @@ 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 {
-    .paLayout(0,0,750px,1624px,1);
+    .paPos(0,0,1);
   }
   #stageCanvas {
     .paLayout(0,0,750px,1624px,0);