一、写在前面的话

最近在学习cocos2d-html5方面的知识,一直想从事游戏方面的工作,自己也找了好多资料。网上关于cocos2d-html5的教程真的不多,也只有自己摸索,慢慢看示例代码。由于本人没有mac,所以呢就用不了cocosbuild来制作动画相关的啦,不过今天又发现一个东西就是可以采用虚拟机来转mac系统,呵呵,明天继续试试。如果你也在学习或从事cocos2d-html5方面东西,希望大家都相互交流,共同进步啊。

二、橡皮筋制作

这部分的主要内容是制作橡皮筋,石头放在弹弓上,用手拉弹弓,让石头弹出去。

需要准备的资源有弹弓、石头、背景

最终效果图:

三、详细分解

1、制作背景(制作背景的代码过于简单,没什么多说的就直接上代码了)

  1. //背景
  2. var BackSprite = cc.Sprite.extend({
  3. ctor:function(){
  4. this._super();
  5. this.initWithFile(s_bg);
  6. this.setAnchorPoint(cc.p(0,0));
  7. this.setPosition(cc.p(0,0));
  8. }
  9. });

2、制作石头,这步比较复杂也是核心的一部分

1)首先必须把石头加载到场景中,位置设置在弹弓之间

2)事件的捕捉,当触发Touch事件的时候,判断当前位置是否在石头的矩形范围之类,当事件移动的时候,获取当前事件的

位置,并且设置石头的位置,此时有个核心的东西就是用画笔画出橡皮筋,从石头到弹弓两端点之间。

3)当事件END的时候,石头必须弹出去,给石头一个方向向量,计算石头当前位置和弹弓顶端中间点的角度。从而让石头射出去。

源代码:

  1. //石头
  2. var StoneSprite = cc.Sprite.extend({
  3. mainLayer:null,
  4. _isPullEnd:false,
  5. _isPulling:false,
  6. _velocity:null,
  7. _stonePoint:null,
  8. ctor:function(){
  9. this._super();
  10.  
  11. //初始化
  12. this.initWithFile(s_stone);
  13.  
  14. //设置事件
  15. cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,0,true);
  16.  
  17. //初始向量
  18. this._velocity = cc.p(800,800);
  19.  
  20. this.scheduleUpdate();
  21. },
  22. onTouchBegan:function(touch,event){
  23. if(!this.containsTouchLocation(touch)){
  24. this.mainLayer.reset();
  25. this._isPulling = false;
  26. this._isPullEnd = false;
  27.  
  28. return false;
  29. }
  30. this._isPulling = true;
  31. this._isPullEnd = false;
  32. return true;
  33. },
  34. onTouchMoved:function(touch, event){
  35. var touchPoint = touch.getLocation();
  36. this.setPosition(touchPoint);
  37. this.mainLayer.drawLine();
  38. },
  39. onTouchEnded:function(){
  40. this._isPullEnd = true;
  41.  
  42. var hitAngle = cc.pToAngle(cc.pSub(cc.p(this.mainLayer._slingshot.getPositionX(),
  43. FLOOR_HEIGHT+this.mainLayer._slingshot.getPositionY()),this.getPosition()));
  44. var scalarVelocity = cc.pLength(this._velocity);
  45. this._velocity = cc.pMult(cc.pForAngle(hitAngle),scalarVelocity);
  46.  
  47. this.mainLayer.clearDrawLine();
  48. },
  49. containsTouchLocation:function(touch){
  50. //获取触摸点的位置
  51. var touchPoint = touch.getLocation();
  52.  
  53. //获取当前对象的宽度
  54. var contentSize = this.getContentSize();
  55.  
  56. //定义拖拽的区域
  57. var myRect = cc.rect(0,0,contentSize.width,contentSize.height);
  58. myRect.origin.x += this.getPosition().x - this.getContentSize().width/2;
  59. myRect.origin.y += this.getPosition().y - this.getContentSize().height/2;
  60.  
  61. return cc.rectContainsPoint(myRect,touchPoint);
  62. },
  63. update:function(dt){
  64. if(this._isPullEnd&&this._isPulling){
  65. this.setPosition(cc.pAdd(this.getPosition(),cc.pMult(this._velocity,dt)));
  66. this.check();
  67. }
  68. },
  69. check:function(){
  70. //判断是否飞出了整个区域以外,如果是则重设石头
  71. var size = cc.Director.getInstance().getWinSize();
  72. if(this.getPositionX()>(size.width+20)||
  73. this.getPositionX()<-20||this.getPositionY()>(size.height+20)
  74. ||this.getPositionY()<-20){
  75. this.setPosition(this.mainLayer._stonePoint);
  76. this._isPullEnd = false;
  77. this._isPulling = false;
  78. }
  79. }
  80. });

