您的位置：首页 > 移动开发 > Cocos引擎

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

2016-01-04 17:28 633 查看

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

也许很多人和我一样是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就是我们需要创建的窗口大小，工程创建好了就运行下吧。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航