轉載請標明出處：
http://blog.csdn.net/iamzgx/article/details/54232599
本文出自:【iGoach的博客】
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標籤進行繪製。
做爲入門者，你可能需要以下的一些學習資料
cocos2d官網http://www.cocos.com/docs/js/index.html
cocos2d-js教學視頻http://i.youku.com/lingjianfeng
做爲入門者，你需要搭建開發環境
1、window平臺下載安裝Python https://www.python.org/downloads/
2、下載cocos2d-js引擎http://www.cocos.com/download
3、下載Apache Ant https://ant.apache.org/bindownload.cgi
4、下載AndroidSDK和Android NDK
5、下載wamp本地服務器
6、下載IDE sublime或者webstorm
首先安裝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刷新下瀏覽器運行試下了，效果如下圖
以上只是簡單的一個示例。還有很多基本知識，沒有說到，只能靠自己慢慢修煉了。