cocos2d-js入門課程（一）下載與配置
阿新 • • 發佈：2018-12-27
最近在學習cocos2d－js，對比於cocos2d－x，js的版本更加輕巧，編譯速度快，也比較方便釋出。
我也是在自學，由於官方的文件非常少，而市面的書版本都比較低。所以把個人學習的經驗分享一下。
1.下載cocos2d-js。
http://cocos2d-x.org/filecenter/jsbuilder/
下載地址，包括一個lite精簡版，包括了cocos的主要特色。還有一個完整版，適合專業人士使用。這裡我使用的是lite版本。
下載之後，我們可以看到一個HelloWorld的一張圖片，一個js的遊戲引擎庫，還有一個HelloWorld.html的例項檔案，json檔案，build.xml。其他檔案都是我自己建的。
引擎庫的程式碼我們就先不看，先看看HelloWorld.html的程式碼。
<!DOCTYPE html> <html> <head> <title>Hello Cocos2d-JS</title> </head> <body> <canvas id="gameCanvas" width="800" height="450"></canvas> <script type="text/javascript" src="cocos2d-js-v3.12-lite.js" charset="UTF-8"></script> <script type="text/javascript"> window.onload = function(){ cc.game.onStart = function(){ //load resources cc.LoaderScene.preload(["HelloWorld.png"], function () { var MyScene = cc.Scene.extend({ onEnter:function () { this._super(); var size = cc.director.getWinSize(); var sprite = cc.Sprite.create("HelloWorld.png"); sprite.setPosition(size.width / 2, size.height / 2); sprite.setScale(0.8); this.addChild(sprite, 0); var label = cc.LabelTTF.create("Hello World", "Arial", 40); label.setPosition(size.width / 2, size.height / 2); this.addChild(label, 1); } }); cc.director.runScene(new MyScene()); }, this); }; cc.game.run("gameCanvas"); }; </script> </body> </html>
<canvas id="gameCanvas" width="800" height="450"></canvas>還有下面有一些js的程式碼，這裡就是我們遊戲的主要程式碼。當然這是一個例項檔案，我們如果使用js，還是需要額外建立一些js檔案，然後引入進來。
IDE推薦：
js的編輯工具有很多，比如notepad＋＋，sublime text，但是我推薦webstorm，程式碼提示比較全，由於我PHP寫的比較多，所以使用的是PHPStorm，兩款軟體一家公司出的，介面比較像，我就不多比較多了。
開啟helloworld的html檔案，如果你發現時黑屏的，說明是用瀏覽器直接開啟的，這樣會出錯，這就需要我們本地搭建一個伺服器。
我寫php的，所以本地伺服器是Wamp的整合環境，或者你可以使用python來執行一個小的web伺服器。
如果你顯示出來這張圖片，就說明環境沒有問題。
