cocos2d-html5游戏学习之绘画小熊

大佬教程收集整理的这篇文章主要介绍了cocos2d-html5游戏学习之绘画小熊，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

引擎知识点：

Action（动作）、cc.RotateBy（旋转）、cc.RepeatForever(动作循环)
用法：

1. var sprite = cc.Sprite.create("a.png");
   

2. var rotate = cc.RotateBy.create(1,90);参数1：动作时间参数2：旋转的角度
   

3. 
   

4. sprite.runAction(rotatE);//sprite在1秒内旋转90度
   

5. sprite.runAction(cc.RepeatForever(rotatE));//sprite不断的旋转
   

6. sprite.stopAllActions();//停止所有动作

复制代码

更多用法参考官方测试例
--------------------------------------------------------------------------------------------------------------
一、描绘熊
1、在src目录中新建BearSprite.js，并把路径加入到cocos2d.js文件中的appFiles数组中
2、定义BearSprite

1. var BearSprite = cc.Sprite.extend({
   

2. /**
   

3. *构造函数
   

4. **/
   

5. 
   

6. ctor:function(){
   

7. this._super();
   

8. }
   

9. });

3、Sprite默认没有图片，我们需要赋予一个图片

1. var BearSprite = cc.Sprite.extend({
   

2. ctor:function(){
   

3. this._super();
   

4. this.initWithFile(s_bear_eyesopen);//赋予图片元素
   

5. }
   

6. });

4、把BearSprite添加到游戏场景中

1. //添加蘑菇
   

2. this.bear = new BearSprite();
   

3. this.bear.setPosition(cc.p(240,60))
   

4. this.gameLayer.addChild(this.bear.,g_GameZOder.ui);

代码如下图：

s.width=650;" id="aimg_250" src="http://img.voidcn.com/vcimg/static/loading.png" class="zoom" width="468" data-src="http://bbs.html5china.com/forum.php?mod=attachment&aid=MjUwfDE4ZjhmOGZmfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

刷新浏览器效果如下：

s.width=650;" id="aimg_251" src="http://img.voidcn.com/vcimg/static/loading.png" class="zoom" width="477" data-src="http://bbs.html5china.com/forum.php?mod=attachment&aid=MjUxfGQyYzRhZGQwfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

二、让熊旋转起来~
1、BearSprite中定义一个beginRotate方法，用来开始旋转

1. beginRotate:function(){
   

2. var rotate = cc.RotateBy.create(2,360); //旋转角度，第1个参数：时间，第2个参数：在这个时间内旋转的角度
   

3. var rep1 = cc.RepeatForever.create(rotatE); //循环旋转
   

4. this.runAction(rep1);//执行
   

5. },

2、BearSprite中定义一个方法stopRotate，用来停止旋转的

1. stopRotate:function(){
   

2. this.stopAllActions();
   

3. }

3、在GameScene中调用beginRotate()即可旋转起来
this.bear.beginRotate(); //开始旋转
刷新浏览器查看效果，熊旋转起来了。
三、让熊移动起来~
1、在GameSence和Bear中添加update方法作为每帧的循环
定义GameSence中的update作为主控制

1. update: function (dt) {
   

2. //dt为每帧所消耗的时间，单位为秒
   

3. }

2、在GameSence中的onEnter加入schedule来启动主update，如下
this.schedule(this.update,0);//参数1：执行函数，参数2：调用间隔时间，0为每帧都调用

s.width=650;" id="aimg_252" src="http://img.voidcn.com/vcimg/static/loading.png" class="zoom" width="482" data-src="http://bbs.html5china.com/forum.php?mod=attachment&aid=MjUyfDM4NjFhYTVlfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

3、Bear中的update更新自己
定义速度velocity等于cc.p(150,150);

s.width=650;" id="aimg_253" src="http://img.voidcn.com/vcimg/static/loading.png" class="zoom" width="433" data-src="http://bbs.html5china.com/forum.php?mod=attachment&aid=MjUzfGQ1NjY5N2ExfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

定义update更新Bear位置等状态

1. update: function (dt) {
   

2. //移动位置
   

3. 
   

4. this.setPosition(cc.pAdd(this.getPosition(),cc.pMult(this.velocity,dt)));
   

5. }

this.velocity为移动的速度
在GameSence中的update加入bear的update

1. update: function (dt) {
   

2. //dt为每帧所消耗的时间，单位为秒
   

3. this.bear.update(dt);
   

4. }

一般来说有不断位移的话，速度最好乘以dt，这样看起来会流畅
以上通过update的循环可以使熊移动起来
刷新浏览器查看效果，熊旋移动起来了。
四、边界碰撞检测
1、BearSprite中定义半径radius来检测碰撞，赋值为25

s.width=650;" id="aimg_254" src="http://img.voidcn.com/vcimg/static/loading.png" class="zoom" width="303" data-src="http://bbs.html5china.com/forum.php?mod=attachment&aid=MjU0fDU2YTlmMzk3fDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

2、BearSprite中定义方法checkHitEdge来做边界碰撞检测
代码如下：

1. //检查边界碰撞
   

2. checkHitEdge: function () {
   

3. var pos = this.getPosition();
   

4. var winSize = cc.Director.geTinstance().getWinSize();
   

5. //熊碰到右边边界
   

6. if (pos.x > winSize.width - this.radius) {
   

7. //假如向右移动
   

8. this.velocity.x *= -1;//改变水平速度方向
   

9. 
   

10. }
    

11. //熊碰到左边边界
    

12. if (pos.x < this.radius) {
    

13. this.velocity.x *= -1;//改变水平速度方向
    

14. }
    

15. //熊碰到下面边界
    

16. if (pos.y <= this.radius) {
    

17. //减少1生命
    

18. this.cursence.reduceLives();
    

19. }
    

20. //熊碰到上边边界
    

21. if (pos.y >= winSize.height - this.radius) {
    

22. this.velocity.y *= -1;
    

23. }
    

24. },255);">3、把检测函数checkHitEdge加入到update中，每帧都做判断
    

    s.width=650;" id="aimg_255" src="http://img.voidcn.com/vcimg/static/loading.png" class="zoom" width="580" data-src="http://bbs.html5china.com/forum.php?mod=attachment&aid=MjU1fDgzNTc3MTllfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

    刷新浏览器查看效果，熊旋碰到边界能够反弹回来了

    大佬总结

    以上是大佬教程为你收集整理的cocos2d-html5游戏学习之绘画小熊全部内容，希望文章能够帮你解决cocos2d-html5游戏学习之绘画小熊所遇到的程序开发问题。

    如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。