前言：
我們分析了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跨平台遊戲引擎
cocos2d-x是全球知名的遊戲引擎 ，引擎在全球範圍内擁有衆多開發者，涵蓋國内外各知名遊戲開發商。目前Cocos2d-x引擎已經實作橫跨ios、Android、Bada、MeeGo、BlackBerry、Marmalade、Windows、Linux等平台。編寫一次，到處運作，分為兩個版本 cocos2d-c++和cocos2d-html5 本文使用了後者； cocos2d-x 官網： http://cocos2d-x.org/ cocos2d-x 資料下載下傳 http://cocos2d-x.org/download
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在左側工程結構裡面隐藏了，讀者通過代碼所在的源目錄找尋到；
如何部署到伺服器
1 找到Published目錄下的boot-html5.js 把裡面的cocos2d-html5.min.js 改成Cocos2d-html5.min.js 必須大小寫統一； 2 然後打開index.html,修改在浏覽器顯示的寬高 <canvas id="gameCanvas" width="360" height="640"></canvas>
移植到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"}
];
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遊戲源代碼揭秘和下載下傳
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浏覽器存在相容性問題，請選擇其他浏覽器；公司内網，小卡，見諒）