前言：
我們分析了flappy bird的代碼思路（flappy bird遊戲源代碼揭祕和下載），也移植到了android平臺（flappy bird遊戲源代碼揭祕和下載後續---移植到android真機上），現在我們要把代碼移植到html5網頁瀏覽器。聽起來很棒吧，想不到也可以直接在網頁上運行！從window/mac電腦系統, 到android/ios移動系統，再到html5網頁瀏覽器，編寫一次，到處運行，這正是cocos2dx editor的神奇之處。
ps: 注意以下事項：
1 筆者撰寫本文的前提是：讀者已經瞭解過移植到android平臺的博文，如果沒有，請跳轉過去了解---移植到android平臺；
2 請更新cocos2d-x editor到cocos2d-x editor 1.0Beta版本：（很重要）
博文地址： http://blog.csdn.net/touchsnow/article/details/18451107
背景：
最近火爆全球的遊戲flappy bird讓筆者歎爲觀止，於是花了一天的時間山寨了一個一模一樣的遊戲，現在把遊戲的思路和源碼分享出來，代碼是基於javascript語言，cocos2d-x遊戲引擎，cocos2d-x editor手遊開發工具完成的，請讀者輕砸；
ps：運行demo需要配置好cocos2d-x editor，暫不支持其他工具。還有demo是跨平臺的，可移植運行android，ios，html5網頁等。
html5移植代碼下載：
和JS代碼唯一的區別是Published編譯目錄的代碼不同，Sources一模一樣
進入代碼集中營下載(flappy源碼--移植到html5)： http://blog.makeapp.co/?p=306&preview=true
運行在谷歌chrome瀏覽器上的效果圖
cocos2d-x editor 開發工具(2013-02-14 已更新到1.0Beta)：
cocos2dx editor，它是開發跨平臺的手機遊戲工具，運行window/mac系統上，javascript腳本語言，基於cocos2d-x跨平臺遊戲引擎, 集合代碼編輯，場景設計，動畫製作，字體設計，還有粒子，物理系統，地圖等等的，而且調試方便，和實時模擬；
cocos2dx editor 下載，介紹和教程：http://blog.csdn.net/touchsnow/article/details/19070665；
cocos2dx editor 官方博客：http://blog.makeapp.co/?cat=8；
Published目錄移植代碼結構分析：
移植方法步驟：
移植方法很簡單，沒有android移植那麼複雜，只需選擇在配置裏面html5，默認瀏覽器（ie瀏覽器存在兼容性問題，請選擇其他瀏覽器作爲默認瀏覽器），然後點擊綠三角運行，在google chrome瀏覽器如文中效果；編譯好的代碼在Published目錄裏面，Published在左側工程結構裏面隱藏了，讀者通過代碼所在的源目錄找尋到；
如何部署到服務器
移植到html5注意事項：
如果黑屏或者位置偏差，在Main.js主函數裏面 ，
1 定義好資源 var ccb_resources = [
{src: "Resources/flappy_packer.plist"},
{src: "Resources/flappy_frame.plist"} ,
{src: "Resources/flappy_packer.png"},
{src: "Resources/bg.png"},
{src: "Resources/ground.png"}
/* {src: "Resources/fonts/big_score.fnt"} ,
{src: "Resources/fonts/small_score.fnt"},*/
/* {src: "Resources/fonts/number.png"} ,
{src: "Resources/fonts/number1.png"}*/
];
2 修改網頁瀏覽器裏面的顯示寬高，找到setDesignResolutionSize 第一個參數表示寬，第二個參數表示高
var glView = director.getOpenGLView();
glView.setDesignResolutionSize(720, 1280, cc.RESOLUTION_POLICY.SHOW_ALL);
cc.Loader.preload(ccb_resources, function () {
cc.BuilderReader.runScene("", "MainLayer");
}, this);
flappy博文系列：
flappy bird遊戲源代碼揭祕和下載後續---移植到android真機上
flappy bird遊戲源代碼揭祕和下載後續---移植到html5網頁瀏覽器
flappy bird遊戲源代碼揭祕和下載後續---日進5萬美元的祕訣AdMob廣告
flappy bird遊戲源代碼揭祕和下載後續---移植到蘋果ios上 （未寫）
筆者語：
想了解更多請進入官方博客，最新博客和代碼在官方博客首發；請持續關注，還有更多cocos2dx editor遊戲源碼即將放出；
聯繫筆者：[email protected]（郵箱）qq羣：232361142
後言：
爲了鼓勵更多手遊愛好者加入cocos2d-x editor陣營，也爲了讀者堅定對該工具的信心，筆者基於以上的flappy bird代碼和新的圖片資源，往google play和中國應用市場發佈了一個相似的遊戲----騰飛的小鳥（fly bird）。該遊戲還加入了廣告模塊，可以獲得些許的廣告費。也希望讀者通過cocos2d-x editor可以在市場上發佈更多的好遊戲；
google play地址：https://play.google.com/store/apps/details?id=com.makeapp.game.flybird （小祕密：如果應用.apk後綴改爲.rar，你會獲得意想不到的東西）
豌豆莢市場地址：http://www.wandoujia.com/apps/com.makeapp.game.flybird
機鋒市場地址： http://apk.gfan.com/Product/App741996.html
html5在線演示：http://www.makeapp.co/flybird/ （微軟ie瀏覽器存在兼容性問題，請選擇其他瀏覽器；公司內網，小卡，見諒）