javascript - OOP Javascript Pong 游戏中的上下文位于何处？

Question

为了练习我的 OOP 知识，我正在用 javascript 制作 Pong 游戏(我知道，我知道，这就像在吉他店里玩 Stairway to Heaven)。通过实现几种不同的技术，包括基于原型(prototype)的 OOP 和功能风格，我已经拥有了游戏的多个功能版本。但是，我这样做并不是为了获得功能性游戏，而是为了学习。

我使用的是 html5 Canvas 和纯 ol' javascript，没有框架(好吧，键盘捕获需要一点 jQuery)。我有代表我游戏的 Pong 对象。 Pong 有一个属性 ctx，其中包含对 canvas.getContext("2d") 上下文的引用。它还有一个 player1、player2 和 ball 属性，用于存放你知道的东西。当球和两个球员被实例化时，上下文被传递给他们的构造函数，这样他们也可以持有对上下文的引用，以便在他们的 draw(ctx) 方法中使用。 Pong 有一个 draw() 方法，可以使用 setInterval(this.draw, 10) 调用该方法。 Pong 的 draw 方法会调用两个玩家和球的 draw 方法。

这两个球员和球都具有上下文作为属性，这让我不太满意。他们不拥有上下文，因此它不应该是一个属性。然而，使用 javascript 和 Canvas 的本质似乎是这是最好的方法。在这种情况下，谁或什么应该拥有上下文？理想情况下，我根本不希望球员和球对象有一个绘制对象。我觉得它们应该有描述它们的几何形状和位置的属性，并且应该有一个专门的对象负责将它们渲染到屏幕上。这样，如果将来我决定使用

而不是 Canvas ，我只需更改渲染对象，其他一切都将被遗忘。

我知道我正在使 javascript Pong 游戏变得比它需要的更复杂，但我想练习这些技术并真正理解 OOP 的概念，但每次我认为我已经破解了它一个全新的问题我的“解决方案”出现了。

编辑:如果您对我的代码多管闲事会有帮助，这里有一个(几乎)完全可用的版本:

library.js - http://mikemccabe.me/tests/pong.archive.14.06.11/library.js

pong.js - http://mikemccabe.me/tests/pong.archive.14.06.11/pong.js

试一试 http://mikemccabe.me/tests/pong.archive.14.06.11/

最佳答案

我没有发现您对上下文的使用存在问题。为了实现允许渲染技术独立的设计目标，您应该为所需的渲染方法编写通用接口(interface)，并创建一个使用 context 的对象来实现此接口(interface)。然后您可以替换该对象的另一个版本，例如，使其在 Internet Explorer <9 中工作。

在 Javascript 中，我认为使用范围允许应用程序中的对象直接访问共享资源通常很方便。虽然这不是严格意义上的良好 OO 设计，但可以将其视为单例。例如:

var Pong = (function() {
   var Graphics, graphics, Ball, ball1, ball2, play;
   Graphics = function() {
      this.context = ...
   };
   graphics = new Graphics();
   Ball = function() {
     // do something with graphics
   };
   ball1 = new Ball();
   ball2 = new Ball();
   // ball1 and ball2 will both be able to access graphics

   play =function() {
       // play the game!
   };
   return {
       play: play
   }
}());

要推广这一点，您只需让 Graphics 对象具有通用方法，而不是直接提供对 context 的访问，并且拥有多个版本，实例化根据浏览器更正一个。与将 graphics 显式分配给 ball1 和 ball2 相比，除了纯粹主义之外，实际上没有任何缺点。当您处理数百个对象(例如表示 DOM 元素)而不是几个对象时，优势就变得很明显了。

关于javascript - OOP Javascript Pong 游戏中的上下文位于何处？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6363010/

Answer 1

我没有发现您对上下文的使用存在问题。为了实现允许渲染技术独立的设计目标，您应该为所需的渲染方法编写通用接口(interface)，并创建一个使用 context 的对象来实现此接口(interface)。然后您可以替换该对象的另一个版本，例如，使其在 Internet Explorer <9 中工作。

在 Javascript 中，我认为使用范围允许应用程序中的对象直接访问共享资源通常很方便。虽然这不是严格意义上的良好 OO 设计，但可以将其视为单例。例如:

var Pong = (function() {
   var Graphics, graphics, Ball, ball1, ball2, play;
   Graphics = function() {
      this.context = ...
   };
   graphics = new Graphics();
   Ball = function() {
     // do something with graphics
   };
   ball1 = new Ball();
   ball2 = new Ball();
   // ball1 and ball2 will both be able to access graphics

   play =function() {
       // play the game!
   };
   return {
       play: play
   }
}());

要推广这一点，您只需让 Graphics 对象具有通用方法，而不是直接提供对 context 的访问，并且拥有多个版本，实例化根据浏览器更正一个。与将 graphics 显式分配给 ball1 和 ball2 相比，除了纯粹主义之外，实际上没有任何缺点。当您处理数百个对象(例如表示 DOM 元素)而不是几个对象时，优势就变得很明显了。