最后:可能做得不是很好,但后面会慢慢完善,也会发到网上供大家参考,源码下载地址:
下载

coco2d-html5制作弹弓射鸟第一部分---橡皮筋的更多相关文章

  1. 程序员用HTML5制作的爱心树表白动画

    体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: & ...

  2. 使用HTML5制作loading图

    昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...

  3. 使用HTML5制作时钟

    之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE h ...

  4. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

      前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...

  5. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)

    出处:http://www.cnblogs.com/jerehedu/p/7832808.html  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...

  6. html5制作一个时钟

    试着用html5写一个时钟 记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------- ...

  7. jquery+html5制作超酷的圆盘时钟表

    自己封装的一个用HTML5+jQuery写的时钟表 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...

  8. 【HTML5校企公益课】第一天

    1.搭建基本的开发环境.学校电脑用的是浏览器是Chrome,编辑器是HBuilder. 2.初步介绍HTML5的Web项目基本结构. css:样式表 img:存放图片 js:存放脚本文件 .html: ...

  9. 基于html5制作3D拳击游戏源码下载

    今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览 ...

随机推荐

  1. csms发布步骤

    1.wcf发布 通过点击 CSMS2.Application,右键发布按钮,将文件拷贝 2.打包文件 CSMS2.Resources 中 update.config 修改为对应 ServerUrl地址 ...

  2. java代码实现 金字塔(倒置)

    在jsp中实现如图所示的金字塔,,代码如下: 大致思路如下: 1.先画出前5行.因为 i+空格数=总行数,所以第一行的空格数是 总行数-i(第几行),然后画出 *,*的数目=2*i-11: 2.在画出 ...

  3. java之NIO编程

    所谓行文如编程,随笔好比java文件,文章好比类,参考文献是import,那么目录就是方法定义. 本篇文章处在分析thrift的nonblocking server之前,因为后者要依赖该篇文章的知识. ...

  4. SQL中对日期进行模糊查询的方法

    在我们通过SQL语句对数据库中的数据进行查询时,难免会遇到针对datetime的查询,但是因为一般情况下,输入的时间条件为年月日,所以,这种情况下,我们就要进行一下模糊查询,首先,摒弃一种投机取巧的方 ...

  5. 最完美的匹配网页中图片 src 部分的正则表达式

    $str='<p style="padding: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 200%;"& ...

  6. PHP中检测ajax请求的代码例子

    多数情况下,基于JavaScript 的Js框架如jquery.Mootools.Prototype等,在发出Ajax请求指令时,都会发送额外的 HTTP_X_REQUESTED_WITH 头部信息, ...

  7. php实现获取汉字的首字母实例

    //取汉字的asc区间然后返回汉字首字母了,代码如下:header("Content-type: text/html; charset=utf-8"); function getf ...

  8. express4.x中的链式路由句柄

    var express = require("express"); var router = express(); router.get('/', function (req, r ...

  9. 后台返回data直接在页面转换

    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <fmt: ...

  10. RSA 加密

    iOS开发教程-iOS中的RSA加解密 在移动应用开发中常常遇到数据传输安全性的问题,尤其是在账户安全以及支付场景中的订单数据.或支付信息的传输中,正规的公司一定会要求对数据进行加密,当然有创业初期的 ...