游戏页面简单搭建

index.html

@@ -56,7 +56,7 @@
 </script>
 <div id="__loading__" style="position:absolute;left:50%;top:50%;margin-left:-45px;color:#ffffff">拼命加载中...</div>
 <div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
-    <canvas id="canvas" style="width: 100%;height: 100%"></canvas>
+    <canvas id="canvas" style="width: 100%;height: 100%;"></canvas>
 </div>
 <!-- 帧率检测 -->
 <!-- <script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script> -->

module/views/layers.ts

 
+import { horizontalScreen } from "../../src/Main";
 import PanelCtrl from "../ctrls/panelCtrl";
 import SceneCtrl from "../ctrls/sceneCtrl";
 
@@ -43,8 +44,8 @@ class Layers extends FYGE.Container {
             this.addChild(this[arr[i]]);
         }
         //都以顶部适配
-        // this.sceneLayer.y = this.stageOffsetY;
-        // this.popupLayer.y = this.stageOffsetY;
+        // this.sceneLayer.x = Math.abs(this.stageOffsetX);
+        // this.sceneLayer.y = Math.abs(this.stageOffsetY);
         //都以底部适配
         // this.sceneLayer.y = -this.stageOffsetY;
         // this.popupLayer.y = -this.stageOffsetY;
@@ -91,25 +92,25 @@ class Layers extends FYGE.Container {
      */
     get stageHeight() {
         if (!this.stage) return 0;
-        return this.stage.viewRect.height;
+        return horizontalScreen ? this.stage.viewRect.height : this.stage.viewRect.width;
     }
     /**
      * 舞台可见宽度
      */
     get stageWidth() {
         if (!this.stage) return 0;
-        return this.stage.viewRect.width;
+        return horizontalScreen ? this.stage.viewRect.width : this.stage.viewRect.height;
     }
     /**
      * 适配方式x两边偏移的量，固定宽度x为0
      */
     get stageOffsetX() {
         if (!this.stage) return 0;
-        return this.stage.viewRect.x;
+        return horizontalScreen ? this.stage.viewRect.x : this.stage.viewRect.y;
     }
     get stageOffsetY() {
         if (!this.stage) return 0;
-        return this.stage.viewRect.y;
+        return horizontalScreen ? this.stage.viewRect.y : this.stage.viewRect.x;
     }
     /**
      * 舞台中心点位置x

package.json

@@ -15,17 +15,20 @@
     "mock-webpack-plugin": "^2.0.0",
     "path": "^0.12.7",
     "progress": "^2.0.0",
+    "psd": "^3.2.0",
+    "readline": "^1.3.0",
     "ts-loader": "^4.0.0",
     "tslint": "^5.9.1",
     "typescript": "^3.5.1",
     "webpack": "^4.1.0",
     "webpack-cli": "^3.1.1",
     "webpack-dev-server": "^3.1.0",
-    "webpack-merge": "^4.1.2",
-    "psd": "^3.2.0",
-    "readline": "^1.3.0"
+    "webpack-merge": "^4.1.2"
+  },
+  "dependencies": {
+    "@types/matter-js": "^0.17.5",
+    "matter-js": "^0.17.1"
   },
-  "dependencies": {},
   "scripts": {
     "psd": "node scripts/psdH && node scripts/flushRes",
     "psdSin": "node scripts/psdHSin",