时间:2021-07-01 10:21:17 帮助过:10人阅读
// constructor function
function 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 practice
MyExample.getTrue;
// this is undefined—the getTrue method is a part of the MyExample prototype,
// not the function itself
var example = new MyExample();
// example is now an object whose prototype is MyExample.prototype
example.getTrue; // evaluates to a function
example.getTrue(); // evaluates to true because isTrue is a property of the
// example instance
// Base class
function Character() {};
Character.prototype.health = 100;
Character.prototype.getHealth = function() {
return this.health;
}
// Inherited classes
function 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 constructor
monster1.getHealth(); // 100- inherited from the prototype object
function ParentClass() {
this.color = 'red';
this.shape = 'square';
}
function ChildClass() {
ParentClass.call(this); // use 'call' or 'apply' and pass in the child
// class's context
this.shape = 'circle';
}
ChildClass.prototype = new ParentClass(); // ChildClass inherits from ParentClass
ChildClass.prototype.getColor = function() {
return this.color; // returns "red" from the inherited property
};
// create an abstract, basic class for all enemies
// the object used in the .extend() method is the prototype
var Enemy = Base.extend({
health: 0,
damage: 0,
isEnemy: true,
constructor: function() {
// this is called every time you use "new"
},
attack: function(player) {
player.hit(this.damage); // "this" is your enemy!
}
});
// create a robot class that uses Enemy as its parent
//
var RobotEnemy = Enemy.extend({
health: 100,
damage: 10,
// because a constructor isn't listed here,
// Base.js automatically uses the Enemy constructor for us
attack: function(player) {
// you can call methods from the parent class using this.base
// by not having to refer to the parent class
// or use call / apply, refactoring is easier
// in this example, the player will be hit
this.base(player);
// even though you used the parent class's "attack"
// method, you can still have logic specific to your robot class
this.health += 10;
}
});
// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
var Engine = Base.extend({
stateMachine: null, // state machine that handles state transitions
viewStack: null, // array collection of view layers,
// perhaps including sub-view classes
entities: null, // array collection of active entities within the system
// characters,
constructor: function() {
this.viewStack = []; // don't forget that arrays shouldn't be prototype
// properties as they're copied by reference
this.entities = [];
// set up your state machine here, along with the current state
// this will be expanded upon in the next section
// start rendering your views
this.render();
// start updating any entities that may exist
setInterval(this.update.bind(this), Engine.UPDATE_INTERVAL);
},
render: function() {
requestAnimFrame(this.render.bind(this));
for (var i = 0, len = this.viewStack.length; i < len; i++) {
// delegate rendering logic to each view layer
(this.viewStack[i]).render();
}
},
update: function() {
for (var i = 0, len = this.entities.length; i < len; i++) {
// delegate update logic to each entity
(this.entities[i]).update();
}
}
},
// Syntax for Class "Static" properties in Base.js. Pass in as an optional
// second argument to.extend()
{
UPDATE_INTERVAL: 1000 / 16
});