add map

be/doc.rb

@@ -21,6 +21,7 @@
         role: 'ghost', # runner
         x: 1,
         y: 3
+        t_cid
     }
 }
 

fe/src/Controller.ts

 class Controller extends egret.Sprite {
+    private myPosition = {}
     public constructor() {
         super();
         this.init()
@@ -61,6 +62,17 @@ class Controller extends egret.Sprite {
         controlContainer.addChild(this.down)
         controlContainer.addChild(this.left)
         controlContainer.addChild(this.right)
+
+        const me = Store.getState().runners.find(runner => runner.t_cid === Store.getState().cid)
+
+        this.myPosition.x = me.x
+        this.myPosition.y = me.y
+        EventBus.addEventListener('moving', (payload) => {
+          if (payload.target.payload.t_cid === Store.getState().cid) {
+              this.myPosition.x = payload.target.payload.x  
+              this.myPosition.y = payload.target.payload.y
+          }
+        })
     }
 
     private controlTouchBegin(e: egret.TouchEvent){
@@ -74,8 +86,22 @@ class Controller extends egret.Sprite {
         }else if(e.currentTarget === this.right){
             delta.x += 1
         }
-        
-        this.dispatchEventWith("position_change", false, delta)
+
+
+
+        platform.sendSocketMessage({
+            data: JSON.stringify({
+                type: 'moving',
+                room_id: 'default_room',
+                cid: Store.getState().cid,
+                payload: {
+                    x: this.myPosition.x + delta.x,
+                    y: this.myPosition.y + delta.y,
+                    avatar_url: Store.getState().userInfo.avatarUrl,
+                    nick_name: Store.getState().userInfo.nickName
+                }
+            }),
+        })
     }
 
     public release() {

fe/src/Main.ts

@@ -90,7 +90,7 @@ class Main extends egret.DisplayObjectContainer {
             platform.sendSocketMessage({
                 data: JSON.stringify({
                     type: 'entry',
-                    rid: 'default_room',
+                    room_id: 'default_room',
                     payload: {
                         avatar_url: Store.getState().userInfo.avatarUrl,
                         nick_name: Store.getState().userInfo.nickName
@@ -108,24 +108,25 @@ class Main extends egret.DisplayObjectContainer {
             })
         })
         this.createGameScene();
-
-        platform.onSocketMessage(function (res) {
+        platform.onSocketMessage(function(res) {
             console.log('收到服务器内容：' + res.data)
-            const state = Store.onMessage(res.data)
             let data = res.data
             if (typeof res.data === 'string') {
                 data = JSON.parse(res.data)
-                switch (data.type) {
-                    case 'entry':
-                        Store.onMessage({
-                            type: 'updateCid',
-                            payload: data
-                        })
-                        SceneManager.getInstance().roomScene.update(data)
-                        break;
-                    case 'game_ready':
-                        SceneManager.getInstance().roomScene.update(data)
-                }
+            }
+            // data = { "type": "game_ready", "rid": "default_room", "payload": [{ "nick_name": "syfee", "avatar_url": "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIibqBbRLAe0AI9NvnzPdLEBx9mT0ZKXicbibYWLAJiaPs0EZtmDiazJ7kytEj4tzWiberUptkR1yg0Q28g/132", "cid": "1525524303u0my3", "role": "ghost", "t_cid": "1525524303u0my3", x: 1, y: 1 }, { "nick_name": "syfee1", "avatar_url": "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIibqBbRLAe0AI9NvnzPdLEBx9mT0ZKXicbibYWLAJiaPs0EZtmDiazJ7kytEj4tzWiberUptkR1yg0Q28g/132", "cid": "1525524303u0my4", "role": "runner", "t_cid": "1525524303u0my4", x: 1, y: 1 }], "cid": "1525524303u0my4" }
+            const state = Store.onMessage(data)
+            EventBus.dispatch(data.type, data)
+            switch (data.type) {
+                case 'entry':
+                    Store.onMessage({
+                        type: 'updateCid',
+                        payload: data
+                    })
+                    SceneManager.getInstance().roomScene.update(data)
+                    break;
+                case 'game_ready':
+                    SceneManager.getInstance().roomScene.update(data)
             }
         })
         platform.onSocketError((e) => {

fe/src/Map.ts

@@ -5,7 +5,8 @@ const gridsInY = 10
 class Map extends egret.Sprite {
   private grids:any = []
   private touchArea: egret.Bitmap 
-  private isShowingTouchArea
+  public isShowingTouchArea
+  private runnerMap:any = {} 
   public constructor() {
     super();
     this.init()
@@ -28,6 +29,24 @@ class Map extends egret.Sprite {
     this.touchArea.texture = RES.getRes('mask_jpg')
     this.touchArea.alpha = 0
     this.addChild(this.touchArea)
+    Store.getState().runners.forEach(runnerData => {
+      const runner = new Runner(runnerData)
+      this.addChild(runner)
+      this.runnerMap[runnerData.t_cid] = runner
+    })
+    EventBus.addEventListener('moving', (payload) => {
+      this.runnerMap[payload.target.payload.t_cid].x = payload.target.payload.x * gridWidth
+      this.runnerMap[payload.target.payload.t_cid].y = payload.target.payload.y * gridHeight
+    })
+    EventBus.addEventListener('clicking', (payload) => {
+      const x = payload.target.payload.x * gridWidth
+      const y = payload.target.payload.y * gridHeight
+      if (Store.isCatcher()) {
+        this.showSurroundedGrids(x, y) 
+      } else {
+        this.showClickedGrid(x, y)
+      }
+    })
   }
 
   public getSurroundedGrids(x, y) {
@@ -44,13 +63,21 @@ class Map extends egret.Sprite {
     return grids
   }
 
-  public showSurroundedGrids(x, y, centerGrid) {
-    if (this.isShowingTouchArea) {
-      return
-    }
+  public showClickedGrid(x, y) {
+    const surroundedGrids = this.getSurroundedGrids(x, y)
+
+    const clickedGrid = surroundedGrids.find(grid => grid.x === x && grid.y === y)
+    clickedGrid.bg.texture = RES.getRes('grid_select_jpg')
+    setTimeout(() => {
+      clickedGrid.bg.texture = RES.getRes('grid_jpg')
+    }, 1000); 
+  }
+
+  public showSurroundedGrids(x, y) {
     this.isShowingTouchArea = true
-    centerGrid.bg.texture = RES.getRes('grid_select_jpg')
     const surroundedGrids = this.getSurroundedGrids(x, y)
+    const centerGrid = surroundedGrids.find(grid => grid.x === x && grid.y === y)
+    centerGrid.bg.texture = RES.getRes('grid_select_jpg')
     surroundedGrids.forEach(grid => {
       grid.alpha = 1 
     })

fe/src/MapGrid.ts

@@ -17,8 +17,20 @@ class MapGrid extends egret.Sprite {
   }
 
   private onTouchTap() {
-    if (Store.isCatcher()) {
-      this.parent.showSurroundedGrids(this.x, this.y, this)
+    if (Store.isCatcher() && !this.parent.isShowingTouchArea) {
+      platform.sendSocketMessage({
+          data: JSON.stringify({
+              type: 'clicking',
+              cid: Store.getState().cid, 
+              room_id: 'default_room',
+              payload: {
+                  x: this.x / 72,
+                  y: this.y / 72,
+                  avatar_url: Store.getMyInfo().avatarUrl,
+                  nick_name: Store.getMyInfo().nickName
+              }
+          }),
+      })
     }
   }
 

fe/src/Guy.ts → fe/src/Runner.ts

-class Guy extends egret.Sprite {
+class Runner extends egret.Sprite {
 
-  public constructor() {
+  public constructor(data) {
     super()
-    this.init()
+    this.init(data)
   }
 
   private avatar = new egret.Bitmap()
   private imageLoader = new egret.ImageLoader()
 
-  private init() {
+  private init(data) {
     this.avatar.width = 72
     this.avatar.height = 72
+    this.x = data.x * this.avatar.width 
+    this.y = data.y * this.avatar.height
     this.imageLoader.addEventListener(egret.Event.COMPLETE,this.loadCompleteHandler,this)
-    this.imageLoader.load("http://www.insajderi.com/wp-content/uploads/2018/01/asdja.jpg")
+    this.imageLoader.load(data.avatar_url)
     this.addChild(this.avatar)
   }
 
@@ -39,4 +41,9 @@ class Guy extends egret.Sprite {
         this.x = 72*13 + 10
     }
   }
+
+  public moveTo(x, y) {
+    this.x = x
+    this.y = y
+  }
 }
\ No newline at end of file

fe/src/SceneManager.ts

@@ -5,6 +5,10 @@ class SceneManager extends egret.DisplayObjectContainer {
   public roomScene: RoomScene;
   // 游戏场景
   public gameScene: GameScene;
+  private sceneMap: any = {
+    roomScene: RoomScene,
+    gameScene: GameScene
+  }
 
   public constructor() {
     super();
@@ -13,9 +17,9 @@ class SceneManager extends egret.DisplayObjectContainer {
   private init() {
     // 实例化两个场景
     this.roomScene = new RoomScene();
-    this.gameScene = new GameScene();
+    // this.gameScene = new GameScene();
     // 默认添加开始场景
-    this.addChild(this.gameScene);
+    this.addChild(this.roomScene);
   }
   // 实例化单例获取方法
   public static getInstance(): SceneManager {
@@ -26,10 +30,11 @@ class SceneManager extends egret.DisplayObjectContainer {
   }
   // 切换场景
   public changeScene(type) {
-    // 释放资源
-    if (this[type] && typeof this[type].release === 'function') {
-      this[type].release()
+    if (!this[type]) {
+      const Scene = this.sceneMap[type]
+      this[type] = new Scene ()
     }
+    
     // 移除所有显示列表中的对象
     this.removeChildren();
     // 添加下一个场景

fe/src/Store.ts

@@ -2,25 +2,30 @@ let _state: any = {
   role: null,
   cid: null,
   roomId: null,
+  userInfo: {},
+  runners: [],
+  catcher: {}
 }
 
+const listenners = []
+
 class Store {
   static getState() {
     return _state
   }
 
   static onMessage(message) {
-    const { payload } = message
+    const { payload, room_id } = message
     switch (message.type) {
-      case 'game_ready':
-        const { cid, room_id, payload: { role } } = payload
+      case 'game_ready': {
+        const runners = payload.filter(runner => runner.role !== 'ghost')
         _state = {
           ..._state,
-          cid,
-          role, 
           roomId: room_id,
+          runners, 
         } 
         break;
+      }
       case 'setUserInfo':
         _state = {
           ..._state,
@@ -32,6 +37,7 @@ class Store {
           ..._state,
           cid: payload.cid
         }
+        
         break;
       default:
         break;
@@ -39,8 +45,19 @@ class Store {
     return _state
   }  
 
+  static subscribe(fn) {
+    
+  }
+  static getMyInfo() {
+    return _state.userInfo
+  }
+
+  static getMyPosition
+
   static isCatcher() {
-    return true
-    // return _state.role === 'ghost'
+    console.log('isCatcher_____', _state.runners, _state.cid)
+    return !_state.runners.some(runner => runner.t_cid === _state.cid)
   }
-}
+}
\ No newline at end of file
+
+window.Store = Store
\ No newline at end of file

fe/src/scenes/GameScene.ts

@@ -7,8 +7,6 @@ class GameScene extends egret.Sprite {
     this.init()
   }
 
-  private me = new Guy()
-
   // 初始化(给开始按钮绑定点击事件)
   private init() {
     // put display object to this scene
@@ -18,21 +16,15 @@ class GameScene extends egret.Sprite {
     bg.graphics.drawRect(0,0,1334, 750)
     bg.graphics.endFill()
     this.addChild(bg)
-
-    this.controller = new Controller()
-    this.addChild(this.controller)
-    this.controller.addEventListener("position_change", this.onPositionChange, this)
+    if (!Store.isCatcher()) {
+      this.controller = new Controller()
+      this.addChild(this.controller)
+            
+    }
     this.map = new Map()
     this.map.y = 15
     this.map.x = 10
-    this.me.y = 15
-    this.me.x = 10
     this.addChild(this.map)
-    this.map.addChild(this.me)
-  }
-
-  private onPositionChange(delta){
-    this.me.applyDelta(delta.data)
   }
 
   public release() {

fe/src/utils/EventBus.ts

+class EventBusClass {
+ private listeners: any = {}
+ public addEventListener(type, callback, scope?) {
+    var args = [];
+    var numOfArgs = arguments.length;
+    for(var i=0; i<numOfArgs; i++){
+      args.push(arguments[i]);
+    }
+    args = args.length > 3 ? args.splice(3, args.length-1) : [];
+    if(typeof this.listeners[type] != "undefined") {
+      this.listeners[type].push({scope:scope, callback:callback, args:args});
+    } else {
+      this.listeners[type] = [{scope:scope, callback:callback, args:args}];
+    }
+  }
+  public removeEventListener(type, callback, scope) {
+    if(typeof this.listeners[type] != "undefined") {
+      var numOfCallbacks = this.listeners[type].length;
+      var newArray = [];
+      for(var i=0; i<numOfCallbacks; i++) {
+        var listener = this.listeners[type][i];
+        if(listener.scope == scope && listener.callback == callback) {
+
+        } else {
+          newArray.push(listener);
+        }
+      }
+      this.listeners[type] = newArray;
+    }
+  }
+  public hasEventListener(type, callback, scope) {
+    if(typeof this.listeners[type] != "undefined") {
+      var numOfCallbacks = this.listeners[type].length;
+      if(callback === undefined && scope === undefined){
+        return numOfCallbacks > 0;
+      }
+      for(var i=0; i<numOfCallbacks; i++) {
+        var listener = this.listeners[type][i];
+        if((scope ? listener.scope == scope : true) && listener.callback == callback) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  public dispatch(type, target) {
+    var event = {
+      type: type,
+      target: target
+    };
+    var args = [];
+    var numOfArgs = arguments.length;
+    for(var i=0; i<numOfArgs; i++){
+      args.push(arguments[i]);
+    };
+    args = args.length > 2 ? args.splice(2, args.length-1) : [];
+    args = [event].concat(args);
+
+
+    if(typeof this.listeners[type] != "undefined") {
+      var listeners = this.listeners[type].slice();
+      var numOfCallbacks = listeners.length;
+      for(var i=0; i<numOfCallbacks; i++) {
+        var listener = listeners[i];
+        if(listener && listener.callback) {
+          var concatArgs = args.concat(listener.args);
+          listener.callback.apply(listener.scope, concatArgs);
+        }
+      }
+    }
+  }
+  public getEvents() {
+    var str = "";
+    for(var type in this.listeners) {
+      var numOfCallbacks = this.listeners[type].length;
+      for(var i=0; i<numOfCallbacks; i++) {
+        var listener = this.listeners[type][i];
+        str += listener.scope && listener.scope.className ? listener.scope.className : "anonymous";
+        str += " listen for '" + type + "'\n";
+      }
+    }
+    return str;
+  }
+} 
+
+if (!window.EventBus) {
+  window.EventBus = new EventBusClass()
+}
+
+
+
+declare let EventBus: EventBusClass;
+
+declare interface Window {
+
+  EventBus: EventBusClass
+}
+
+