Web开发初学者项目：太空游戏开发指南（第一部分）—

本文链接：https://blog.youkuaiyun.com/gitblog_00015/article/details/148323383

Web开发初学者项目：太空游戏开发指南（第一部分）—— 游戏架构设计基础

Web-Dev-For-Beginners 24 Lessons, 12 Weeks, Get Started as a Web Developer 项目地址: https://gitcode.com/gh_mirrors/we/Web-Dev-For-Beginners

引言：游戏开发中的对象设计

在开发太空游戏时，我们需要处理各种游戏对象，如飞船、敌人、投射物等。这些对象虽然功能各异，但往往具有一些共同特性。本文将探讨两种主要的对象设计模式：继承（Inheritance）和组合（Composition），以及游戏开发中常用的发布-订阅（Pub/Sub）模式。

游戏对象的共性特征

在游戏开发中，大多数对象都具有以下共同特征：

位置属性：所有游戏对象通常都有x和y坐标，表示它们在游戏世界中的位置
移动能力：某些对象（如玩家角色）可以移动位置
生命周期：有些对象（如爆炸效果）具有有限的生存时间
冷却机制：某些动作或效果需要冷却时间

继承模式实现游戏对象

继承是面向对象编程中的核心概念，它允许我们创建层次化的类结构：

// 基础游戏对象类
class GameObject {
  constructor(x, y, type) {
    this.x = x;
    this.y = y;
    this.type = type;
  }
}

// 可移动对象继承基础对象
class Movable extends GameObject {
  constructor(x,y, type) {
    super(x,y, type)
  }

  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
}

// 玩家角色继承可移动对象
class Hero extends Movable {
  constructor(x,y) {
    super(x,y, 'Hero')
  }
}

// 静态对象只继承基础对象
class Tree extends GameObject {
  constructor(x,y) {
    super(x,y, 'Tree')
  }
}

继承的优点：

代码结构清晰，层次分明
易于理解和维护
符合传统面向对象设计思想

继承的缺点：

可能导致类层次过深
不够灵活，修改父类可能影响所有子类

组合模式实现游戏对象

组合是一种更灵活的设计方式，通过将功能模块组合起来创建对象：

// 基础对象属性
const gameObject = {
  x: 0,
  y: 0,
  type: ''
};

// 可移动功能
const movable = {
  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
}

// 组合创建可移动对象
const movableObject = {...gameObject, ...movable};

// 创建玩家角色
function createHero(x, y) {
  return {
    ...movableObject,
    x,
    y,
    type: 'Hero'
  }
}

组合的优点：

更灵活，可以动态组合功能
避免深度继承链
更易于重用和修改单个功能

组合的缺点：

结构不如继承直观
可能需要更多样板代码

游戏开发中的发布-订阅模式

发布-订阅模式（Pub/Sub）是游戏开发中解耦不同组件的有效方式：

class EventEmitter {
  constructor() {
    this.listeners = {};
  }
  
  on(message, listener) {
    if (!this.listeners[message]) {
      this.listeners[message] = [];
    }
    this.listeners[message].push(listener);
  }
  
  emit(message, payload = null) {
    if (this.listeners[message]) {
      this.listeners[message].forEach(l => l(message, payload))
    }
  }
}

实际应用示例：

const Messages = {
  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
};

const eventEmitter = new EventEmitter();
const hero = createHero(0,0);

eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
  hero.move(5,0);
});

window.addEventListener('keyup', (evt) => {
  if (evt.key === 'ArrowLeft') {
    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
  }
});

Pub/Sub模式的优点：