OOP Javascript Pong游戏中的上下文在哪里？

Question

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

我正在使用html5画布和普通ol'javascript,没有框架(好吧,一点点jQuery用于键盘捕获).我有我的Pong对象代表我的游戏.Pong有一个属性ctx,其中包含对canvas.getContext("2d")上下文的引用.它也有一个player1,player2和ball你知道的控股属性.当球和两个玩家被实例化时,上下文被传递给他们的构造函数,以便他们也可以持有对上下文的引用以用于他们的draw(ctx)方法.Pong有一个draw()方法可以使用a调用setInterval(this.draw, 10).Pong的平局方法会调用两个球员和球的平局方法.

两个球员和球都将上下文作为一个属性并不适合我.它们不拥有上下文,因此它不应该是属性.然而,使用javascript和画布的本质似乎是这是最好的方法.在这种情况下,谁或什么应该拥有背景？理想情况下,我不希望球员和球对象有一个绘图对象.我觉得它们应该具有描述其几何和位置的属性,并且专用对象应该负责将它们渲染到屏幕上.这样,如果将来我决定使用<div>而不是画布,我可以改变渲染对象,其他一切都将是遗忘.

我知道我正在制作一个比它需要更复杂的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/

Answer 1

我认为您对上下文的使用没有问题。为了实现允许渲染独立于技术的设计目标，您应该为所需的渲染方法编写一个通用接口，并创建一个用于context实现此接口的对象。然后，您可以替换该对象的另一个版本，例如，使其在 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
   }
}());

To generalize this you can just make the Graphics object have general purpose methods instead of providing access to context directly, and have more than one version of it, instantiating the correct one depending on browser. There aren't really any downsides compared to explicitly assigning graphics to both ball1 and ball2 except purism. The upsides become substantial when you are dealing with hundreds of objects (e.g. representing DOM elements) rather than just a few.