A Simple H5 Game -- Angry Bug(part 1)

Recently, on my way processing Udacity Front-end Nanodegree, I met a project called “Classic Arcade Game”, developed by Object Oriented JavaScript and HTML5. Here is my result : https://github.com/shisaq/frontend-nanodegree-arcade-game

In the beginning of this project, when I received the resources, opening index.html , wow what a pity! There was nothing except a totally blank white page. After a long time fighting against my hopeless, I started to dig into the project.

What I had learned:

Object Oriented JavaScript, including scopes（作用域）, closures（闭包）, this keyword, prototype chains（原型链）, object decorator pattern（对象修饰模式）, functional classes（功能类）, prototypal classes（原型类）, subclasses and superclasses（子类和父类）, and what’s more: pseudoclassical subclasses（伪类，不确定是否翻译正确）.
HTML5 canvas basics.

OK, now I want to explain the concepts to myself:

First, Object Oriented JavaScript:

Scopes: define where can variable use. If the variable is defined out of any function, it may be in a global scope, and can be called by anyone. But it’s not a good idea to set too many variables cuz it will be easy to make conflicts.
Closures: every function should have access to all the variables from all the scopes surround it. A closure is just any functions that somehow remains available after those after those outer scopes have returned. This can make every function run independent, which does make sense.
this keyword: this is an amazing concept, which made me confused so much… Anyway, this will be inside of a function. If not, this means <global> . So if this is in a function, when the function is called by a entity, the keyword this means the entity. Other word, this . So the keyword this makes it possible for it to just build one function object, and use it as a method on a bunch of other objects. And every time we call the method, it’ll have access to whatever object it’s being called on. This can be useful for conserving memory, and it’s only possible because we have the parameter this .
Prototypal chains: example: var A = Object.create(B); Use a link between 2 objects, whenever requesting a property that doesn’t in A, it’ll use B as a fall back source of properties.
Object decorator pattern: for reusing code, and dynamically（动态地） adding some specific actions into an object at the same time, we can use this feature.

[caption id=”” align=”aligncenter” width=”905”] object decorator pattern in the red box[/caption]

Functional Classes: a function that constructs all the common features in a class so that whatever instance（实体） built by this class, it’ll have the features from the function. And this class is called functional class. In JavaScript, we should make the first letter of the functional class name uppercase. We can say it’s a constructor.
Prototypal classes: function sharing prototypal delegation（代表）is the very goal of the prototypal pattern. If method were defined inside the constructor, there really wouldn’t be any reason to delegate the instances any prototype at all. I think it is used as an action in order to manipulate the instance which belongs to the functional class.
Subclasses and superclasses: the same as the literal meaning. Subclasses can get all the features that is in superclasses, but subclasses can have some particular features just for itself.

[caption id=”” align=”aligncenter” width=”428”] subclasses and superclasses[/caption]

Pseudoclassical subclasses: according my understanding, pseudo means it’s not real. So that may means the subclass is not a real subclass of the superclass. But it still can use the features offered by the superclass, and what’s more important, the subclass can have its own functions. Actually it sounds just like there’s no difference between a pseudoclassical subclass and a real subclass. But it can save the memory, upgrade performance, and it’s actually easier to maintain because everything is connected, if you want to change one, you don’t need to change everywhere, just find the superclass, then change. Other word, pseudoclassical subclasses can not only add the features for itself, but can add the actions for the instances that belong to it.

[caption id=”” align=”aligncenter” width=”849”] pseudoclassical subclasses[/caption]