在没有框架的情况下构建 HTML5 游戏答案

【问题标题】：Structuring a HTML5 game without a framework在没有框架的情况下构建 HTML5 游戏
【发布时间】：2014-10-15 07:35:25
【问题描述】：

在尝试了几个不同的 HTML5 框架之后，我一直发现纯 JS 最吸引人。但是，我不确定我的结构方式。

目前，我一直将不同的对象声明为全局变量：

var titlescreen = new Titlescreen();
var fps = new FPSTracker();
var input = new Input();
var background = new Background();      
var shops = new Shops();
var chunkhandler = new ChunkHandler();
var explosionhandler = new ExplosionHandler();
var ui = new UI();
var world = new World();
var player = new Player(); 
var joystick = new Joystick();

我的主要问题是我如何让他们相互交流。例如，Player 类只需使用其名称 (world.functionINeedToUse();) 即可访问 world 的一些函数。来自 Java 背景，这给我一种非常糟糕的感觉，因为它取决于这个具有特定名称的全局变量的声明。虽然我发现 JS 是一种更宽容的语言，但这仍然感觉不对。到目前为止，我还没有发现任何问题。

有没有更有效的方法来构建游戏？玩家/世界有什么问题？

【问题讨论】：

你知道构造函数和原型吗？您可以使用与 Java 中相同的结构。
我想你已经回答了你自己的问题 :) 你说明的依赖是不可避免的，并且在 JS 中是非常好的编码实践。
中介者模式可以作为对象发出其他人可能会听到的事件。关于 JavaScript 中构造函数和原型的使用，你可以阅读这个答案：stackoverflow.com/questions/16063394/…

标签： javascript html canvas data-structures

【解决方案1】：

如果我理解你的话，你正在寻找一种方法来拥有 OOP 模式，不是吗？在 JS 中，您可以使用构造函数和原型定义类。

但是，如果您正在寻找更强大的工具，您应该看一下超集，例如 CoffeeScript（Ruby/Python 语法）或 TypeScript（C#/Java 语法）。

【讨论】：

【解决方案2】：

我使用原型来声明“类”，就像你在 Java 中所说的那样。

这是一篇描述如何使用它们的文章：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

此外，我将我的场景组织为树结构。所以World 将是根，Player 将是World 的子级。这样，我不再将它们全部作为全局变量。 Shapes（世界和玩家）之间的通信是通过它们之间的关联来完成的。

我使用复合模式创建树。所以我定义了一个 Shape-prototype 和一个 Composite-prototype，它扩展了 Shape 并有一个子形状列表。然后World 和Player 将从Composite 和Shape 扩展

【讨论】：