COCOS-HTML5-3.9版本学习（一）HTML5的COCOS环境

最新推荐文章于 2023-09-22 15:06:54 发布

聪明的一休丶

最新推荐文章于 2023-09-22 15:06:54 发布

阅读量812

点赞数 2

分类专栏： cocos-html5 文章标签：游戏

本文链接：https://blog.csdn.net/qq_20389175/article/details/50457092

版权

cocos-html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先我们先来说下开发环境吧：

    也许很多人和我一样是web前端开发，一看官网那个COCOS-JS那个包300多M就崩溃了。其实当人认真研究官方文档和别人写的教程你会发现其实cocos也可以和jquery一样作为第三方引入。

第一步：

      我们去下载JS。

地址：http://cocos2d-x.org/filecenter/jsbuilder

网站是英文的，不过没关系，里面有两个版本；

lite version 缩减版；

full version 完整版；

第二步：

都是几百KB，和jquery擦不多大；下载下来以后解压缩就可以看到完整的项目事例。

开发工具这个看个人爱好吧能写JS就可以;

我用的HBuilder，

这就是我创建的工程，在JS文件夹下引入cocos2d-js-v3.9.js 这个文件官方下载的示例中有，复制过来。

最好index.html也复制过来，

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
    <title>Hello Cocos2d-JS</title> 
    <script type="text/javascript" src="cocos2d-js-v3.9-lite.js" charset="UTF-8"></script>
</head>
<body>   
    <canvas id="gameCanvas" width="800" height="450"></canvas>
    <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>

width，height就是我们需要创建的窗口大小，工程创建好了就运行下吧。

聪明的一休丶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
COCOS-HTML5-3.9版本学习（一）HTML5的COCOS环境

首先我们先来说下开发环境吧：也许很多人和我一样是web前端开发，一看官网那个COCOS-JS那个包300多M就崩溃了。其实当人认真研究官方文档和别人写的教程你会发现其实cocos也可以和jquery一样作为第三方引入。第一步：我们去下载JS。地址：http://cocos2d-x.org/filecenter/jsbuilder
复制链接

扫一扫