cocos2d-js入门课程（一）下载与配置

来源：互联网发布：笔记本的网络插口坏了编辑：程序博客网时间：2024/06/05 17:03

最近在学习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的代码。

[html] view plain copy
<!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>  

[html] view plain copy
<canvas id="gameCanvas" width="800" height="450"></canvas>  

这里添加了一个html5的canvas元素，指定了一个id和它的宽800和高450。

还有下面有一些js的代码，这里就是我们游戏的主要代码。当然这是一个实例文件，我们如果使用js，还是需要额外创建一些js文件，然后引入进来。

IDE推荐：

js的编辑工具有很多，比如notepad＋＋，sublime text，但是我推荐webstorm，代码提示比较全，由于我PHP写的比较多，所以使用的是PHPStorm，两款软件一家公司出的，界面比较像，我就不多比较多了。

打开helloworld的html文件，如果你发现时黑屏的，说明是用浏览器直接打开的，这样会出错，这就需要我们本地搭建一个服务器。

我写php的，所以本地服务器是Wamp的集成环境，或者你可以使用python来运行一个小的web服务器。

如果你显示出来这张图片，就说明环境没有问题。

转载链接：http://blog.csdn.net/wwlxz22/article/details/53306701

阅读全文

0 0