上一篇寫到搭建開發環境，這篇當然就是傳統的Hello World了。
首先在webstorm打開cocos2d-html5引擎目錄，選擇複制HelloHTML5World檔案夾，然後再粘貼到根目錄下，并且重新命名一下就可以了，如圖
這樣就是基本的項目，可以在此基礎上進行開發了，當然，你也可以複制裡面template檔案夾，因為這個檔案夾的中文意思就是“模闆”，然後重建立立新的項目，隻是這個模闆要複雜一些，涉及到HD以及跨手機平台的内容，如果僅僅隻是想在網頁上做個遊戲，我們開始複制的檔案夾就足矣了。
想看一下效果就運作一下index.html就可以了。需要補充的一點就是一些浏覽器可能運作不了，比如IE，谷歌的浏覽器，會被阻止，是以就用火狐，safari這些浏覽器吧，它們支援的很好，我就是重新安裝了火狐的。。。
下面簡單分析一下這些代碼：
index.html的代碼，學過html就不用多說了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cocos2d-html5 Hello World test</title> //标題
<link rel="icon" type="image/GIF" href="res/favicon.ico" target="_blank" rel="external nofollow" />
<meta name="viewport" content="width=800,user-scalable=no"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="x5-fullscreen" content="true"/>
<style>
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body style="padding:0; margin: 0; background: #000;">
<div style="text-align: center;">
<canvas id="gameCanvas" width="800" height="450"></canvas> //畫布的大小
</div>
</body>
</html>
<script src="cocos2d.js"></script>
main.js
var cocos2dApp = cc.Application.extend({
config:document['ccConfig'],
ctor:function (scene) {
this._super();
this.startScene = scene;
cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];
cc.initDebugSetting();
cc.setup(this.config['tag']);
cc.AppController.shareAppController().didFinishLaunchingWithOptions();
},
applicationDidFinishLaunching:function () {
if(cc.RenderDoesnotSupport()){
//show Information to user
alert("Browser doesn't support WebGL");
return false;
}
// 初始化導演類
var director = cc.Director.getInstance();
//下面兩行是打開Retian高清屏
// enable High Resource Mode(2x, such as iphone4) and maintains low resource on other devices.
//director.enableRetinaDisplay(true);
// 打開FPS
director.setDisplayStats(this.config['showFPS']);
// 設定FPS幀速
director.setAnimationInterval(1.0 / this.config['frameRate']);
//加載資源，即一開始會有個百分進度加載就在這裡使用的
cc.LoaderScene.preload(g_resources, function () {
director.replaceScene(new this.startScene());
}, this);
return true;
}
});
var myApp = new cocos2dApp(HelloWorldScene); //程式的主入口，遊戲畫面從這裡開始
其實這個和cocos2dx裡面那個委托cpp檔案内容很相似，就是設定一下基本的配置資訊。
cocos2d.js
關鍵的部分我就用漢字解釋了一下，其他不怎麼重要的就不解釋了。。。
(function () {
var d = document;
var c = {
COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
box2d:false,
chipmunk:false,
showFPS:true,
frameRate:60,
loadExtension:false,
renderMode:0, //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
tag:'gameCanvas', //the dom element to run cocos2d on
engineDir:'../cocos2d/',
//SingleEngineFile:'',
appFiles:[
'src/resource.js',
'src/myApp.js'//如果自己建立的js檔案需要在這裡進行注冊添加
]
};
if(!d.createElement('canvas').getContext){
var s = d.createElement('div');
s.innerHTML = '<h2>Your browser does not support HTML5 canvas!</h2>' +
'<p>Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier.Click the logo to download.</p>' +
'<a href="http://www.google.com/chrome" target="_blank" rel="external nofollow" target="_blank"><img src="http://www.google.com/intl/zh-CN/chrome/assets/common/images/chrome_logo_2x.png" /></a>';
var p = d.getElementById(c.tag).parentNode;
p.style.background = 'none';
p.style.border = 'none';
p.insertBefore(s);
d.body.style.background = '#ffffff';
return;
}
window.addEventListener('DOMContentLoaded', function () {
//first load engine file if specified
var s = d.createElement('script');
/*********Delete this section if you have packed all files into one*******/
if (c.SingleEngineFile && !c.engineDir) {
s.src = c.SingleEngineFile;
}
else if (c.engineDir && !c.SingleEngineFile) {
s.src = c.engineDir + 'platform/jsloader.js';
}
else {
alert('You must specify either the single engine file OR the engine directory in "cocos2d.js"');
}
/*********Delete this section if you have packed all files into one*******/
//s.src = 'Packed_Release_File.js'; //IMPORTANT: Un-comment this line if you have packed all files into one
document.ccConfig = c;
s.id = 'cocos2d-html5';
d.body.appendChild(s);
//else if single file specified, load singlefile
});
})();
resource.js
在開始進行加載資源的時候，最好把用到的所有圖檔聲音瓦片地圖等等資源檔案都寫到這裡面去，這樣在遊戲運作過程中就不會出現頁面加載資源卡頓的現象了。
每添加一個資源，都還需要在數組中也添加一下
var s_HelloWorld = "res/HelloWorld.png";
var s_CloseNormal = "res/CloseNormal.png";
var s_CloseSelected = "res/CloseSelected.png";
var g_resources = [
//image
{src:s_HelloWorld},
{src:s_CloseNormal},
{src:s_CloseSelected}
//plist
//fnt
//tmx
//bgm
//effect
];
好了，基本的主要檔案就這些了，後面我們就要開始真槍實戰進行開發了，歡迎繼續關注~
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)