如果你是一個cocos2d-x的老手，那你可以忽略這篇博文，如果你是一個接觸過javascript，想通過HTML5做游戲的，但是苦於不知道如何下手，那么這篇博文可能會幫到你。
cocos2dx-jsb的主要運用的語言是javascript，其實簡單的說jsb就是cocos2d-x提供的C++ -> javascript的一系列接口，通過編寫js的腳本來調動C++的接口做一系列的動作。實際的運行順序是:js執行接口->spidermonkey解析js，判斷調用了哪個C++接口->執行2dx的相應的接口->opengl 渲染... 知道了這個順序以后，關鍵是怎么來寫js呢？那下面來認識下cocos2d-html5
Cocos2D-HTML5是基於HTML5規范集的Cocos2D引擎的分支，於2012年5月發布,到現在差不多有1年多了，功能，API已經趨向於穩定，基本上每個月都有大的版本迭代更新，現在同時支持canvas和webgl渲染，有些功能比如批渲染，這個canvas是不能做的，如果瀏覽器支持webgl就可以運行。cocos2d-html5的API是向下兼容jsb的，也就是說有些api在jsb里面是執行不了的，但是90%以上的canvasAPI都是一致的，這一塊的話jsb開發者和cocos2d-h5開發者兩邊都在不斷的同步。絕大部分常用的API都是足夠使用的，等熟悉了這兩個框架以后就可以做到用cocos2d-h5在瀏覽器中調試一遍，然后在用jsb在手機上運行是一樣的效果，也就是我們所說的一套代碼，跨平台運行。但是要達到這樣一個效果，需要了解這兩個框架，了解的越深入，碰到問題處理起來越是游刃有余。
coding的最好的學習就是實踐，jsb入門可以先從cocos2d-h5入門做起，首先需要配置一下web開發環境，這個比手機開發環境搭建簡單多了，你需要一個web服務器，apache或者tomcat都可以（個人推薦apache）,一個chrome最新的瀏覽器(當然firefox也可以，chrome調試，性能最好),然后從cocos2d-x官網(http://www.cocos2d-x.org/)中下載最新的cocos2d-h5壓縮包，解壓以后放到apache或者tomcat對應的資源目錄下面，然后輸入URL指向到cocos2d-h5包里面對應的index.html,如果沒有什么問題的話就可以看到cocos2d-h5的頁面了，到此你已經完成了h5環境的搭建，如果你對此還有疑問，可以看官方的詳細H5入門上手說明 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Getting_Started_with_Cocos2d-html5。
如果你完成了上述HelloWorld的創建后，那就可以試着創建jsb的環境了，mac版的ios環境和android環境都非常容易，平時開發可以用chrome瀏覽器跑通功能->ios模擬器驗證原生環境->做完一個模塊用iphone真機測試性能效率，這里重點說一下window環境，jsb的環境其實就是cocos2dx的環境，官方有一篇win7下如何配置android環境的wiki http://www.cocos2d-x.org/projects/cocos2d-x/wiki/How_to_set_up_the_android_cocos2d-x_development_environment_on_Windows_7
基本上把會遇到的問題都詳細描述清楚了，除此之外官方wiki還有個問題沒有寫到，某些win7系統編譯工程的時候會發現無法把資源目錄拷貝到assets目錄下面，原因是cygwin的權限不夠，需要把cygwin的權限設為root權限，然后重啟電腦，應該就可以了，修改cygwin Root方法請自行百度。
完成windows下面android配置后，我們用創建工程工具腳本創建一個跨平台的工程。在cygwin中執行腳本
cd /cocos2d-x/tools/project-createor/
#其中Clams是project名,com.supersell.crash是安卓中主Activity所在的package名，這兩個名字都可以根據項目來改,language對應的是變成語言，jsb項目就是javascript
python create_project.py -project Clams -package com.supersell.crash -language javascript
創建完工程以后，會在cocos2d-x/projects 下面生成Clams目錄，打開目錄結構如下
Classes目錄，存放了AppDelegate.cpp和AppDelegate.h文件這兩個文件，這兩個文件是項目的C++入口，jsb接口的引入，加載入口js都是在這里，具體請看
1 #include "cocos2d.h" 2 #include "SimpleAudioEngine.h" 3 #include "ScriptingCore.h" 4 #include "generated/jsb_cocos2dx_auto.hpp" 5 #include "generated/jsb_cocos2dx_extension_auto.hpp" 6 #include "jsb_cocos2dx_extension_manual.h" 7 #include "cocos2d_specifics.hpp" 8 #include "js_bindings_chipmunk_registration.h" 9 #include "js_bindings_system_registration.h" 10 #include "js_bindings_ccbreader.h" 11 #include "jsb_opengl_registration.h" 12 #include "XMLHTTPRequest.h" 13 #include "jsb_websocket.h" 14 15 USING_NS_CC; 16 using namespace CocosDenshion; 17 18 AppDelegate::AppDelegate() 19 { 20 } 21 22 AppDelegate::~AppDelegate() 23 { 24 CCScriptEngineManager::purgeSharedManager(); 25 } 26 27 bool AppDelegate::applicationDidFinishLaunching() 28 { 29 // 從這里開始實例化導演類 30 // initialize director 31 CCDirector *pDirector = CCDirector::sharedDirector(); 32 pDirector->setOpenGLView(CCEGLView::sharedOpenGLView()); 33 34 // turn on display FPS 35 pDirector->setDisplayStats(true); 36 37 // set FPS. the default value is 1.0/60 if you don't call this 38 pDirector->setAnimationInterval(1.0 / 60); 39 40 // 實例化腳本核心類，這個類封裝了spidermonkey的一些接口，基本上所有的js腳本處理都由這個類來執行 41 ScriptingCore* sc = ScriptingCore::getInstance(); 42 // 從這里開始注冊腳本綁定，如果以后自己寫了新的綁定，也需要在這里執行注冊 43 sc->addRegisterCallback(register_all_cocos2dx); 44 sc->addRegisterCallback(register_all_cocos2dx_extension); 45 sc->addRegisterCallback(register_all_cocos2dx_extension_manual); 46 sc->addRegisterCallback(register_cocos2dx_js_extensions); 47 sc->addRegisterCallback(register_CCBuilderReader); 48 sc->addRegisterCallback(jsb_register_chipmunk); 49 sc->addRegisterCallback(jsb_register_system); 50 sc->addRegisterCallback(JSB_register_opengl); 51 sc->addRegisterCallback(MinXmlHttpRequest::_js_register); 52 sc->addRegisterCallback(register_jsb_websocket); 53 54 sc->start(); 55 56 CCScriptEngineProtocol *pEngine = ScriptingCore::getInstance(); 57 CCScriptEngineManager::sharedManager()->setScriptEngine(pEngine); 58 // main.js就是js的入口文件，存放在Resources下面，換新的js需要注意路徑 59 ScriptingCore::getInstance()->runScript("main.js"); 60 61 return true; 62 } 63 64 void handle_signal(int signal) { 65 static int internal_state = 0; 66 ScriptingCore* sc = ScriptingCore::getInstance(); 67 // should start everything back 68 CCDirector* director = CCDirector::sharedDirector(); 69 if (director->getRunningScene()) { 70 director->popToRootScene(); 71 } else { 72 CCPoolManager::sharedPoolManager()->finalize(); 73 if (internal_state == 0) { 74 //sc->dumpRoot(NULL, 0, NULL); 75 sc->start(); 76 internal_state = 1; 77 } else { 78 sc->runScript("hello.js"); 79 internal_state = 0; 80 } 81 } 82 } 83 84 // This function will be called when the app is inactive. When comes a phone call,it's be invoked too 85 void AppDelegate::applicationDidEnterBackground() 86 { 87 CCDirector::sharedDirector()->stopAnimation(); 88 SimpleAudioEngine::sharedEngine()->pauseBackgroundMusic(); 89 SimpleAudioEngine::sharedEngine()->pauseAllEffects(); 90 } 91 92 // this function will be called when the app is active again 93 void AppDelegate::applicationWillEnterForeground() 94 { 95 CCDirector::sharedDirector()->startAnimation(); 96 SimpleAudioEngine::sharedEngine()->resumeBackgroundMusic(); 97 SimpleAudioEngine::sharedEngine()->resumeAllEffects(); 98 }
如果沒有自己新寫的js腳本綁定，這個類最多只需要修改入口js就行
pro.android:安卓項目工程，我們來看下他里面的結構
幾個重要的文件說明下,
AndroidManifest.xml:用來記錄安卓安裝權限，app橫屏豎屏等的一些配置
assets:資源目錄,編譯項目的時候，會自動將Rescourse目錄下的資源(圖片,js)和框架js都拷貝到這個目錄下，每次編譯都是直接覆蓋的，所以如果你需要把一部分圖片打包到apk里面，你只要把相應的資源存放到Rescourse目錄。
bin:編譯好的java文件會存放到這里,跑過build_native.sh才有
jni:這個目錄下面存放了一個重要的文件，Android.mk，這個是項目的入口mk文件，ndk的項目編譯從這里開始找，大部分情況你不需要動他，以后有自己新寫的C++擴展，你需要在這個mk文件中聲明。
libs:存放了編譯好的cocos2d-x動態庫(.so),跑過build_native.sh才有。
build_native.sh:一鍵編譯腳本，編譯項目的時候你需要先執行他，也可以在eclipse中直接右鍵項目run，其實也是通過腳本運行的，運行的前提需要配置好cocos2dx的安卓環境。
===========================
proj.ios:ios項目環境，直接雙擊.xcodeproj就能跑了，當然需要改入口文件的話還是參照上面的改法。
Resources:編寫的腳本，還有打包進去的圖片都存放在這里。
如果順利的話，編譯完工程后連上手機調試，你就可以直接看到helloWorld了