cocos2d-js，至今日，也馬馬虎虎算接觸了一個星期了。這篇也算是對這個星期進行總結吧。

做為入門者，你需要明白cocos2d-x和cocos2d-js和cocos2d-lua和cocos2d-html和Cocos2d-Java的區別

cocos2d首先是使用Python語言寫的，之後國內某人改版成c++版本的cocos2d-x，後來引入cocos2d-js，cocos2d-lua，cocos2d-html（現已合併到cocos2d-js），cocos2d-java。其中cocos2d-js在2014年就得到廣泛的使用。

做為入門者，你需要明白cocos2d-js的基本框架

No picture you say a jb，上圖：

一眼望去，做為android開發者，瞬間想到的是android基本框架的那張圖，個人感覺有點像。

第一層是一些遊戲平臺，我們可以在Browsers 、Mobile Browsers ，WebApp，Android、Ios、Mac、Win32等等平臺執行，三個字——跨平臺，為什麼支援跨平臺呢？我們知道使用java的虛擬機器就可以跨平臺，天然的，至於ios使用的是開源專案Avian（java虛擬機器）。

第二層，左邊是cocos2d-h5，右邊是cocos2d-x和cocos2d-xJSB。看到這裡，會發現：

在瀏覽器平臺，呼叫的是cocos2d-h5，它包括SceneGraph、Audio、Network、Animation、Physics、Resources Loader、Plugin-X，Editor Support等模組，也就是支援場景渲染，音視訊，網路請求，動畫，物理感應，資源載入，Plugin-X是簡化第三方平臺接入的作用，Editor Support主要是對編輯器進行一些支援。

在Native平臺，呼叫的是cocos2d-x引擎，而cocos2d-x jsb是js程式碼轉換為c++程式碼的橋樑，它裡面包括spidermonkey引擎，通過spidermonkey引擎引擎回傳給JSB，JSB橋接cocos2d-x。

第三層cocos2d-js API 是提供cocos2d-js開發者呼叫的API。類似android框架的framework層。

第四層cocos2d-js， Games開發者就是在這層進行開發的。

做為入門者，你需要明白cocos2d-js引擎原理

簡單來說，就是使用h5的canvas標籤進行繪製。

做為入門者，你可能需要以下的一些學習資料

做為入門者，你需要搭建開發環境

首先安裝python環境，只需要next就行，同時在path環境配置python的路徑，最後在doc裡面執行命令如下

這樣就安裝成功了。
接下來通過python命令執行cocos2d-js引擎裡面的setup.py命令，比如，我的命令如下:

分別按步驟配置Apache Ant，Android SDK、Android NDK路徑就好，注意Ant路徑要要bin路徑下。

配置好之後，接下來就是安裝wamp，直接next就行了。最後執行wampmanager.exe，會看到工作列裡面程式，如下

點選它，然後啟動所有服務就打開了本地伺服器了。

接下來就是安裝開發環境sublime或者webstorm。

到這裡，我們就把開發環境搭建完成了。

做為入門者，你需要執行第一個HelloWorld

首先，我們在doc裡面cd到wamp安裝路徑裡面的www資料夾裡面（或在你自己想要地方的建立），執行建立專案的命令。比如我的命令如下：

這樣就建立好了一個專案，接下來我們來執行它
有兩種方式，一種是通過命令

cocos run -p web

或者直接開啟瀏覽器訪問，訪問本地ip+/工程專案就行，比如我的如下

http://192.168.31.240/HelloWorld/

這樣我們上圖介面和執行動畫，也算入門了，哈哈。

做為入門者，你需要了解下基本工程專案

No picture you say a jb，上圖：

framework目錄，是cocos2d-js的API層的原始碼，可供我們呼叫的時候檢視原始碼

res目錄，主要是放置一些本地資原始檔

runtime目錄，ios的虛擬機器

src目錄，寫js目錄，場景，層，精靈等都是放在這層

tools目錄，也就是框架裡面的jsb層，把js轉換為cocos2d-x的cpp程式碼的工具

.cocos-project.json和CMakeLists.txt專案編譯配置檔案

index.html 遊戲的首頁

main.js，遊戲執行的入口函式，也就是類似的main函式

project.json 配置js的檔案

做為入門者，來開發第一個場景

首先我們在src目錄建立一個Scene，命名為HelloScene.js，程式碼如下:

var HelloLayer = cc.LayerColor.extend({
    ctor:function(){
        this._super(cc.color.BLUE);
        //新增一個文字元素
        var size = cc.winSize;
        var helloTxt = new cc.LabelTTF("Hello World","Arial",30);
        helloTxt.x = size.width/2;
        helloTxt.y = size.height/2;
        this.addChild(helloTxt);
        this._listener = new cc.EventListener.create({
            event:cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true, 
            onTouchBegan:function(touch,event){
                var target = event.getCurrentTarget();  // 獲取事件所繫結的 target
                     // 獲取當前點選點所在相對按鈕的位置座標
                var locationInNode = target.convertToNodeSpace(touch.getLocation());    
                var s = target.getContentSize();
                var rect = cc.rect(0, 0, s.width, s.height);
                if (cc.rectContainsPoint(rect, locationInNode)) { // 點選範圍判斷檢測
                    alert("You don't ckick me");
                    return true;
                }
            }
        });
        cc.eventManager.addListener(this._listener,helloTxt);
    },
});
var HelloScene = cc.Scene.extend({
    onEnter:function(){
        this._super();
        this.addChild(new HelloLayer());
    },
});

簡單的一個Hello Wrold文字，然後為它新增一個點選事件。
通過上面程式碼我們知道，首先我們繼承的是cc.LayerColor，主要為場景新增一個背景顏色，如果不需要背景顏色，可以直接繼承cc.Layer。然後我們通過cc.LabelTTF建立了一個文字。為這個文字添加了一個點選事件，主要是通過cc.eventManager.addListener實現的，通過cc.EventListener.create建立一個回撥，這個回撥方法裡面有三個引數

event:cc.EventListener.TOUCH_ONE_BY_ONE //單次觸控事件監聽器

swallowTouches: true// 設定是否攔截事件，在 onTouchBegan 方法返回 true 時攔截，類似android的onInterceptTouchEvent

onTouchBegan:function //實現 onTouchBegan 事件回撥函式

然後通過cc.Scene.extend建立HelloScene這個場景，把HelloLayer建立addChild就行。

接下來，在app.js右下角按鈕事件新增場景跳轉就行

然後再project.json配置HelloScene.js，如下

這樣沒問題，我們就可以儲存F5重新整理下瀏覽器執行試下了，效果如下圖

以上只是簡單的一個示例。還有很多基本知識，沒有說到，只能靠自己慢慢修煉了。