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

概述引擎知识点： Action（动作）、cc.RotateBy（旋转）、cc.RepeatForever(动作循环) 用法： var sprite = cc.Sprite.create("a.png"); var rotate = cc.RotateBy.create(1,90);参数1：动作时间  参数2：旋转的角度 sprite.runAction(rotate);//sprite在1秒内旋转90

引擎知识点：

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

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

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

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

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

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

@R_403_6758@

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

var BearSprite = cc.Sprite.extend({

/**

*构造函数

**/

ctor:function(){

this._super();

}

});

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

var BearSprite = cc.Sprite.extend({

ctor:function(){

this._super();

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

}

});

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

//添加蘑菇

this.bear = new BearSprite();

this.bear.setposition(cc.p(240,60))

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

代码如下图：

650) this.wIDth=650;" ID="aimg_250" src="http://img.jb51.cc/vcimg/static/loading.png" wIDth="468" alt="5-1.jpeg" title="5-1.jpeg" src="http://bbs.HTML5china.com/forum.PHP?mod=attachment&aID=MjuwfDE4ZjhmogZmfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

刷新浏览器效果如下：

650) this.wIDth=650;" ID="aimg_251" src="http://img.jb51.cc/vcimg/static/loading.png" wIDth="477" alt="5-2.jpeg" title="5-2.jpeg" src="http://bbs.HTML5china.com/forum.PHP?mod=attachment&aID=MjUxfGQyYzRhZGQwfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

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

beginRotate:function(){

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

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

this.runAction(rep1);//执行

},

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

stopRotate:function(){

this.stopAllActions();

}

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

update: function (dt) {

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

}

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

650) this.wIDth=650;" ID="aimg_252" src="http://img.jb51.cc/vcimg/static/loading.png" wIDth="482" alt="5-3.jpeg" title="5-3.jpeg" src="http://bbs.HTML5china.com/forum.PHP?mod=attachment&aID=MjUyfDM4NjFhYTVlfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

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

650) this.wIDth=650;" ID="aimg_253" src="http://img.jb51.cc/vcimg/static/loading.png" wIDth="433" alt="5-4.jpeg" title="5-4.jpeg" src="http://bbs.HTML5china.com/forum.PHP?mod=attachment&aID=MjUzfGQ1NjY5N2ExfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

定义update更新Bear位置等状态

update: function (dt) {

//移动位置

this.setposition(cc.pAdd(this.getposition(),cc.pMult(this.veLocity,dt)));

}

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

update: function (dt) {

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

this.bear.update(dt);

}

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

650) this.wIDth=650;" ID="aimg_254" src="http://img.jb51.cc/vcimg/static/loading.png" wIDth="303" alt="5-5.png" title="5-5.png" src="http://bbs.HTML5china.com/forum.PHP?mod=attachment&aID=MjU0fDU2YTlmMzk3fDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

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

//检查边界碰撞

checkHitEdge: function () {

var pos = this.getposition();

var winSize = cc.Director.getInstance().getWinSize();

//熊碰到右边边界

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

//假如向右移动

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

}

//熊碰到左边边界

if (pos.x < this.radius) {

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

}

//熊碰到下面边界

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

//减少1生命

this.curSence.reducelives();

}

//熊碰到上边边界

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

this.veLocity.y *= -1;

}

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

650) this.wIDth=650;" ID="aimg_255" src="http://img.jb51.cc/vcimg/static/loading.png" wIDth="580" alt="5-6.jpeg" title="5-6.jpeg" src="http://bbs.HTML5china.com/forum.PHP?mod=attachment&aID=MjU1fDgzNTc3MTllfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">

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

总结

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

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