



var color = "red"; var birdName = "redHat"; var powers = ["emptyHands"]; var isAttacked = false;
function attack($bird, animationConfig) {
isAttacked = true;
arm($bird);
$bird.animate(animationConfig);
}
function removeBird($bird, removeConfig) {
if (isAttacked)
$bird.animate(removeConfig);
}
function getBirdHitScore ($bird) {
return calculateScore($bird.position() + $nowPig.position());
}
var redBird = $("#redBird");
redBird.on("click", function(this){
attack($(this), {left: 1000, top: 250});
});
function RedAngryBird(htmlId, config) {
this.color = "red";
this.powers = config.powers;
this.isAttacked = false;
this.htmlId = htmlId;
this.$bird = $("#" + htmlId);
}
RedAngryBird.prototype = {
attack: function () {
this.isAttacked = true;
this.arm();
this.$bird.animate(this.animate.attack);
},
remove: function () {
if (this.isAttacked) {
this.$bird.animate(this.animate.destroy);
}
},
arm: function() { /*...*/}
};
var redHat = new RedAngryBird("jim", {name: "jim"});
var redNosed = new RedAngryBird("red", {name: "red"});
redHat.attack(); redNosed.attack(); redHat.remove();
function AngryBird(htmlId, config) {
this.color = config.color; // <- NEW Color property
this.powers = config.powers;
this.isAttacked = false;
this.$bird = $(htmlId);
}AngryBird.prototype = {
attack: function () {
this.isAttacked = true;
this.arm();
this.$bird.animate(this.animate.attack);
},
remove: function () {
if (this.isAttacked) {
this.$bird.animate(this.animate.destroy);
}
},
arm: function () { /*...*/ }
};var twitter = new AngryBird("#twitter", {color: "blue", name: "jim"});
var redHat = new AngryBird("#red", {color: "red", name: "red"});
twitter.attack();
redHat.attack();
redHat.remove(); //- removes only "redHat" from the DOM
//- 1. define a class
function BlueAngryBird () { this.color = 'blue' }//- 2. define the inheritance BlueAngryBird.prototype = new AngryBird;
//- 3. fix the constructor BlueAngryBird.prototype.constructor = BlueAngryBird;
//- 4.1 overide the arm method with a special arm
BlueAngryBird.prototype.arm = function() {
this.powers.push(new AngryBird(/*..*/));
this.powers.push(new AngryBird(/*..*/));
this.powers.push(new AngryBird(/*..*/));
this.$bird.on("click", this.split.bind(this));
}//- 4.2 adding NEW method - split birds
BlueAngryBird.prototype.split = function() {
for(var i = 0; i < this.powers.length; i++) {
this.usePower(this.power[i]);
}
}//- 5. create the bird
var twitter = new BlueAngryBird("#twitter", {name: "twitter"});
twitter.color; // outputs "blue"
twitter.arm(); // invokes the new methodRand Macivor
var RedBirdModel = Backbone.Model.extend({
isAttacked: function() {
return this.get("isAttacked");
},
poof: function() {
//- fires change events when data change
this.set({isDismissed: true});
}
});
var redModel = new RedBirdModel( birdProperties );
redModel.get("isAttacked") // returns "false"
var redhat = new RedBirdView({ model: redModel });
var RedBirdView = Backbone.View.extend({
events: {
"click": "attack"
},
initialize: function() {
this.model.on('change', this.render, this);
},
render: function() { ... },
attack: function() {
if (this.model.isAttacked()) {
this.model.poof();
} else {
this.model.set('isAttacked', true);
}
}
});
<%= birdHead %><%= birdBody %><%= birdLegs %>
var birdData = {
birdColor: "yellow",
birdHead: {/*...*/},
birdBody: {/*...*/},
birdLegs: {/*...*/}
}
var birdHtml = _.template( birdTemplateString, birdData );
require(
["js/AngryBird", "js/RedAngryBird", "libs/jquery", "libs/backbone"],
function(angryBird, redAngryBird, $, Backbone){
//- statements
});
define(
["js/AngryBird", "libs\jquery", "libs\backbone"],
function(angryBird, $, Backbone){
return {/* ... */};
});define([ "libs/jquery", "libs/underscore", "libs/backbone", "text!templates/bird.html"],
function($, _, Backbone, birdTemplate) {
var bird = Backbone.View.extend({
attack: function() {...},
arm: function() {...}
})
return bird;
}
)define([
"lib/jquery", "libs/underscore", "libs/backbone",
"js/AngryBirdView",
"text!templates/bird.html"],
function($, _, B, AngryBird, birdTemplate) {
//- private variable var birdSpeed = 2;
//- YELLOW BIRD
var yellowBird = AngryBird.extend({
arm: function() {...},
flyFast: function () {
birdSpeed *= 2; //- reference to private
this.fly();
}
})
return yellowBird;
})
require("path/to/YellowBirdView",
function(yellowBird) {
//- create new
var yellowChello = new yellowBird();
yellowChello.flyFast();
yellowChello.birdSpeed *= 5; //- JS Error - birdSpeed not defined
});
var GameRouter = Backbone.Router.extend({
routes: {
"help": "showHelp",
"levels/:level": "goTolevel",
"levels/:level/:scene": "goToScene"
},
//- 2. callbacks to handle entry points
showHelp: function() { /*...*/ },
goToLevel: function(level) { /* */ }
goToScene: function(level, scene) { /* */ }
});
//- called from Levels Menu Module
var GameMenuManager = Backbone.View.extend({
//- 1. define dom events
events: {
"click .scene": "startScene"
},
//- 2. start to play a scene
startScene: function(ev) {
GameRouter.navigate("levels/1/2", {trigger: true});
}})
//- Game Storage Module
define([ "libs/jquery", "libs/underscore", "libs/backbone",
"libs/backbone/safe"
function($, _, Backbone, Safe) {
var GameStorage = Backbone.Model.extend({
// define Safe safe: "angry-birds-levels",
setLevelSuccess: function(level, isPassed, score) {
this.set({
level: level,
isPassed: isPassed,
score: score
});
}
})
return GameStorage;
})
define([ "some-depended-files "],
function($, _, B, AngryBird, birdTemplate) {
var blueBird = AngryBird.extend({
initialize: function(gameController) {
//- 1. listen to Game Events
this.gameController = gameController;
gameController.on("bird-success-hit", this.hooray, this);
},
hooray: function() { /* happy happy joy joy */ },
attack: function() {
//- 2. notify the game
if (this.model.get('isSuccessAttack')) {
this.gameController.trigger("bird-success-hit", this.model.birdId);
}
},
})
return blueBird;
})
var GameController = Backbone.View.extend({
//- 1. notify/publish events to the core game controller
trigger: function (eventName, eventData) { /**/ },
//- 2. allow modules to listen/subscribe to other events
on: function (eventName, handler, scope) {...},
//- 3. constructor
initialize: function() {
this.modules = {
gameManager: new GameManager( this ),
gameStorage: new GameStorage( this ),
gameRouter: new GameRouter( this ),
levelsManager: new LevelsManager( this )
};
},
//- possible modules operations
startAll: function(modules) { /**/ },
stopAll: function() { /**/ },
disableModule: function(moduleId) { /**/ },
enableModule: function(moduleId) { /**/ }
})
Credits: Tikal Techs, mr doob for chrome experiments
Inspiration: Nicholas Zakas, Addy Osmani
/
#