Cocos2d-HTML5入門第一天，cocos2d-html5入門

Cocos2d-HTML5入門第一天，cocos2d-html5入門

雖然是以H5的身份入職新東家，但是一直都沒有好好研究過canvas。頭兩天做了個下載app的頁面給後台，統計Android，IOS和別的os機型點擊和下載情況，然後第三天開始就為一個擦獎頁面做動態效果，途中各種需求不斷改，測試也反饋各種相容性。到現在入職也不過十來天，已經大概涉獵了幾本canvas相關的書籍，這期間對遊戲的興趣又重燃，曾幾何時，選修過遊戲開發，由於門檻太高，放棄了，而後成為了頁面仔。

由於canvas和遊戲的相關書籍比較多，這段時間空餘時間都在研究H5遊戲，lufylegend，easeljs，這兩個引擎研究相對多點，都是類A3的，之前的記錄都沒有寫下來，怕以後想翻翻記錄找不到了，有點後悔。今天接觸了Cocos2d-html5,一來覺得不能重蹈覆轍，二來這引擎和c++還是有嫡親關係的，姑且為彌補曾經的遺憾盡量去學習，故寫下此篇文章。

第一步：下載引擎

http://www.cocos2d-x.org/download 進入這個網站 coco2d-html5已經和coco2d-js整合了，直接點擊下載Coco2d-js v3.1版本，當然也可以選擇部分檔案，一直以來覺得作為新手標配就是整個包。 

解壓Coco2d-js v3.1引擎進入frameworks檔案夾，開啟cocos2d-html5檔案，裡面已經沒有HelloHTML5World目錄了，只有一個template，那麼就基於這個模板來學習吧！

第二步：提供伺服器支援

用Google瀏覽器開啟index.html,發現一片漆黑，F12後控制台出現三個錯誤

很明顯兩個跨域問題，這種問題要解決，給個伺服器支援，作為前端工程師，node和express應該是第一選擇，安裝這兩件東東不在討論範圍，所以直接開啟命令列，進入E:\gitwork\game;輸入命令

express  hellococohtml5 

帶項目建立成功進入hellococohtml5 目錄

開啟package.json

把依賴的 "jade": "*"換成"ejs": "*"  

然後進入app.js

把var ejs = require('ejs');加進去

app.set('view engine', 'jade'); 換成app.engine('.html', ejs.__express); app.set('view engine', 'html');

解釋一下：這裡使用ejs模板，然後讓ejs模板檔案，使用副檔名為html的檔案。

在DOS視窗的package.json所在目錄下 鍵入 npm install 下載express和ejs包檔案（鍵入要把注    //"jade": "*"釋的整行去掉 ，npm對json有嚴格的文法要求）

伺服器搭建完成

第三步： 把Cocos2d-HTML5部署到伺服器

把第一步的frameworks的檔案夾複製到伺服器根目錄下的public檔案夾

然後把檔案夾裡面template目錄下的index.html複製到伺服器下的view目錄

然後修改inde.html目錄引進的js路徑

現在的index和伺服器目錄結構看起來是這樣的

修改後，重新整理inde.html頁面，然後又有404

根據提示點擊瀏覽器報的錯，定位到CCBoot.js 引進project.js的路徑，在檔案裡面把CCBoot.js引進project.js目錄改成frameworks/cocos2d-html5/template/project.json 然後

進入project.js把engineDir和jsList路徑也改了，最後把template目錄下的main.js下引進的資源檔路徑也加上frameworks/cocos2d-html5/template/

So far so good 看起來是這樣的

突然發現改引用路徑好蛋疼，想不折騰就用webstorm或者部署個tomcat了，要不是因為上次這IED突然關閉，把我的1000多行代碼物理亂碼了，哥估計現在還沒有放棄webstorm，雖然比較重量，但是內建伺服器是個不錯的選擇。

第四步： Hello World

開啟瀏覽器 重新整理index.html頁面

Hello World 總算出來了 碎覺！

cocos2d-html5 教學

主要關注 canvas 這個標籤的 api！
祝你成功！
 
cocos2d-html5 chipmunk裡面有沒有函數判斷 滑鼠是否點擊到精靈

v7bjv7bjv7bjv7bjv7bjv7bjv7bjv7bj