coco2d-html5制作弹弓射鸟第一部分---橡皮筋
一、写在前面的话
最近在学习cocos2d-html5方面的知识,一直想从事游戏方面的工作,自己也找了好多资料。网上关于cocos2d-html5的教程真的不多,也只有自己摸索,慢慢看示例代码。由于本人没有mac,所以呢就用不了cocosbuild来制作动画相关的啦,不过今天又发现一个东西就是可以采用虚拟机来转mac系统,呵呵,明天继续试试。如果你也在学习或从事cocos2d-html5方面东西,希望大家都相互交流,共同进步啊。
二、橡皮筋制作
这部分的主要内容是制作橡皮筋,石头放在弹弓上,用手拉弹弓,让石头弹出去。
需要准备的资源有弹弓、石头、背景
最终效果图:
三、详细分解
1、制作背景(制作背景的代码过于简单,没什么多说的就直接上代码了)
- //背景
- var BackSprite = cc.Sprite.extend({
- ctor:function(){
- this._super();
- this.initWithFile(s_bg);
- this.setAnchorPoint(cc.p(0,0));
- this.setPosition(cc.p(0,0));
- }
- });
2、制作石头,这步比较复杂也是核心的一部分
1)首先必须把石头加载到场景中,位置设置在弹弓之间
2)事件的捕捉,当触发Touch事件的时候,判断当前位置是否在石头的矩形范围之类,当事件移动的时候,获取当前事件的
位置,并且设置石头的位置,此时有个核心的东西就是用画笔画出橡皮筋,从石头到弹弓两端点之间。
3)当事件END的时候,石头必须弹出去,给石头一个方向向量,计算石头当前位置和弹弓顶端中间点的角度。从而让石头射出去。
源代码:
- //石头
- var StoneSprite = cc.Sprite.extend({
- mainLayer:null,
- _isPullEnd:false,
- _isPulling:false,
- _velocity:null,
- _stonePoint:null,
- ctor:function(){
- this._super();
- //初始化
- this.initWithFile(s_stone);
- //设置事件
- cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,0,true);
- //初始向量
- this._velocity = cc.p(800,800);
- this.scheduleUpdate();
- },
- onTouchBegan:function(touch,event){
- if(!this.containsTouchLocation(touch)){
- this.mainLayer.reset();
- this._isPulling = false;
- this._isPullEnd = false;
- return false;
- }
- this._isPulling = true;
- this._isPullEnd = false;
- return true;
- },
- onTouchMoved:function(touch, event){
- var touchPoint = touch.getLocation();
- this.setPosition(touchPoint);
- this.mainLayer.drawLine();
- },
- onTouchEnded:function(){
- this._isPullEnd = true;
- var hitAngle = cc.pToAngle(cc.pSub(cc.p(this.mainLayer._slingshot.getPositionX(),
- FLOOR_HEIGHT+this.mainLayer._slingshot.getPositionY()),this.getPosition()));
- var scalarVelocity = cc.pLength(this._velocity);
- this._velocity = cc.pMult(cc.pForAngle(hitAngle),scalarVelocity);
- this.mainLayer.clearDrawLine();
- },
- containsTouchLocation:function(touch){
- //获取触摸点的位置
- var touchPoint = touch.getLocation();
- //获取当前对象的宽度
- var contentSize = this.getContentSize();
- //定义拖拽的区域
- var myRect = cc.rect(0,0,contentSize.width,contentSize.height);
- myRect.origin.x += this.getPosition().x - this.getContentSize().width/2;
- myRect.origin.y += this.getPosition().y - this.getContentSize().height/2;
- return cc.rectContainsPoint(myRect,touchPoint);
- },
- update:function(dt){
- if(this._isPullEnd&&this._isPulling){
- this.setPosition(cc.pAdd(this.getPosition(),cc.pMult(this._velocity,dt)));
- this.check();
- }
- },
- check:function(){
- //判断是否飞出了整个区域以外,如果是则重设石头
- var size = cc.Director.getInstance().getWinSize();
- if(this.getPositionX()>(size.width+20)||
- this.getPositionX()<-20||this.getPositionY()>(size.height+20)
- ||this.getPositionY()<-20){
- this.setPosition(this.mainLayer._stonePoint);
- this._isPullEnd = false;
- this._isPulling = false;
- }
- }
- });
最后:可能做得不是很好,但后面会慢慢完善,也会发到网上供大家参考,源码下载地址:
下载
coco2d-html5制作弹弓射鸟第一部分---橡皮筋的更多相关文章
- 程序员用HTML5制作的爱心树表白动画
体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: & ...
- 使用HTML5制作loading图
昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...
- 使用HTML5制作时钟
之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE h ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
- html5制作一个时钟
试着用html5写一个时钟 记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------- ...
- 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 ...
- 【HTML5校企公益课】第一天
1.搭建基本的开发环境.学校电脑用的是浏览器是Chrome,编辑器是HBuilder. 2.初步介绍HTML5的Web项目基本结构. css:样式表 img:存放图片 js:存放脚本文件 .html: ...
- 基于html5制作3D拳击游戏源码下载
今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览 ...
随机推荐
- csms发布步骤
1.wcf发布 通过点击 CSMS2.Application,右键发布按钮,将文件拷贝 2.打包文件 CSMS2.Resources 中 update.config 修改为对应 ServerUrl地址 ...
- java代码实现 金字塔(倒置)
在jsp中实现如图所示的金字塔,,代码如下: 大致思路如下: 1.先画出前5行.因为 i+空格数=总行数,所以第一行的空格数是 总行数-i(第几行),然后画出 *,*的数目=2*i-11: 2.在画出 ...
- java之NIO编程
所谓行文如编程,随笔好比java文件,文章好比类,参考文献是import,那么目录就是方法定义. 本篇文章处在分析thrift的nonblocking server之前,因为后者要依赖该篇文章的知识. ...
- SQL中对日期进行模糊查询的方法
在我们通过SQL语句对数据库中的数据进行查询时,难免会遇到针对datetime的查询,但是因为一般情况下,输入的时间条件为年月日,所以,这种情况下,我们就要进行一下模糊查询,首先,摒弃一种投机取巧的方 ...
- 最完美的匹配网页中图片 src 部分的正则表达式
$str='<p style="padding: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 200%;"& ...
- PHP中检测ajax请求的代码例子
多数情况下,基于JavaScript 的Js框架如jquery.Mootools.Prototype等,在发出Ajax请求指令时,都会发送额外的 HTTP_X_REQUESTED_WITH 头部信息, ...
- php实现获取汉字的首字母实例
//取汉字的asc区间然后返回汉字首字母了,代码如下:header("Content-type: text/html; charset=utf-8"); function getf ...
- express4.x中的链式路由句柄
var express = require("express"); var router = express(); router.get('/', function (req, r ...
- 后台返回data直接在页面转换
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <fmt: ...
- RSA 加密
iOS开发教程-iOS中的RSA加解密 在移动应用开发中常常遇到数据传输安全性的问题,尤其是在账户安全以及支付场景中的订单数据.或支付信息的传输中,正规的公司一定会要求对数据进行加密,当然有创业初期的 ...