JavaScript游戏中使用OOP和设计模式让代码变得更智能

学习如何在 ">JavaScript 中使用基于经典继承的库从 OOP 中获得更多的好处。本文还将介绍架构式设计模式,来展示了如何使用游戏循环、状态机和事件冒泡 (event bubbling) 示例来编写更整洁的代码。

在本文中,您将了解 JavaScript 中的 OOP,来探索原型继承模型和经典继承模型。举例说明游戏中能够从 OOP 设计的结构和可维护性中获得极大利益的模式。我们的最终目标是让每一块代码都成为人类可读的代码,并代表一种想法和一个目的,这些代码的结合超越了指令和算法的集合,成为一个精致的艺术品。

JavaScript 中的 OPP 的概述

OOP 的目标就是提供数据抽象、模块化、封装、多态性和继承。通过 OOP,您可以在代码编写中抽象化代码的理念,从而提供优雅、可重用和可读的代码,但这会消耗文件计数、行计数和性能(如果管理不善)。

过去,游戏开发人员往往会避开纯 OOP 方式,以便充分利用 CPU 周期的性能。很多 JavaScript 游戏教程采用的都是非 OOP 方式,希望能够提供一个快速演示,而不是提供一种坚实的基础。与其他游戏的开发人员相比,JavaScript 开发人员面临不同的问题:内存是非手动管理的,且 JavaScript 文件在全局的上下文环境中执行,这样一来,无头绪的代码、命名空间的冲突和迷宫式的 if/else 语句可能会导致可维护性的噩梦。为了从 JavaScript 游戏的开发中获得最大的益处,请遵循 OOP 的最佳实践,显著提高未来的可维护性、开发进度和游戏的表现能力。

原型继承

与使用经典继承的语言不同,在 JavaScript 中,没有内置的类结构。函数是 JavaScript 世界的一级公民,并且,与所有用户定义的对象类似,它们也有原型。用 new 关键字调用函数实际上会创建该函数的一个原型对象副本,并使用该对象作为该函数中的关键字 this 的上下文。清单 1 给出了一个例子。

清单 1. 用原型构建一个对象

