当前位置：首页 > news >正文

THREE练习写了几个简单小游戏的总结

news 2025/9/18 8:31:36

THREE练习写了几个简单小游戏的总结

象棋
- 设计
- - 隔离
  - 订阅发布
  - 单例模式
  - 单一职责
- 数据
- 渲染
- - 填充棋子
  - 移动和吃子
  - 移动判断
  - 记录
  - 悔棋
- 回放
- 后续
街道建设游戏
- 我造的城市

看了一个国外大佬写的游戏教程，跟着做了下。
https://javascriptgametutorials.com/tutorials/three-js/crossy-road
又自己练习做了几个小游戏。感觉收获挺多的。

象棋

实现了人机对战，回放，悔棋等。虽然人机有点傻，后面慢慢改。
请添加图片描述
3D视角
在这里插入图片描述

设计

比着之前想感觉完成一个练习，这个练习我思考了一点。

隔离

渲染部分只负责渲染，通过修改数据来完成各种操作。

订阅发布

主类Game类负责初始化其他类以及事件传递。
在这里插入图片描述
EventBus为订阅发布类。
这里我给挂在到了window上。

单例模式

应该是单例模式？
画布，相机，配置项，资源加载器都设计为单例模式，为了方便操作，挂在到了global上，也可以挂在到别的地方或者不挂载。构建器变成私有的，通过init来初始化实例。如Renderer。其他类如Scene和Camera都类似。


export class Renderer {private static instance: Renderer;private renderer!: THREE.WebGLRenderer;constructor() {if (Renderer.instance) {return Renderer.instance;}this.renderer = genRenderer(this.getOptions());Renderer.instance = this;this.bindEvents();}public static init(): Renderer {if (!Renderer.instance) {Renderer.instance = new Renderer();}return Renderer.instance;}getCanvas() {return Options.getInstance().getCanvas();}getOptions() {return Options.getInstance().getOptions();}getRender() {return this.renderer;}public static getInstance(): Renderer {return Renderer.instance;}resize() {const canvas = this.getCanvas();this.renderer.setPixelRatio(window.devicePixelRatio);this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);}private bindEvents() {window.$on(GameEvents.UpdateRender, () => {this.renderer.render(Scene.getInstance().getScene(),Camera.getInstance().getCamera());});window.$on(GameEvents.Resize, () => {this.resize();});}
}

各自负责各自的功能。

通过在主类Game里面注册使用。
在这里插入图片描述
比如渲染控制。

在这里插入图片描述

不在animate里面引入多个。
通过发布事件来传递渲染。
在这里插入图片描述
画布的渲染

还有窗口尺寸大小这个，这个我还没完善。
在Game类中绑定事件发布窗口大小改变事件。

单一职责

我吹牛逼的，我也不知道是不是哈哈。

基本上所有的方法只处理自己的事情。
移动方法只负责交换数据，然后调用game的update方法，update方法，只负责渲染。

额外的，高亮标记也不是改变棋子的材质，全局只会有一个，直接丢到scene，大小为棋子的1.5倍，然后直接塞上去。看着像棋子高亮了就行。

数据

每个棋子的数据就是这个。

export interface XiangQiMetaDataItem {rowIndex: number;colIndex: number;type?: ChessPieceType;camp?: 'black' | 'red';
}

使用pinia来管理。
在这里插入图片描述
初始化数据，填充默认象棋棋盘。

渲染

方便读取坐标，写了一个XQGroup

export class XQGroup extends THREE.Group {rowIndex: number;colIndex: number;constructor(rowIndex: number, colIndex: number) {super();this.name = 'piece';this.rowIndex = rowIndex;this.colIndex = colIndex;}
}