添加配置项 + NewEventDispatcher

output.js

@@ -62705,6 +62705,7 @@ exports.GameConfig = {
     helperDebuger: false,
     collisionDebuger: false,
     initVehiclePos: new THREE.Vector3(0, 3, 0),
+    maxSpeed: 80,
     CameraPosConfig: (function () {
         let posList = [
             0, 8, -20,
@@ -62825,7 +62826,7 @@ const RES_1 = __webpack_require__(/*! ../module/RES */ "./src/module/RES.ts");
 const GameConfig_1 = __webpack_require__(/*! ./GameConfig */ "./src/CarScene/GameConfig.ts");
 const dom_1 = __webpack_require__(/*! ./dom */ "./src/CarScene/dom.ts");
 const ResJson_1 = __webpack_require__(/*! ../ResJson */ "./src/ResJson.ts");
-const __1 = __webpack_require__(/*! .. */ "./src/index.ts");
+const message_1 = __webpack_require__(/*! ../message */ "./src/message.ts");
 function gradTexture(color) {
     var c = document.createElement("canvas");
     var ct = c.getContext("2d");
@@ -62886,7 +62887,7 @@ const _defaultVector3 = new THREE.Vector3();
 const _rayCaster = new THREE.Raycaster();
 const _v3 = new THREE.Vector3();
 class CarScene extends PerspectiveScene_1.PerspectiveScene {
-    constructor(d) {
+    constructor(d, u) {
         super(d);
         this.onDeviceOrientationChange = () => {
             this.timeoutId && clearTimeout(this.timeoutId);
@@ -62918,7 +62919,7 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
                     });
                     this.UICtn.style.width = '100vw';
                 }
-                __1.GDispather.dispatchEvent('orientationChange', {
+                message_1.GDispather.dispatchEvent('orientationChange', {
                     isPortrait
                 });
             }, 50);
@@ -62938,6 +62939,7 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
         this.cameraPos = GameConfig_1.GameConfig.CameraPosConfig.change();
         this.initStats();
         this.initEvents();
+        this.init2DUi(u);
         this.initRenderer();
     }
     get groupNames() {
@@ -62945,7 +62947,6 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
     }
     // 初始化 render
     initRenderer() {
-        this.init2DUi();
         this.onDeviceOrientationChange();
     }
     initStats() {
@@ -63020,9 +63021,9 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
         // console.log('=======imgTexture=======', imgTexture, imgTexture.image)
         this.initAmmoPhySicWorld();
     }
-    init2DUi() {
+    init2DUi(d) {
         // @ts-ignore
-        const remScale = window['remScale'] || 0.5;
+        const remScale = 0.5; // window['remScale']  这里就写死吧
         this.UICtn = dom_1.Dom.div({
             attrs: {
                 class: '2d-ui'
@@ -63113,10 +63114,13 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
             },
             styles: {
                 backgroundImage: `url(${ResJson_1.ResJson.path}UI/left-icon.png)`,
-                backgroundSize: '100% 100%',
+                backgroundSize: 'contain',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
                 width: `${70 * remScale}px`,
                 height: `${126 * remScale}px`,
-                marginLeft: '40px'
+                marginLeft: '60px',
+                padding: '0 20px'
             },
             events: {
                 touchstart: {
@@ -63136,10 +63140,13 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
             },
             styles: {
                 backgroundImage: `url(${ResJson_1.ResJson.path}UI/right-icon.png)`,
-                backgroundSize: '100% 100%',
+                backgroundSize: 'contain',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
                 width: `${70 * remScale}px`,
                 height: `${126 * remScale}px`,
-                marginLeft: '40px'
+                marginLeft: '40px',
+                padding: '0 20px'
             },
             events: {
                 touchstart: {
@@ -63167,7 +63174,9 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
             },
             styles: {
                 backgroundImage: `url(${ResJson_1.ResJson.path}UI/brake-icon.png)`,
-                backgroundSize: '100% 100%',
+                backgroundSize: 'contain',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
                 width: `${102 * remScale}px`,
                 height: `${150 * remScale}px`,
             },
@@ -63207,7 +63216,8 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
                 }
             }
         })));
-        this.rendererDom.parentNode.appendChild(this.UICtn);
+        const uiNode = d || this.rendererDom.parentNode;
+        uiNode.appendChild(this.UICtn);
     }
     addMapWall() {
         const wallList = [
@@ -63488,6 +63498,9 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
     }
     set currDistance(v) {
         this._currDistance = v;
+        message_1.GDispather.dispatchEvent('distanceUpdateSync', {
+            distance: v
+        });
     }
     onEnterFrame(e) {
         const delta = e.data.delta;
@@ -63533,6 +63546,9 @@ class CarScene extends PerspectiveScene_1.PerspectiveScene {
     }
     onGameSubmit(n) {
         console.log('当前分数：', Math.abs(n));
+        message_1.GDispather.dispatchEvent('distanceUpdate', {
+            distance: Math.abs(n)
+        });
         if (this.UICtn.querySelector('.tips')) {
             this.UICtn.querySelector('.tips').textContent = '当前提交分数：' + Math.abs(n).toFixed(2);
         }
@@ -63846,6 +63862,7 @@ const THREE = __importStar(__webpack_require__(/*! three */ "./node_modules/_thr
 const GLTFLoader_1 = __webpack_require__(/*! ../module/loaders/GLTFLoader */ "./src/module/loaders/GLTFLoader.ts");
 const PreloadGroup_1 = __webpack_require__(/*! ../module/UI/PreloadGroup/PreloadGroup */ "./src/module/UI/PreloadGroup/PreloadGroup.ts");
 const RES_1 = __webpack_require__(/*! ../module/RES */ "./src/module/RES.ts");
+const GameConfig_1 = __webpack_require__(/*! ./GameConfig */ "./src/CarScene/GameConfig.ts");
 const materialDynamic = new THREE.MeshPhongMaterial({ color: 0xfca400 });
 const materialStatic = new THREE.MeshPhongMaterial({ color: 0x999999 });
 const materialInteractive = new THREE.MeshPhongMaterial({ color: 0x990000 });
@@ -64053,7 +64070,7 @@ class Vehicle extends PreloadGroup_1.PreloadGroup {
         //   }
         // }
         // 最大速度
-        if (speed < 80) {
+        if (speed < GameConfig_1.GameConfig.maxSpeed) {
             if (isAccelerating) {
                 stopFlag = false;
                 if (speed < -1) {
@@ -64257,8 +64274,7 @@ exports.ResJson = {
             "name": "skybox"
         }
     ],
-    // eslint-disable-next-line
-    "path": "https://yun.duiba.com.cn/db_games/activity/template/1663585156/resource/"
+    "path": "./resource/"
 };
 
 
@@ -64296,6 +64312,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -64306,16 +64325,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GDispather = exports.StageScene = void 0;
+exports.StageScene = exports.loadAllGroup = void 0;
 const CarScene_1 = __webpack_require__(/*! ./CarScene */ "./src/CarScene/index.ts");
 const THREE = __importStar(__webpack_require__(/*! three */ "./node_modules/_three@0.144.0@three/build/three.module.js"));
 const RES_1 = __webpack_require__(/*! ./module/RES */ "./src/module/RES.ts");
 const ResJson_1 = __webpack_require__(/*! ./ResJson */ "./src/ResJson.ts");
-const EventDispatcher_1 = __webpack_require__(/*! ./module/EventDispatcher */ "./src/module/EventDispatcher.ts");
 window['THREE'] = THREE;
+const loadAllGroup = function () {
+    RES_1.RES.loadConfig(ResJson_1.ResJson);
+    return RES_1.RES.loadAllGroup();
+};
+exports.loadAllGroup = loadAllGroup;
+__exportStar(__webpack_require__(/*! ./message */ "./src/message.ts"), exports);
 class StageScene {
-    constructor(canvas) {
+    constructor(canvas, UIParentNode) {
         this.renderDom = canvas;
+        this.UIParentNode = UIParentNode;
         this.initStage();
     }
     initStage() {
@@ -64323,7 +64348,7 @@ class StageScene {
             RES_1.RES.loadConfig(ResJson_1.ResJson);
             // @ts-ignore
             Ammo().then(() => {
-                this.stage = new CarScene_1.CarScene(this.renderDom);
+                this.stage = new CarScene_1.CarScene(this.renderDom, this.UIParentNode);
             });
         });
     }
@@ -64332,7 +64357,23 @@ class StageScene {
     }
 }
 exports.StageScene = StageScene;
-exports.GDispather = new EventDispatcher_1.EventDispatcher();
+
+
+/***/ }),
+
+/***/ "./src/message.ts":
+/*!************************!*\
+  !*** ./src/message.ts ***!
+  \************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GDispather = void 0;
+const NewEventDispatcher_1 = __webpack_require__(/*! ./module/NewEventDispatcher */ "./src/module/NewEventDispatcher.ts");
+exports.GDispather = new NewEventDispatcher_1.NewEventDispatcher();
 
 
 /***/ }),
@@ -64597,6 +64638,101 @@ class EventDispatcher {
 exports.EventDispatcher = EventDispatcher;
 
 
+/***/ }),
+
+/***/ "./src/module/NewEventDispatcher.ts":
+/*!******************************************!*\
+  !*** ./src/module/NewEventDispatcher.ts ***!
+  \******************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewEventDispatcher = void 0;
+// type BaseEvent = {
+//   type: string
+// }
+// type AddRecordArgs2<T extends Record<string, any>, E extends >
+/**
+ * Event object.
+ */
+// export interface Event extends BaseEvent {
+//   target?: any;
+//   [attachment: string]: any;
+// }
+class NewEventDispatcher {
+    constructor() {
+        this.listeners = Object.create(null);
+    }
+    addEventListener(type, listener, context) {
+        if (!this.listeners[type]) {
+            this.listeners[type] = [];
+        }
+        this.listeners[type].push({
+            listener,
+            context
+        });
+    }
+    removeEventListener(type, listener, context) {
+        if (!this.listeners[type]) {
+            return;
+        }
+        const cbs = this.listeners[type];
+        let i = cbs.length - 1;
+        while (i >= 0) {
+            const cb = cbs[i];
+            if (cb.listener === listener && cb.context === context) {
+                cbs.splice(i, 1);
+            }
+            i--;
+        }
+    }
+    removeAllEventListener() {
+        this.listeners = Object.create(null);
+    }
+    onceEventListener(type, listener, context) {
+        const once = (e) => {
+            listener.call(context, e);
+            this.removeEventListener(type, once);
+        };
+        this.addEventListener(type, once, this);
+    }
+    dispatchEvent(type, args) {
+        if (!this.listeners[type]) {
+            return;
+        }
+        const array = this.listeners[type].slice(0);
+        array.forEach(item => {
+            const { listener, context } = item;
+            listener.call(context, {
+                type,
+                data: args
+            });
+        });
+    }
+}
+exports.NewEventDispatcher = NewEventDispatcher;
+// type t1 = {
+//   'test1': {
+//     t: boolean
+//   },
+//   'test2': boolean
+// }
+// type EnumType = keyof t1
+// const tt = new NewEventDispatcher<t1>()
+// tt.onceEventListener('test1', function (e) {
+//   this.a = 2
+//   e.data = 1
+// }, {
+//   a: 2
+// })
+// tt.dispatchEvent('test1', {
+//   t: false
+// })
+
+
 /***/ }),
 
 /***/ "./src/module/OrbitControls/index.ts":

scripts/mergeJs.js

@@ -11,5 +11,6 @@ fs.writeFileSync(endPath + "output.js",
     // 'import * as FYGE from "fyge-tbmini";\n' +
     // 'import * as FYGE from "fyge";\n' +//以后改成这个
     // 'import * as SvgaParser from "svga-parser";\n' +
+    '/* eslint-disable */\n' +
     fs.readFileSync("./output.js"));
 console.log("js生成")

src/CarScene/GameConfig.ts

@@ -6,6 +6,7 @@ export const GameConfig = {
   helperDebuger: false,
   collisionDebuger: false,
   initVehiclePos: new THREE.Vector3(0, 3, 0),
+  maxSpeed: 80,
   CameraPosConfig: (function() {
     let posList = [
       0, 8, -20,

src/CarScene/index.ts

@@ -13,7 +13,7 @@ import { RES } from "../module/RES";
 import { GameConfig } from "./GameConfig";
 import { Dom } from "./dom";
 import { ResJson } from "../ResJson";
-import { GDispather } from "..";
+import { GDispather } from "../message";
 
 function gradTexture(color: [number[], string[]]) {
   var c = document.createElement("canvas");
@@ -324,10 +324,13 @@ export class CarScene extends PerspectiveScene {
           },
           styles: {
             backgroundImage: `url(${ResJson.path}UI/left-icon.png)`,
-            backgroundSize: '100% 100%',
+            backgroundSize: 'contain',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
             width: `${70 * remScale}px`,
             height: `${126 * remScale}px`,
-            marginLeft: '40px'
+            marginLeft: '60px',
+            padding: '0 20px'
           },
           events: {
             touchstart: {
@@ -349,10 +352,13 @@ export class CarScene extends PerspectiveScene {
           },
           styles: {
             backgroundImage: `url(${ResJson.path}UI/right-icon.png)`,
-            backgroundSize: '100% 100%',
+            backgroundSize: 'contain',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
             width: `${70 * remScale}px`,
             height: `${126 * remScale}px`,
-            marginLeft: '40px'
+            marginLeft: '40px',
+            padding: '0 20px'
           },
           events: {
             touchstart: {
@@ -386,7 +392,9 @@ export class CarScene extends PerspectiveScene {
           },
           styles: {
             backgroundImage: `url(${ResJson.path}UI/brake-icon.png)`,
-            backgroundSize: '100% 100%',
+            backgroundSize: 'contain',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
             width: `${102 * remScale}px`,
             height: `${150 * remScale}px`,
           },
@@ -820,6 +828,9 @@ export class CarScene extends PerspectiveScene {
 
   set currDistance(v: number) {
     this._currDistance = v
+    GDispather.dispatchEvent('distanceUpdateSync', {
+      distance: v
+    })
   }
 
   onEnterFrame(e: any) {
@@ -872,6 +883,9 @@ export class CarScene extends PerspectiveScene {
 
   onGameSubmit(n: number) {
     console.log('当前分数：', Math.abs(n))
+    GDispather.dispatchEvent('distanceUpdate', {
+      distance: Math.abs(n)
+    })
     if (this.UICtn.querySelector('.tips')) {
       this.UICtn.querySelector('.tips').textContent = '当前提交分数：' + Math.abs(n).toFixed(2)
     }

src/CarScene/vehicle.ts

@@ -4,6 +4,7 @@ import { EventDispatcher } from "../module/EventDispatcher";
 import { GLTFLoader } from '../module/loaders/GLTFLoader';
 import { PreloadGroup } from '../module/UI/PreloadGroup/PreloadGroup';
 import { RES } from '../module/RES';
+import { GameConfig } from './GameConfig';
 
 const materialDynamic = new THREE.MeshPhongMaterial( { color:0xfca400 } );
 const materialStatic = new THREE.MeshPhongMaterial( { color:0x999999 } );
@@ -287,7 +288,7 @@ export class Vehicle extends PreloadGroup{
     // }
 
     // 最大速度
-    if (speed < 80) {
+    if (speed < GameConfig.maxSpeed) {
       if (isAccelerating) {
         stopFlag = false
         if (speed < -1) {

src/index.ts

@@ -2,10 +2,15 @@ import { CarScene } from "./CarScene"
 import * as THREE from 'three'
 import { RES } from "./module/RES"
 import { ResJson } from "./ResJson"
-import { EventDispatcher } from "./module/EventDispatcher"
 
 window['THREE'] = THREE
 
+export const loadAllGroup = function() {
+  RES.loadConfig(ResJson)
+  return RES.loadAllGroup()
+}
+
+export * from './message'
 export class StageScene  {
   renderDom: HTMLCanvasElement
   stage: CarScene
@@ -33,12 +38,4 @@ export class StageScene  {
   destroy() {
     this.stage.destroy()
   }
-}
-
-type GDType = {
-  'orientationChange': {
-    isPortrait: boolean // 是否是竖屏
-  }
-}
-
-export const GDispather = new EventDispatcher<keyof GDType>()
\ No newline at end of file
+}
\ No newline at end of file

src/message.ts

+import { NewEventDispatcher } from "./module/NewEventDispatcher"
+
+
+type GDType = {
+  'orientationChange': {
+    isPortrait: boolean // 是否是竖屏
+  },
+  'distanceUpdate': {
+    distance: number
+  },
+  'resetVehicle': any,
+  'changeCameraPos': any,
+  'distanceUpdateSync': {
+    distance: number
+  }
+}
+
+export const GDispather = new NewEventDispatcher<GDType>()
\ No newline at end of file

src/module/NewEventDispatcher.ts

-// type BaseEventMap = {
-//   [eventName: string]: any
-// }
+type BaseEventMap = {
+  [eventName: string]: any
+}
+
+type EventCall<T extends any, S extends any = any, U extends any = any> = (this: S, e?: {
+  type: T,
+  data: U
+}) => any
 
 // type BaseEvent = {
 //   type: string
@@ -8,14 +13,99 @@
 
 // type AddRecordArgs2<T extends Record<string, any>, E extends >
 
-// /**
-//  * Event object.
-//  */
-//  export interface Event extends BaseEvent {
+/**
+ * Event object.
+ */
+// export interface Event extends BaseEvent {
 //   target?: any;
 //   [attachment: string]: any;
 // }
 
-// export class NewEventDispatcher<E extends BaseEventMap> {
+export class NewEventDispatcher<E extends BaseEventMap> {
+  private listeners: {
+    [key in keyof E]?: {
+      listener: EventCall<key>,
+      context: any
+    }[]
+  }
+
+  constructor() {
+    this.listeners = Object.create(null)
+  }
+
+  addEventListener<T extends keyof E, S extends any>(type: T, listener: EventCall<T, S, E[T]>, context?: S) {
+    if (!this.listeners[type]) {
+      this.listeners[type] = []
+    }
+    this.listeners[type]!.push({
+      listener,
+      context
+    })
+  }
+
+  removeEventListener<T extends keyof E, S extends any>(type: T, listener: EventCall<T, S, E[T]>, context?: S) {
+    if (!this.listeners[type]) {
+      return
+    }
+    const cbs = this.listeners[type]!
+    let i = cbs.length - 1
+    while (i >= 0) {
+      const cb = cbs[i]
+      if (cb.listener === listener && cb.context === context) {
+        cbs.splice(i, 1)
+      }
+      i --
+    }
+  }
+
+  removeAllEventListener() {
+    this.listeners = Object.create(null)
+  }
+
+  onceEventListener<T extends keyof E, S extends any>(type: T, listener: EventCall<T, S, E[T]>, context?: S) {
+    const once = (e: any) => {
+      listener.call(context, e)
+      this.removeEventListener(type, once)
+    }
+    this.addEventListener(type, once, this)
+  }
+
+  dispatchEvent<T extends keyof E>(type: T, args: E[T]) {
+    if (!this.listeners[type]) {
+      return
+    }
+    const array = this.listeners[type].slice(0)
+    array.forEach(item => {
+      const {
+        listener,
+        context
+      } = item
+      listener.call(context, {
+        type,
+        data: args
+      })
+    })
+  }
+}
+
+// type t1 = {
+//   'test1': {
+//     t: boolean
+//   },
+//   'test2': boolean
+// }
+
+// type EnumType = keyof t1
+
+// const tt = new NewEventDispatcher<t1>()
+
+// tt.onceEventListener('test1', function (e) {
+//   this.a = 2
+//   e.data = 1
+// }, {
+//   a: 2
+// })
 
-// }
\ No newline at end of file
+// tt.dispatchEvent('test1', {
+//   t: false
+// })
\ No newline at end of file