真的是有一段時間沒寫博了，這段時間呢，發生的事情真的挺多，另外自己呢也閑來做了一些自己的喜歡的東西，主要做的還是基於Mac系統的Cocoa框架的各種編輯器吧。（對了，今年初也出了自己第二本書《iOS遊戲編程之從零開始—Cocos2d-x與cocos2d引擎遊戲開發》）

百牛信息技術bainiu.ltd整理發布於博客園

廢話少扯，最近又研究了下Cocos2d-HTML5相關引擎，其實說起HTML5，3、4年前Himi就接觸過了，那時候的HTML5 Canvas 對我印象很深，但是不論當時還是現在對於HTML5絕大部分公司仍舊處於觀望狀態，我也不例外，無疑觀望期間也不斷的有引擎基於HTML5，例當前的Cocos2d-HTML5,還有以後基於Untiy3D的HTML5，這早晚的事情。總體來說，HTML5是個趨勢，只是個時間的問題。

那麽本篇呢，簡單的敘述下Cocos2d-HTML5新創建一個項目過程以及與cocos2d/x之間的關系。

第一步：首先下載Cocos2d-html5的引擎，下載地址：http://cocos2d-x.googlecode.com/files/Cocos2d-html5-v2.1.5.zip

當前Himi下載的是最新的2.1.5 version.

第二步：解壓引擎包，然後目錄如下：

第三步：簡單以 HelloHTML5World 項目為例，我們可以直接使用瀏覽器打開HelloHTML5World文件夾中的 index.html，即可運行此示例項目。

運行到瀏覽器中的效果如下:

運行效果如上，其實這是個錯誤效果圖，先不要著急。（原因只是資源準備失敗的原因，後續說明）

我們先不管這個問題，先看下整個的項目結構：(Himi使用的 TextMate 打開的)

簡單敘述：

1. res 資源存放目錄

2. src js腳本存放目錄(我們自己的項目源碼目錄)

3. build.xml : 對cocos2d引擎進行編譯成js腳本形式所用文件

4. cocos2d.js: 對cocos2d引擎進行參數設置的配置文件

5. index.html: 對當前視圖的配置文件

6. main.js : 主程序入口

那麽很多讀者疑惑如何下手？

其實很簡單，大家可以理解，cocos2d-html5 引擎只是將cocos2d 引擎框架直接映射成應html5 api實現的過程，我們通過js語言書寫cocos2d引擎代碼的形式，完成cocos2d引擎形式代碼掌管整個HTML5項目。大家直接按照寫cocos2d/x的代碼形式進行書寫即可，但是語言要求js格式。

那麽如何創建一個新的HTML5項目:

第一步：將cocos2d-html5 引擎目錄下的HelloHTML5World 文件夾直接copy一份出來，然後文件名可自定義。

第二步：將引擎目錄下的lib文件夾下的 Cocos2d-html5-v2.1.5.min.js 文件copy 到你第一步的項目文件夾下即可。

Cocos2d-html5-v2.1.5.min.js 文件的作用:將cocos2d引擎以HTML5 api形式映射的js庫，供我們項目使用，如果你不copy這個項目到你的項目中，你無法運行。

大家疑惑為什麽引擎下的 HelloHTML5World 項目下為什麽不需要 ？ 其實這個示例項目采用的是相對引擎目錄路徑下的每個引擎類映射js來使用。如下圖：

而這個Cocos2d-html5-v2.1.5.min.js 文件為什麽有個min? 這個其實就是以前的Cocos2d-html5-v2.1.5.jsb.js ，簡單理解就是將js代碼進行一個壓縮，將代碼中的table 空格等都去除，節省其文件大小的一種形式。

第三步：直接使用瀏覽器運行項目下的index.html 即可。

當然這時候運行的效果如 HelloHTML5World 項目運行效果相同，此原因主要是由於資源加載收到瀏覽器限制，因此導致項目無法正常啟動。

這個問題其實是瀏覽器防止被釣魚、對AJAX的一種防護，而cocos2d-html5 引擎請求圖片的方式則采用的就是AJAX.

因此我們解決此問題可以有兩種方式：

1. 本地安裝web服務器， apache 等，將項目發布在web服務器上即可。

2. 直接使用火狐瀏覽器進行調試，火狐瀏覽器是沒有限制的。

如下是火狐瀏覽器運行的結果：

ok，一切正常，剩余的就交給大家了。

【Cocos2d-HTML5 開發之一】新建HTML5項目及簡單闡述與cocos2d/x引擎關系