添加配置项 + NewEventDispatcher

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