feat:ok

index.html

@@ -55,7 +55,8 @@
     <div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
         <canvas id="canvas" style="width: 100%;height: 100%"></canvas>
     </div>
-    <canvas id="renderCanvas"  style="pointer-events: none; position: absolute; width: 100%;height: 100%"></canvas>
+    <canvas id="renderCanvas"
+        style="margin:auto; left:0;top:0;right:0;bottom:0; pointer-events: none; position: absolute; width: 100%;height: 100%"></canvas>
     <!-- 帧率检测 -->
     <!-- <script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script> -->
     <!-- <script src="https://yun.duiba.com.cn/db_games/libs0126/stats.js"></script> -->

src/scenes/GameScene.ts

@@ -137,7 +137,7 @@ export class GameScene extends Scene {
         role.fy = 980 - offset;
 
         this.bgCon.addChild(role);
-        // this.composites.add(this.world, [role.phyBody]);
+        this.composites.add(this.world, [role.phyBody]);
     }
     engine; // matter引擎初始化
     composites;
@@ -154,7 +154,7 @@ export class GameScene extends Scene {
             }
         );
         this.world = this.engine.world;
-        this.engine.gravity.y = 0;
+        this.engine.gravity.y = 0.5;
 
         /** 真正运行 */
         this.runner = Runner.create();
@@ -252,20 +252,24 @@ export class GameScene extends Scene {
         console.log("stageHeight", stageHeight)
         // 循环多建几行
         for (let i = 0; i < 10; i++) {
-            this.createLineItem(stageHeight - (184 * (i + 1)), 0, false);
+            this.createLineItem(stageHeight - (184 * (i + 1)), 0, false,i);
         }
     }
     mapList = [];
-    createLineItem(h, x?: number, isprop = true) {
+    createLineItem(h, x?: number, isprop = true,idx=0) {
         let sx = x ? x : Math.floor(Math.random() * 300 -100); // 初始第一朵云的坐标
         let rLen = Math.floor(Math.random() * 4 + 2); // 每一行随机出现几朵云
         let space = Math.floor(Math.random() * 80); // 增加一点随机间距 
-        console.log("--->", sx, rLen, space)
+        console.log("--->", sx, rLen, space,h,this.stage.y)
+        const offsetY = this.stage.viewRect.y;
+        console.info('haha-->',h)
         for(let i=0; i<rLen; i++){
             let mapItem = new MapItem({
                 fx: sx + i*222 + i*(space + 20),
                 fy: h,
-                index:  this.mapList.length + 1
+                index:  this.mapList.length + 1,
+                idx:idx,
+                stageY:offsetY
             });
             this.bgCon.addChildAt(mapItem, 0);
             this.composites.add(this.world, [mapItem.phyBody]);
@@ -273,13 +277,13 @@ export class GameScene extends Scene {
             // 添加文字
             let addProp = new AddProp({
                 fx: sx + i*222 + i*(space + 20) + 46,
-                fy: h - 70,
+                fy: h - 70+offsetY,
                 index:  this.mapList.length + 1
             });
             this.bgCon.addChildAt(addProp, 1)
             this.composites.add(this.world, [addProp.phyBody]);
             this.mapList.push([mapItem, addProp])
-            // this.addPropsMap.set(addProp.phyBody.id, addProp);
+            this.addPropsMap.set(addProp.phyBody.id, addProp);
         }
     }
     timer = null;

src/scenes/components/MapItem.ts

@@ -16,9 +16,14 @@ export default class MapItem extends FYGE.Container {
         // itemImg.position.set(-itemImg.width / 2, -10);
         this.position.set(this.fx, this.fy);
         let itemImg = this.itemImg = UI.Sp(this, "cloud.png", 0, 0);
-        UI.Txt(this.itemImg, this.index, 20, "#ff0000", FYGE.TEXT_ALIGN.CENTER, 100, 0, 0)
+        UI.Txt(this, this.index, 20, "#ff0000", FYGE.TEXT_ALIGN.LEFT, 100, 0, 0)
+        var scale = document.body.clientWidth / 750;
+        console.info(scale)
+        var desW = 750;
+        var divW = document.body.clientWidth;
+        var divH = document.body.clientHeight;
         // 至于为什么比对的位置, 我也不知道🤷‍♀️
-        this.phyBody = Matter.Bodies.rectangle(this.fx/2 + 54, this.fy/2 - 50,itemImg.width/2, 10, {
+        this.phyBody = Matter.Bodies.rectangle(this.fx*scale+itemImg.width*scale/2, this.fy*scale+itemImg.height*scale/2-data.stageY*scale,itemImg.width*scale, 10, {
             isStatic: true,
             friction: 1,
             isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
@@ -26,5 +31,14 @@ export default class MapItem extends FYGE.Container {
                 fillStyle: "blue" // 填充的颜色
             }
         });
+        // 1334:1334/2 + 70
+        // this.phyBody = Matter.Bodies.rectangle(0, 1332/2,itemImg.width/2, 10, {
+        //     isStatic: true,
+        //     friction: 1,
+        //     isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
+        //     render: {
+        //         fillStyle: "blue" // 填充的颜色
+        //     }
+        // });
     }
 }
\ No newline at end of file