我想對每一個Cocos2d游戲開發(fā)者來講，js-tests1直都是學(xué)習(xí)和參考的寶貴資源，也是最權(quán)威的指點教程。而，我們知道，CocosCodeIDE是官方推薦的1款強(qiáng)有力的IDE，其功能之強(qiáng)大，之便捷是其他IDE所沒法比擬的。那末如何將2者組合在1起，為我們的學(xué)習(xí)提供幫助呢？本篇博客將帶你走進(jìn)他們的世界。

1、了解CocosCodeIDE和js-tests

CocosCodeIDE：官網(wǎng)推出的1款強(qiáng)大的IDE，基于Eclipse改制而成。其主要特點在于兩個方面:

1. 便捷實用： CocosCodeIDE安裝簡單，配置和創(chuàng)建項目非常容易，運行，調(diào)試，發(fā)布項目也非常容易上手。

2. 功能強(qiáng)大： 我認(rèn)為CocosCodeIDE最吸引我的地方就是其強(qiáng)大的功能，主要體現(xiàn)在對源碼進(jìn)行修改后，只需要保存，便可在運行的游戲中看到修改以后的效果，而不需要重新運行游戲。這為常常產(chǎn)生的“微調(diào)”操作帶來了極大的便利。

PS：CocosCodeIDE官方下載地址：http://cn.cocos2d-x.org/download/#anchor5
CocosCodeIDE官方教程：http://cn.cocos2d-x.org/article/index?type=code-ide&url=/doc/cocos-docs-master/manual/code-ide/zh.md

js-tests：當(dāng)你下載好游戲引擎包時，1般都會自帶兩個案例教程，1個就是大家常常看到的“打飛機(jī)”游戲，另外一個就是js-tests。至于它們在哪里呢？請到你的安裝目錄下的samples文件夾下尋覓，以下圖：

js-tests里面主要展現(xiàn)的是cocos2d API的具體使用方法的案例教程，幾近每一個API都可以找到使用示例，效果非常贊。

2、為何要組合？

在組合之前，我們解釋1下為何要將2者組合。網(wǎng)上的很多教程都推薦大家通過第3方軟件的幫助，如：appserv，wamp，xampp等，來實現(xiàn)在閱讀器中直接運行js-tests和moonwarriors(打飛機(jī))，并通過閱讀器中觀看效果，IDE中查看代碼的方式進(jìn)行學(xué)習(xí)，可是這樣不但反復(fù)切換非常麻煩，也不能通過自己的微調(diào)來查看效果的改變，固然了，如果要看到改變必須重新運行加載1遍。非常浪費時間，異常繁瑣。

相比之下，我們會發(fā)現(xiàn)，在CocosCodeIDE中，我們可以通過win32調(diào)試功能，這個非常強(qiáng)大的功能，對我們的js-tests進(jìn)行實時微調(diào)，這對學(xué)習(xí)來講，無疑是巨大的幫助。固然了，你也能夠通過CocosCodeIDE中的通過閱讀器運行的功能，在閱讀器中查看js-tests的運行情況。下面，我們就來1起將CocosCodeIDE和js-tests組合起來吧。

PS：友誼提示，通過win32調(diào)試和在閱讀器中運行得到可測試的功能是稍有差異的，有的功能只能在win32調(diào)試狀態(tài)下查看，有的則只能在在閱讀器中運行狀態(tài)下查看。

win32運行狀態(tài)下沒法查看的功能有：
Bake Layer Test
Box2D Test
Facebook SDK Test
Reflection Test
TextInput Test
Touches Test

在閱讀器中運行沒法查看的功能有：
Effects Test
Effects Advanced Test
MotionStreak Test
OpenGL Test
Reflection Test
Cocos2d JS Presentation

下圖為CocosCodeIDE部份截圖，其中最左側(cè)兩個按鈕分別為win32調(diào)試，win32運行，最右側(cè)的按鈕為在閱讀器中運行。

3、組合出奇跡

說到組合方法，你可能第1個想法就是，既然CocosCodeIDE是基于Eclipse的，那我直接導(dǎo)入js-tests項目不就完事了嘛。這個，你可以去嘗試1下，反正我是沒成功，貌似js-tests不是1個完全的CocosCodeIDE項目，所以沒法導(dǎo)入。如果你成功導(dǎo)入了，請告知我，不勝感激。如果，你也沒有導(dǎo)入成功，不要著急，隨著我做，只需4步，走向成功。

第1步：在CocosCodeIDE中新建工程

首先在CocosCodeIDE中新建1個Cocos JavaScript工程(我的工程名為js-tests，這個名字隨意起。)，工程截圖以下：

PS：如果你對配置Cocos Code IDE和其開發(fā)環(huán)境還不是很了解的話，可以參考我的兩篇博客：
如何快速搭建Cocos2d-JS游戲開發(fā)環(huán)境：http://blog.csdn.net/qiumengchen12/article/details/44649331
如何在Cocos2d-JS環(huán)境下使用Cocos Studio導(dǎo)出的資源：http://blog.csdn.net/qiumengchen12/article/details/44726787

第2步：刪除無用文件

由于我們創(chuàng)建的工程默許，我們使用了CocosStudio，并為我們創(chuàng)建了1些CocosStudio需要的文件及文件夾，而我們這里只是要制作js-tests的CocosCodeIDE運行版本，所以可以將和CocosStudio相干的文件暫時刪除，使得全部項目更加清晰。但是可以保存CocosStudio文件夾，以備以后使用。以下圖，選中的文件均與CocosStudio有關(guān)，都可刪除。

第3步：替換相應(yīng)文件

我們需要替換的文件有：res文件夾，src文件夾，index.html，main.js，project.json。替換文件，行將游戲引擎安裝目錄的samples/js-tests文件夾下的相應(yīng)文件，復(fù)制粘貼到我們在CocosCodeIDE中創(chuàng)建的項目目錄下，并替換項目目錄下存在的舊文件。最后替換后的項目，以下：

第4步：運行項目

首先，為了避免資源不同步出錯，你可以刷新1下你在CocosCodeIDE中的項目，然后你就能夠愉快地運行你的項目了，不管是win32還是在閱讀器中運行，你都會收獲成功的喜悅！

win32運行效果截圖：

在閱讀器中運行效果截圖：

4、最后的支援

幫人幫到底，送佛送到西。如果你懶于進(jìn)行如上操作，或操作進(jìn)程中有不可抗拒因素致使你沒法進(jìn)行，你也能夠斟酌下載并使用我分享的已修改好的CocosCodeIDE版的js-tests工程。
我的環(huán)境信息以下：
（1） Cocos2d-JS引擎版本：V3.3
（2） Cocos版本：V2.1.5 For Win
（3） Cocos Code IDE版本：V1.2.0 For Win（64bit）
百度網(wǎng)盤分享鏈接：
鏈接：http://pan.baidu.com/s/1o6xFnOu 密碼：nv0s