从游戏角度看观察者模式

时间:2021-1-8 作者:admin

本文档已更新于 【前端橘子君】 【Github】

描述对象间一对多的关系,当一个状态改变时,所有依赖于她的对象都能够得到通知并更新。

要素

观察者中存在目标(被观察者)和观察者,目标(被观察者)为观察者提供相关逻辑进行维护关联,观察者只提供更新接口。

观察者模式的设计初衷就是为了实现松耦合

游戏场景

以《梦幻西游》游戏中某个副本为例,某个玩家需要开启一个副本,该副本要求最低人数为5人,如果人数达标,则提醒队员副本开启,玩家具有准备确认功能。

创建副本队伍

首先某个玩家需要创建一个副本队伍,自己是队长,可以增加/减少人数,意味着还可以增加4个队员。完整来说,队伍应该校验人数,比如人数如果等于5,则其他玩家不能够再加入队伍,这里简化了。

class Team {
    constructor(fbName, player) {
      // 定义一个列表来表示一个队伍
        this.list = [];
        // 自己需要占一个位置
        this.list.push(player);
    }
    // 开启副本
    start () {
        console.log('队伍人数达标,可以开启副本了')
        // 通知队员,副本开启
        this.list.map(ele => ele.start())
    }
    // 增加队员
    add (player) {
    this.list.push(player);
    // 人数达标,通知队员准备
        if (this.list.length === 5) {
            this.start();
        }
    }
    // 踢出队员
    remove (player) {
        console.log(`${player.name}实力不够,踢出队伍`)
        // 找到这个人在队伍中的位置
        let index = this.list.indexOf(player)
        // 踢出队伍
        this.list.splice(index, 1);
    }
}

创建玩家实例

创建玩家实例,玩家拥有名称,等级,属性等,还拥有确认开启副本的功能,完整来说,玩家应该还有离开副本的功能,这里简化了。

class Player {
    constructor(name) {
        // 定义一个玩家
      this.name = name;
  }

  add (army) {
    // 加入某个队伍
    army.add(this)
  }

  // 确认开启副本功能
    start () {
        console.log(`${this.name}已经点击了确认,随时可以开启副本`)
    }
}

// 创建玩家
let player1 = new Player('赵一')
let player2 = new Player('钱二')
let player3 = new Player('孙三')
let player4 = new Player('李四')
let player5 = new Player('周五')
let player6 = new Player('吴六')

组建游戏队伍

// 明确副本名称,以及确定队长
let team = new Team('大闹天宫副本', player1);

// 添加队员
player2.add(team)
player3.add(team)
team.remove(player2)
player4.add(team)
player5.add(team)
player6.add(team)

解析及总结

在上述实例中,Army为目标(被观察者),而Player就是观察者。

Aemy中的add(), start()remove()方法就是文章开头说的目标为观察者提供相关逻辑进行维护关联,这些方法为观察者提供维护服务,即只要队伍达标,即可开启副本。

Player中的add()start()方法就是提供更新接口,即这些方法会改变队伍的组织结构(队伍人数)


更多相关文档,请见:

线上地址 【前端橘子君】

GitHub仓库【前端橘子君】

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。