引擎知识点: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();//停止所有动作

复制代码

更多用法参考官方测试例--------------------------------------------------------------------------------------------------------------一、描绘熊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);

代码如下图:

PHP?mod=attachment&aid=MjUwfDE4ZjhmOGZmfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">刷新浏览器效果如下:

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为每帧都调用

PHP?mod=attachment&aid=MjUyfDM4NjFhYTVlfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">3、Bear中的update更新自己定义速度velocity等于cc.p(150,150);

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

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中,每帧都做判断

PHP?mod=attachment&aid=MjU1fDgzNTc3MTllfDE0MTkwNjg4MzN8MTU0NDN8NDUxNA%3D%3D&noupdate=yes">刷新浏览器查看效果,熊旋碰到边界能够反弹回来了

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

儿童学画画html5小游戏,cocos2d-html5游戏学习之绘画小熊相关推荐

  1. html5游戏 美术,cocos2d-html5游戏学习之绘画小熊

    引擎知识点:Action(动作).cc.RotateBy(旋转).cc.RepeatForever(动作循环)用法:var sprite = cc.Sprite.create("a.png& ...

  2. HTML5小游戏《智力大拼图》发布,挑战你的思维风暴

    一,前言 本游戏是鄙人研究lufylegend数日之后,闲暇之余写下的.本游戏运用全新的技术HTML5写成的.游戏引擎为国产的lufylegend.js,大家可以去它的官网看看.游戏处于测试阶段,希望 ...

  3. 分享21个丰富多彩的 HTML5 小游戏

    作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性.HTML5 的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动设备上使用 HTML5 技术.随着 HTML5 跨平台支持 ...

  4. 什么软件有html5游戏,多款好玩HTML5小游戏带你认识HTML5优势

    HTML5 是什么东西?而 HTML5 的优势又在哪里?大家可以回顾之前一篇相关文章了解下 HTML5 知识:<深入分析:Flash VS HTML5到底谁统江山>.现在介绍多款 HTML ...

  5. 微信html5小游戏源码70种

    2019独角兽企业重金招聘Python工程师标准>>> 微信html5小游戏源码70种 http://download.csdn.net/detail/csdddn/9419955游 ...

  6. 揭秘HTML5小游戏排名,究竟哪些游戏最受欢迎?

    大家好!小编豆豆又回来啦,在之前的评测专辑中为大家介绍过本年度最受期待游戏排名,快随着我一起去TOM游戏平台,看看究竟哪些HTML5小游戏最受欢迎吧!揭秘HTML5小游戏排名TOP 5,也许你喜欢的微 ...

  7. 开发 HTML5 小游戏

    Html5小游戏 在介绍小游戏之前,先看一个框架 Phaser. Phaser 框架是一个 快速.免费且开源的 HTML5 游戏开发框架,它提供了 Canvas 和 WebGL 两种渲染方式,兼容 P ...

  8. 贪吃蛇html网页小游戏,网页贪吃蛇HTML5小游戏制作

    贪吃蛇是以前我们经常在手机里玩的一个小游戏,现在要是把它搬到网页上也会让人更回味.这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏.在游戏中你可以使用键盘的上下左右来控制蛇的运动方向.现在要列出的是 ...

  9. 初识html5小游戏

    本次Html5小游戏使用createjs来开发.基本涵盖这个游戏的全部核心代码. 如下是主要用到的元素: createjs.SpriteSheet 创建雪碧图,将生成好的雪碧图读取出来 createj ...

最新文章

  1. docker安装wget_Docker: docker pull, wget, curl, git clone 等如何更快?
  2. 请编写一个 C 函数,该函数给出一个字节中8二进制数中为1的个数
  3. JSESSIONID的简单说明
  4. 实现DDD领域驱动设计: Part 1
  5. 服务器的响应一直一直发送不过去,zeroRPC:在发送响应后继续运行进程
  6. android动态壁纸提取,[图]大神已提取出一加8T的动态壁纸:Android 8.0+设备均可使用...
  7. gRPC入门教程汇总
  8. 吴恩达机器学习 神经网络 作业1(用已经求好的权重进行手写数字分类) Python实现 代码详细解释
  9. 居中的最佳方法 div 在垂直和水平页面上? [重复]
  10. Markdown文档书写方法(工具+示例+验证)
  11. 明日复明日,明日何其多;我生待明日,万事成蹉跎
  12. 在c 语言里如何制作滑动图片大小,[教程]教你在微信小程序中实现手势缩放图片...
  13. 贸易融资名词解析:出口押汇与进口押汇
  14. 咋样回复计算机桌面删除的东西,电脑桌面上的便签怎么删除及桌面便签删除后还能恢复吗...
  15. 坎坎坷坷,跌跌撞撞,我的2019年度总结
  16. 图形编辑器——Graph Editor(树图必备)
  17. 驱动认知 驱动的编写
  18. linux环境配置git认证
  19. 护卫神主机大师被提权漏洞利用(可千万不能乱装护卫神主机管理一键安装的软件)
  20. PP-LCNet-YoloV5

热门文章

  1. 计算机的行业优势在哪里?
  2. 30 字体分类 1 字体的分类
  3. 【Android 逆向】Frida 框架 ( Frida 2 种运行模式 | Frida 12.7.5 版本相关工具下载地址 | 在 Android 模拟器上运行 Frida 远程服务程序 )
  4. 如何定义研发 KPI:以团队速度为标准
  5. 计算机知识的表格,【计算机知识】Excel表格公式大全
  6. 英镑大写_您也可以为10英镑建立一个出色的网站...
  7. 中考理化生实验操作考试平台
  8. 网页图片或者tr中间有白线
  9. 新里程,新风向!纽莱伊美出席第五届中国化妆品国际高峰论坛,与行业大咖畅享护肤新体验
  10. 企业纷纷盯上“成套智慧家电”,这会是一片新蓝海吗?