JavaScript游戏之是男人就下100层代码打包_javascript技巧_脚本之家

这次的游戏的编写难度比之前的都高很多。本次鄙人用了js的继承以及设计模式的工厂模式,也算是一个突破。。。

JavaScript就其本质是函数式编程语言,是Lisp的后代,同时又加入了一下面向对象编程的元素,放弃了一些难懂的函数式语言的元素。
函数式编程语言可以实现面向对象编程,这是毫无疑义的,Curry方法可以实现对类和对象的模拟。但是JavaScript提供了另一种实现OOP的方法:原型继承。
因此,JavaScript实现面向对象编程和一般的函数式编程语言还是有所区别的。
本文我将会给大家介绍JavaScript实现单继承和多继承的方法。
用原型实现单继承:
有很多JavaScript库提供了一些函数帮助实现单继承。但实际上,JavaScript本身就提供了原型继承的方法。因此,根本不需要提供特定的方法来实现,简单使用JavaScript代码就可以实现单继承。但是,JavaScript提供的原型继承方法很容易犯错,下面我给大家演示一下怎样简洁明了地实现原型继承。
假设MyB继承MyA类,那么,代码如下: function MyA(){
if(MyA.prototype.baseClass!==undefined){ MyA.prototype.baseClass.call; }
……一般代码 } function MyB(){ if(MyB.prototype.baseClass!==undefined){
MyB.prototype.baseClass.call; } ……一般代码 } MyB.prototype=new MyA();
MyB.prototype.baseClass=MyB.prototype.constructor;//使用baseClass引用//基类的构造器函数。
MyB.prototype.constructor=MyB;//恢复子类的构造器属性
用于未来通过这个属性判//断对象的类型。 var myA=new MyA;
上述javascript代码中,我在每一个构造函数中都添加了这么一段代码:
if(ClassName.prototype.baseClass!==undefined){
ClassName.prototype.baseClass.call; }
这段代码寻找原型中的baseClass方法,如果有,就调用它。
在后面的原型继承的实现中,我为子类创建了baseClass属性,它的值是基类的构造函数。因此,只要遵守我的方式编写代码,就可以保证基类的构造函数在子类构造实例时会得到执行。
现在,如果MyA类又继承了Base类,只需要添加3行原型继承代码即可:
MyA.prototype=new Base(); MyA.prototype.baseClass=
MyA.prototype.constructor;//使用baseClass引用//基类的构造器函数。
MyA.prototype.constructor= MyA;//恢复子类的构造器属性
用于未来通过这个属性判//断对象的类型。
不需要修改MyA类本身的代码,MyA类及其子类MyB类的实例就都可以得到正确的执行。
那些JavaScript库实现的继承,需要修改Object,Function等基类,容易引起冲突。还有一些方法,每一次实现继承,都必须手工修改子类的构造函数,以使构造函数能够正确调用基类的构造函数。
上面提供的方法编写JavaScript代码很好地解决了这些问题。 用Mixin实现多继承
JavaScript本身并没有提供多继承的机制,但我们可以使用Mixin这种技巧实现多继承的效果。
下面是我编写的Mixin助手方法,可以为类和对象动态添加属性。
1,copyClassPrototypeProperties复制类的原型属性 /** *
把源类原型上的所有属性复制到目标对象上,第一个参数是boolean值,表示是否覆盖目标类的原型的属性
*/ function
copyClassPrototypeProperties(isOverride,receivingClass,givingClass){ if{
for(var i=3;i2,copyObjectProperties复制对象的属性 /* *JavaScript游戏之是男人就下100层代码打包_javascript技巧_脚本之家。
把源对象的所有属性复制到目标对象上,第一个参数是boolean值,表示是否覆盖目标对象的属性
*/ function
copyObjectProperties(isOverride,receivingObject,givingObject){ if{
for(var i=3;i3,copyProperties复制属性到对象 /* *
把属性复制到目标对象中,属性可以有任意多个,并且可以是数组。 */
function copyProperties{ for (var i=1;i

问题1: OOP 指什么?有哪些特性

OOP(Object-Oriented-Programming),指面向对象程序设计。是一种程序设计思想。OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数。

三个基本特征分别为:

  • 封装

也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏。封装是面向对象的特征之一,是对象和类概念的主要特性。
简单的说,一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部,某些代码或某些数据可以是私有的,不能被外界访问。通过这种方式,对象对内部数据提供了不同级别的保护,以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分。

  • 继承

所谓继承是指可以让某个类型的对象获得另一个类型的对象的属性的方法。它支持按级分类的概念。继承是指这样一种能力:它可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展。
通过继承创建的新类称为“子类”或“派生类”,被继承的类称为“基类”、“父类”或“超类”。继承的过程,就是从一般到特殊的过程。要实现继承,可以通过“继承”(Inheritance)和“组合”(Composition)来实现。继承概念的实现方式有二类:实现继承与接口继承。实现继承是指直接使用基类的属性和方法而无需额外编码的能力;接口继承是指仅使用属性和方法的名称、但是子类必须提供实现的能力;

  • 多态

就是指一个类实例的相同方法在不同情形有不同表现形式。多态机制使具有不同内部结构的对象可以共享相同的外部接口。这意味着,虽然针对不同对象的具体操作不同,但通过一个公共的类,它们(那些操作)可以通过相同的方式予以调用。

参考资料:http://www.cnblogs.com/hnrainll/archive/2012/09/18/2690846.html

游戏的大致设计思路:1,玩家类Player:一个人能左右移动,以及上下移动的小人。拥有的基本方法:{左右移动
: 单纯的键盘左右移动,

问题2: 如何通过构造函数的方式创建一个拥有属性和方法的对象?

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log('Hello Wrold!');
  };
}

var person = new Person('face', 18);

向下移动 : 属于向下加速度移动,每次移动都会加一个重力加速度的值,

问题3: prototype 是什么?有什么特性

prototype是通过调用构造函数而创建的对象实例的原型对象。

将实例需要共享的属性和方法放在prototype对象中,实例对象将可以自动引用:

function Person(name) {
  this.name = name;
}

Person.prototype = { species: 'people' };

var personOne = new Person('one');
console.log(personOne.species); //  people

var personTwo = new Person('two');
console.log(personTwo.species); //  people

在上面的例子中,species属性放到了prototype对象中,新疆的实例都可以共享;
同时只要修改了prototype对象,实例对象也会随着修改。

向上移动 : 其实是跟着方块一起向上移动, 匀速向上运动,

问题4:画出如下代码的原型图

function People (name){
  this.name = name;
  this.sayName = function(){
    console.log('my name is:' + this.name);
  }
}

People.prototype.walk = function(){
  console.log(this.name + ' is walking');
}

var p1 = new People('hello');
var p2 = new People('world');

图片 1

prototype

弹跳 : 就是玩家先向上一个减速度运动,然后,当速度小于1时,像下加速度运动

问题5: 创建一个 Car 对象,拥有属性name、color、status;拥有方法run,stop,getStatus

function Car(name, color, status) {
  this.name = name;
  this.color = color;
  this.status = status;
}

Car.prototype = {
  run: function() {
    console.log('It is running');
  },

  stop: function() {
    console.log('It is stop');
  },

  getStatus: function() {
    console.log(this.status);
  }
};

var car = new Car('audi', 'white', 'well');

}

问题6: 创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。拥有以下属性和方法

  1. ct属性,GoTop 对应的 DOM 元素的容器
  2. target属性, GoTop 对应的 DOM 元素
  3. bindEvent 方法, 用于绑定事件
  4. createNode 方法, 用于在容器内创建节点

function GoTop() {
  this.ct = document.querySelector('.ct');
  this.target = this.createNode();
  this.bindEvent();
}

GoTop.prototype.bindEvent = function() {
  var self = this;
  this.target.onclick = function() {
    window.scrollTo(0, 0);
  };
};

GoTop.prototype.createNode = function() {
  var target = document.createElement('div');
  target.innerText = '点我回到顶部';
  target.classList.add('btn');
  this.ct.appendChild(target);
  return target;
};

var goTop = new GoTop();

2,方块基类BlockBase:所有方块的基类,拥有公共的方法以及接口。

问题7: 使用木桶布局实现一个图片墙

查看源码:点击查看
效果预览:点击查看

参考资料:http://www.cnblogs.com/hnrainll/archive/2012/09/18/2690846.html

参考资料:http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

参考资料:https://segmentfault.com/a/1190000000662547

拥有的基本方法:{

移动 : 方块的向上匀速移动,

检测玩家是否在方块上 : 判断玩家是否停留在方块上

}

以及一些抽象的接口函数,只有名字,需要在子类中实现,具体看源码。

3,各种子类,如普通方块类NormalBlcok、弹跳方块类FlipBlock等

继承的实现方式如下:

在构造函数中:BlockBase.call;继承非prototype的属性与方法

在函数外部:子类方块.prototype = new
BlockBase();继承基类的prototype的属性与方法

4, 工厂类BlockFactory:负责生产方块,以及击中处理方块

拥有的基本方法:{

生成方块 : 重点的方法,就是随机生成一块方块

}

其实我也不知道怎么说,还是看源码吧。里面我注释得很具体了。

还有,bug肯定是会有的,希望大家谅解。。。

最后献上预览吧。希望大家多多拍砖,能让我多些提高。最好在代码的编写上。方向左右控制移动,界面是做得比较丑。。。大家见谅。演示代码:;
/201011/yuanma/DownFloor.rar

网站地图xml地图