// constructor
functionfunction MyExample() { // property of an instance when used with the 'new' keyword this.isTrue = true;};MyExample.prototype.getTrue = function() { return this.isTrue;}MyExample();// here, MyExample was called in the global context, // so the window object now has an isTrue property—this is NOT a good practiceMyExample.getTrue;// this is un
defined—the getTrue method is a part of the MyExample prototype, // not the function itselfvar example = new MyExample();// example is now an object whose prototype is MyExample.prototypeexample.getTrue; // evaluates to a functionexample.getTrue(); // evaluates to true because isTrue is a property of the // example instance

依照惯例,代表某个类的函数应该以大写字母开头,这表示它是一个构造函数。该名称应该能够代表它所创建的数据结构。

创建类实例的秘诀在于综合新的关键字和原型对象。原型对象可以同时拥有方法和属性,如 清单 2 所示。

清单 2. 通过原型化的简单继承

// Base classfunction Character() {};Character.prototype.health = 100;Character.prototype.getHealth = function() { return this.health;}// Inherited classesfunction
Player() { this.health = 200;}Player.prototype = new Character;function Monster() {}Monster.prototype = new Character;var player1 = new Player();var monster1 = new Monster();player1.getHealth(); // 200- assigned in constructormonster1.getHealth(); // 100- inherited from the prototype object

时间: 2014-12-18

JavaScript游戏中使用OOP和设计模式让代码变得更智能的相关文章

VC++角色游戏中的人物初始化模块代码实例_C 语言

本文以一个实例讲述VC++游戏中的人物角色动画初始化实现代码,本代码只是实现人物角色动画的初始化,不包括其它功能,并不是完整的一个游戏应用,现在将这个角色初始化代码与大家分享.希望能够对大家学习VC++有所帮助. #include "StdAfx.h" #include "Character.h" CCharacter::CCharacter(void) { } CCharacter::~CCharacter(void) { } //初始化人物 bool CChar

Flash中oop的设计模式

设计 有人问我flash的as应该怎么写,我可以很负责任地告诉他,想怎么写就怎么写,因为as以及flash内部的构成模式决定了它的高度自由化.理论上来说,用按钮的on事件,加上stop(),play(),gotoAndStop(),gotoAndPlay(),就可以实现一个flash里大部分的逻辑关系,而且源代码简单易懂.但是大多数人不会这么做,是因为这种方法实在太让人敬佩.稍有常识的程序员都会知道面对对象与面对过程的区别.Flash的编程虽然只是以脚本的形式出现,并且还很不完善,比如,没有多继

设计模式中的facade外观模式在JavaScript开发中的运用_基础知识

概念 外观模式(门面模式),是一种相对简单而又无处不在的模式.外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用. 外观模式并不是适配器模式,适配器模式是一种包装器,用来对接口进行适配以便在不兼容系统中使用它.而创建外观元素则是图个方便.它并不用于达到需要特定接口的客户系统打交道这个目的,而是用于提供一个简化的接口. JavaScript代码示例 用一段再简单不过的代码来表示 var getName = function(){ return ''svenzeng" } var ge

Virtjs —— 在 JavaScript 应用中嵌入游戏模拟器

Virtjs 可以让你在 JavaScript 程序中嵌入不同的架构上的模拟器,同时提供一些开放 API 可以轻松的将模拟器嵌入到你的应用程序.当前的 Virtjs 只有一个 Gameboy 的游戏,但其引擎库在过去的几月内不断增长. Virtjs 不只是一个简单的游戏模拟器,你还可以看到模拟器运行时的细节,包括寄存器状态.内存读写.输入输出设备信息等. 文章转载自 开源中国社区 [http://www.oschina.net]

Web网页设计师从游戏中能学到些什么

译者序:一直以来我都想写一篇关于游戏与交互设计之间关系的文章,因为我坚信好的设计和游戏一样有魔力,都能为 用户带来乐趣.这可能跟我之前在游戏公司任职过有关,潜移默化地受到感染和熏陶.当看到这篇文章时,共鸣了,这就是我想要说的,于是我决定译过来,跟更多 设计师产生共鸣,推动 "乐趣设计",同时也为自己这方面的想法写下第一笔. 好的设计应该是融会贯通的,有相似的细节和处理方法,当然,还要有一个能够吸引人的理由或法宝,如果你有过这方面的零碎念头,而没有能汇总在一起,往下看,这就是了! 游戏越

深入理解JavaScript系列(26):设计模式之构造函数模式详解

 这篇文章主要介绍了深入理解JavaScript系列(26):设计模式之构造函数模式详解,本文讲解了基本用法.构造函数与原型.只能用new吗?.强制使用new.原始包装函数等内容,需要的朋友可以参考下     介绍 构造函数大家都很熟悉了,不过如果你是新手,还是有必要来了解一下什么叫构造函数的.构造函数用于创建特定类型的对象--不仅声明了使用的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值.你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法. 基本用法 在

深入理解JavaScript系列(27):设计模式之建造者模式详解

 这篇文章主要介绍了深入理解JavaScript系列(27):设计模式之建造者模式详解,建造者模式可以将一个复杂对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示,需要的朋友可以参考下     介绍 在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一起的算法确相对稳定.如何应对这种变化?如何提供一种"封装机制"来隔离出"复

深入理解JavaScript系列(28):设计模式之工厂模式详解

 这篇文章主要介绍了深入理解JavaScript系列(28):设计模式之工厂模式详解,工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类,需要的朋友可以参考下     介绍 与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类. 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子类可以重写接口方法以便创建的时候指定自己的对象类型. 这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于

深入理解JavaScript系列(29):设计模式之装饰者模式详解

 这篇文章主要介绍了深入理解JavaScript系列(29):设计模式之装饰者模式详解,装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数),需要的朋友可以参考下     介绍 装饰者提供比继承更有弹性的替代方案. 装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数). 装饰者用于通过重载方法的形式添加新功能,该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的.