跳一跳

src/scenes/GameScene.ts

@@ -34,8 +34,6 @@ export class GameScene extends Scene {
     xiangpop: FYGE.Sprite;
     monster: FYGE.Sprite;
 
-
-    jumpLock = false;
     isonce = false;
     wordList = this.getWordList(); // 待随机出现的列表
 
@@ -140,7 +138,7 @@ export class GameScene extends Scene {
         this.addRole();
 
         this.addEventListener(FYGE.Event.ENTER_FRAME, this.onFarm, this);
-        this.composites.add(this.world, [this._role.phyBody]);
+        // this.composites.add(this.world, [this._role.phyBody]);
     }
     _role; //人物
     bgCon; //背景移动
@@ -148,12 +146,12 @@ export class GameScene extends Scene {
     addRole() {
         let offset = (1624 - this.stage.viewRect.height) / 2;
         let role = this._role = new Role({
-            fx: 339,
-            fy: 980 - offset,
             stageY: this.stage.viewRect.y,
         });
+        role.fx = 339;
+        role.fy = 980 - offset;
         this.bgCon.addChild(role);
-        this.composites.add(this.world, [role.phyBody]);
+        this.composites.add(this.world, [this._role.phyBody]);
     }
     engine; // matter引擎初始化
     composites;
@@ -179,7 +177,8 @@ export class GameScene extends Scene {
         this.composites = Composite;
 
         Matter.Events.on(this.engine, "collisionStart", this.onCollisionStart.bind(this));
-        Matter.Events.on(this.engine, "tick", this.onCollisionTick.bind(this));
+        // Matter.Events.on(this.engine, "tick", this.onCollisionTick.bind(this));
+        // Matter.Events.on(this.engine, "beforeUpdate", this.onBeforeUpdate.bind(this));
         // 创建一个渲染器
         const render = Render.create({
             // element: document.body,
@@ -212,8 +211,15 @@ export class GameScene extends Scene {
         });
         Render.run(render);
     }
+    onBeforeUpdate(e) {
+        if (this.engine.timing.timestamp - this.lastTime >= 1000) {
+            this._role.jump()
+            this.lastTime = this.engine.timing.timestamp;
+        }
+    }
     onCollisionTick(e) {
     }
+    lastTime = 0
     onCollisionStart(e) {
         let pairs = e.pairs;
         // 
@@ -222,14 +228,11 @@ export class GameScene extends Scene {
             // ip 与 云朵 碰撞
             console.log(p.bodyA.objType, p.bodyB.objType)
             if ((p.bodyA.objType == "cloud" && p.bodyB == this._role.phyBody) || (p.bodyB.objType == "cloud" && p.bodyA == this._role.phyBody)) {
-                // this._role.jump()
-                if (!this.jumpLock) {
+                if (this.engine.timing.timestamp - this.lastTime >= 400) {
                     this._role.jump()
-                    this.jumpLock = true;
-                    setTimeout(() => {
-                        this.jumpLock = false
-                    }, 200)
+                    this.lastTime = this.engine.timing.timestamp;
                 }
+                
             }
         })
         // pairs.map((p) => {
@@ -324,6 +327,9 @@ export class GameScene extends Scene {
     }
     timer = null;
     onFarm() {
+        let roleY = this._role.y + this.bgCon.y;
+
+        this.moveMap(600 - roleY)
         // let roleY = this._role.y + this.bgCon.y;
 
         // if (roleY < 600) {
@@ -363,7 +369,7 @@ export class GameScene extends Scene {
 
     }
     moveMap(y) {
-        // this.bgCon.y = this.bgCon.y + y;
+        this.bgCon.y = this.bgCon.y + y;
     }
 
     removeWorld() {

src/scenes/components/MapItem.ts

@@ -23,7 +23,7 @@ export default class MapItem extends FYGE.Container {
         // 至于为什么比对的位置, FYGE的适配缩放, 以及Main的剪裁
         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: 0,
+            friction: 1,
             isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
             render: {
                 fillStyle: "blue" // 填充的颜色

src/scenes/components/ObstacleProp.ts

@@ -14,8 +14,6 @@ export default class ObstacleProp extends FYGE.Container {
 
         this.phyBody = Matter.Bodies.rectangle(this.x, this.y, itemImg.width , itemImg.height , {
             isStatic: true,
-            friction: 1,
-
             isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
         });
 

src/scenes/components/Role.ts

@@ -11,38 +11,39 @@ export default class Role extends FYGE.Container {
     jumpSvga;
     downSvga;
     lightSvga;
-    fx;
-    fy;
+    // fx;
+    // fy;
     bili;
     staY;
 
     constructor(data?) {
         super();
-        this.fx = data.fx;
-        this.fy = data.fy;
+        // this.fx = data.fx;
+        // this.fy = data.fy;
         this.staY = data.stageY;
-        this.position.set(this.fx, this.fy);
+        this.position.set(this.x, this.y);
         let itemImg = this.itemImg = UI.Sp(this, "controlpeo.png", 0, 0);
         let scale = this.bili = document.body.clientWidth / 750;
         // 至于为什么比对的位置, FYGE的适配缩放, 以及Main的剪裁
-        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, itemImg.height * scale, {
+        this.phyBody = Matter.Bodies.rectangle(this.x * scale + itemImg.width * scale / 2, this.y * scale + itemImg.height * scale / 2 - data.stageY * scale, itemImg.width * scale, itemImg.height * scale, {
             isStatic: false,
-            isSensor: false, // 传感器，可以检测到碰撞，但是不参与碰撞
-            restitution: 0.8,
-            friction: 0.01,
-            inverseMass: 0.2,
+            // isSensor: false, // 传感器，可以检测到碰撞，但是不参与碰撞
+            // restitution: 0.1,
+            // friction: 0.01,
+            // inverseMass: 0.2,
             // restitution: 0.8, // 定义刚体恢复（弹性）的数字
             // // // density: 0.05,// 定义刚体密度的数字，即单位面积的质量
             // // friction: 0.02,
             // friction: 0.5, // 设置摩擦力
             // frictionAir: 0.01, // 设置空气摩擦力
-            
+
             render: {
                 fillStyle: "red" // 填充的颜色
             }
         });
         // 绘制ip
         this.getSvga()
+        this.setPhyPos();
         this.addEventListener(
             FYGE.Event.ADDED_TO_STAGE,
             () => {
@@ -96,74 +97,80 @@ export default class Role extends FYGE.Container {
 
     /** 根据物理刚体，更新当前的坐标。 */
     private onFarm() {
-        this.x = (this.phyBody.position.x - this.itemImg.width * this.bili / 2) / this.bili;
-        this.y = (this.phyBody.position.y + (this.staY * this.bili) - this.itemImg.height * this.bili / 2) / this.bili;
-        // if (this.beforeY) {
-        //     if (this.beforeY > this.phyBody.position.y) {
-
-        //         this.direction = 'up'
-        //     }
-
-        //     if (this.beforeY < this.phyBody.position.y) {
-
-        //         this.direction = 'down'
-        //     }
-        // }
-
-        // if (this.phyBody.position.x > 750) {
-        //     Matter.Body.setPosition(this.phyBody, {
-        //         x: 0,
-        //         y: this.phyBody.position.y
-        //     })
-
-        // } else if (this.phyBody.position.x < 0) {
-        //     Matter.Body.setPosition(this.phyBody, {
-        //         x: 750,
-        //         y: this.phyBody.position.y
-        //     })
-        // } else {
-        //     this.x = this.phyBody.position.x;
-        //     this.y = this.phyBody.position.y;
-        // }
-
-        // this.beforeY = this.phyBody.position.y;
-
+        let Tx = (this.phyBody.position.x - this.itemImg.width * this.bili / 2) / this.bili;
+        let Ty = (this.phyBody.position.y + (this.staY * this.bili) - this.itemImg.height * this.bili / 2) / this.bili;
+
+        this.x = Tx;
+        this.y = Ty;
+        if (Tx > 750) {
+            this.fx = 0;
+            this.fy = Ty;
+        } else if (Tx < 0) {
+            this.fx = 750;
+            this.fy = Ty
+        } else {
+            this.fx = Tx;
+            this.fy = Ty
+        }
     }
-    
+    //     this.x = Tx
+    // }
+    // this.x = 
+    // this.y = 
+    // if (this.beforeY) {
+    //     if (this.beforeY > this.phyBody.position.y) {
+
+    //         this.direction = 'up'
+    //     }
+
+    //     if (this.beforeY < this.phyBody.position.y) {
+
+    //         this.direction = 'down'
+    //     }
+    // }
+
+    // if (this.phyBody.position.x > 750) {
+    //     Matter.Body.setPosition(this.phyBody, {
+    //         x: 0,
+    //         y: this.phyBody.position.y
+    //     })
+
+    // } else if (this.phyBody.position.x < 0) {
+    //     Matter.Body.setPosition(this.phyBody, {
+    //         x: 750,
+    //         y: this.phyBody.position.y
+    //     })
+    // } else {
+    //     this.x = this.phyBody.position.x;
+    //     this.y = this.phyBody.position.y;
+    // }
+
+    // this.beforeY = this.phyBody.position.y;
+
     jump() {
         setTimeout(() => {
-            Matter.Body.applyForce(this.phyBody, this.phyBody.position, {
-                x: 0,
-                y: -0.1
-            });
+            Matter.Body.setVelocity(this.phyBody, { x: 0, y: -8 }); // 立即设置刚体的线速度。位置、角度、力等不变
+            // Matter.Body.applyForce(this.phyBody, this.phyBody.position, {
+            //     x: 0,
+            //     y: -10
+            // });
         })
     }
 
-    // onMouseDown(e) {
-    //     let offsetX = e.stageX - this.x;
-    //     let offsetY = e.stageY - this.y;
-    //     this.stage.addEventListener(
-    //         FYGE.MouseEvent.MOUSE_MOVE,
-    //         function (event) {
-    //             let resx = event.stageX - offsetX;
-    //             let resy = event.stageY - offsetY;
-    //             if (resx < 50 || resx > 700) { return }
-    //             this.x = resx;
-    //             // this.y = resy;
-    //             Matter.Body.setPosition(this.phyBody, {
-    //                 x: resx,
-    //                 y: this.y,
-    //             });
-    //         },
-    //         this
-    //     );
-
-    //     this.stage.addEventListener(
-    //         FYGE.MouseEvent.MOUSE_UP,
-    //         function (event) {
-    //             this.stage.removeAllEventListener()
-    //         },
-    //         this
-    //     );
-    // }
+    set fx(value: number) {
+        this.position.x = value;
+        this.setPhyPos();
+    }
+
+    set fy(value: number) {
+        this.position.y = value;
+        this.setPhyPos();
+    }
+
+    setPhyPos() {
+        Matter.Body.setPosition(this.phyBody, {
+            x: this.x * this.bili + this.itemImg.width * this.bili / 2,
+            y: this.y * this.bili + this.itemImg.height * this.bili / 2 - this.staY * this.bili,
+        });
+    }
 }
\ No newline at end of file