- 浏览: 931002 次
- 性别:
- 来自: 山西
文章分类
最新评论
-
白小默:
你好 可以提供下源码DEMO吗,不知为何,我导出来的excel ...
jxls 使用模板文件导出生成excel -
zkzqzzz:
博主威武!
让微信二维码扫描您的APK -
zkzqzzz:
感谢博主 原来那些类都不是必须的 或者自己写!!博主真棒 ...
抢红包插件实现原理浅析 -
zkzqzzz:
博主 请问你的其他类在哪里呢?
抢红包插件实现原理浅析 -
zkzqzzz:
其他类在哪呢?
抢红包插件实现原理浅析
愤怒的小鸟是一款人气火爆的益智游戏,现在我试着用lufylegend库件和Box2dWeb物理引擎来看看在html5中如何制作此类经典的物理游戏。
准备工作一
首先,你需要下载lufylegend库件1.4.1版
http://blog.csdn.net/lufy_legend/article/details/7751425
box2dweb你可以到这里下载
http://code.google.com/p/box2dweb/downloads/list
关于lufylegend库件的使用方法,大家可以看一下我以前的一些文章和教程,或者看下面的api说明。
http://lufy.netne.net/lufylegend-js.php?v=api
准备工作二
由于笔者的失误,没有将Box2dWeb的功能封转完,要制作物理游戏的话,不得不对lufylegend-1.4.1做一些扩展,大家可以下载这个扩展文件,等下次库件的1.5版发布的时候会将这些扩展加进去的。
http://fsanguo.comoj.com/download.php?i=lufylegend-1.4.1.extension.js
做好了了上面的准备工作,现在就来跟着笔者来一步步的试一下吧。
一,旋转飞起的小鸟
首先来建一个小鸟
- function Bird(){
- base(this,LSprite,[]);
- var self = this;
- var bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));
- self.addChild(bitmap);
- }
function Bird(){ base(this,LSprite,[]); var self = this; var bitmap = new LBitmap(new LBitmapData(imglist["bird1"])); self.addChild(bitmap); }有了这个类,我们把它显示到画面上就很简单了
- backLayer = new LSprite();
- addChild(backLayer);
- bird = new Bird();
- bird.rotate = 0;
- bird.x = 200;
- bird.y = 430;
- bird.yspeed = -5;
- backLayer.addChild(bird);
backLayer = new LSprite(); addChild(backLayer); bird = new Bird(); bird.rotate = 0; bird.x = 200; bird.y = 430; bird.yspeed = -5; backLayer.addChild(bird);玩过愤怒的小鸟的朋友们都知道,游戏开始时,小鸟跳上弹弓的时候有一个旋转动作,我现在通过lufylegend库件的LTweenLite缓动类来实现这一功能。
- LTweenLite.to(bird,1,
- {
- x:100,
- yspeed:5,
- delay:1,
- rotate:-360,
- onUpdate:function(){
- bird.y += bird.yspeed;
- },
- onComplete:function(){
- start();
- },
- ease:Sine.easeIn
- }
- );
LTweenLite.to(bird,1, { x:100, yspeed:5, delay:1, rotate:-360, onUpdate:function(){ bird.y += bird.yspeed; }, onComplete:function(){ start(); }, ease:Sine.easeIn } );通过上面的代码可以看到,LTweenLite类不但可以改变一些LSprite对象的常用属性,其实可以改变任意自定义的属性,上面就是通过LTweenLite将yspeed由-5变到了,然后通过onUpdate来改变小鸟的y坐标。
下面是测试连接
http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample02/index.html
二,弹出的小鸟
接下来在小鸟弹起后的位置加上一个弹弓
- bitmap = new LBitmap(new LBitmapData(imglist["slingshot1"]));
- bitmap.x = 215;
- bitmap.y = 290;
- backLayer.addChild(bitmap);
- bird = new LSprite();
- bird.name = "bird01";
- backLayer.addChild(bird);
- bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));
- bird.addChild(bitmap);
- bitmap = new LBitmap(new LBitmapData(imglist["slingshot2"]));
- bitmap.x = 190;
- bitmap.y = 290;
- backLayer.addChild(bitmap);
bitmap = new LBitmap(new LBitmapData(imglist["slingshot1"])); bitmap.x = 215; bitmap.y = 290; backLayer.addChild(bitmap); bird = new LSprite(); bird.name = "bird01"; backLayer.addChild(bird); bitmap = new LBitmap(new LBitmapData(imglist["bird1"])); bird.addChild(bitmap); bitmap = new LBitmap(new LBitmapData(imglist["slingshot2"])); bitmap.x = 190; bitmap.y = 290; backLayer.addChild(bitmap);
效果如图
上面代码将弹弓的前后两个分叉加到了画面上。接着通过鼠标来拖拽小鸟,首先加入鼠标按下事件
- backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,downStart);
- startX = bird.x + bird.getWidth()*0.5;
- startY = bird.y + bird.getHeight()*0.5;
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,downStart); startX = bird.x + bird.getWidth()*0.5; startY = bird.y + bird.getHeight()*0.5;上面代码加上了鼠标事件,并记录下了小鸟中心的位置作为弹弓的中心位置。
然后当鼠标按下的时候,判断下鼠标是否点击到了小鸟,然后移除鼠标按下事件,并加入鼠标移动事件和鼠标弹起事件。
- function downStart(event){
- if(event.offsetX > bird.x && event.offsetX < bird.x + bird.getWidth() &&
- event.offsetY > bird.y && event.offsetY < bird.y + bird.getHeight()){
- backLayer.removeEventListener(LMouseEvent.MOUSE_DOWN,downStart);
- backLayer.addEventListener(LMouseEvent.MOUSE_MOVE,downMove);
- backLayer.addEventListener(LMouseEvent.MOUSE_UP,downOver);
- }
- }
function downStart(event){ if(event.offsetX > bird.x && event.offsetX < bird.x + bird.getWidth() && event.offsetY > bird.y && event.offsetY < bird.y + bird.getHeight()){ backLayer.removeEventListener(LMouseEvent.MOUSE_DOWN,downStart); backLayer.addEventListener(LMouseEvent.MOUSE_MOVE,downMove); backLayer.addEventListener(LMouseEvent.MOUSE_UP,downOver); } }先来实现下鼠标移动时候的,让小鸟跟随鼠标
- unction downMove(event){
- var r = Math.sqrt(Math.pow((startX - event.selfX),2)+Math.pow((startY - event.selfY),2));
- if(r > 100)r = 100;
- var angle = Math.atan2(event.selfY - startY,event.selfX - startX);
- bird.x = Math.cos(angle) * r + startX - bird.getWidth()*0.5;
- bird.y = Math.sin(angle) * r + startY - bird.getHeight()*0.5;
- }
unction downMove(event){ var r = Math.sqrt(Math.pow((startX - event.selfX),2)+Math.pow((startY - event.selfY),2)); if(r > 100)r = 100; var angle = Math.atan2(event.selfY - startY,event.selfX - startX); bird.x = Math.cos(angle) * r + startX - bird.getWidth()*0.5; bird.y = Math.sin(angle) * r + startY - bird.getHeight()*0.5; }解释下上面的代码,首先,计算鼠标位置和弹弓的中心位置之间的距离,当距离大于100的时候,使其等于100。接着计算鼠标拖拽的角度,然后通过这个角度来计算并设置小鸟的坐标。
接着,看一下鼠标弹起后的功能,上面的代码里并没有用到box2dweb,我通过将小鸟变为box2d刚体,然后给小鸟加上一个力,来让小鸟弹飞出去。
- function downOver(event){
- backLayer.removeEventListener(LMouseEvent.MOUSE_UP,downOver);
- backLayer.removeEventListener(LMouseEvent.MOUSE_MOVE,downMove);
- var startX2 = bird.x + bird.getWidth()*0.5;
- var startY2 = bird.y + bird.getHeight()*0.5;
- var r = Math.sqrt(Math.pow((startX - startX2),2)+Math.pow((startY - startY2),2));
- var angle = Math.atan2(startY2 - startY,startX2 - startX);
- bird.addBodyCircle(bird.getWidth()*0.5,bird.getHeight()*0.5,bird.getWidth()*0.5,1,.5,.4,.5);
- var force = 7;
- var vec = new LGlobal.box2d.b2Vec2(-force*r*Math.cos(angle),-force*r*Math.sin(angle));
- bird.box2dBody.ApplyForce(vec, bird.box2dBody.GetWorldCenter());
- }
function downOver(event){ backLayer.removeEventListener(LMouseEvent.MOUSE_UP,downOver); backLayer.removeEventListener(LMouseEvent.MOUSE_MOVE,downMove); var startX2 = bird.x + bird.getWidth()*0.5; var startY2 = bird.y + bird.getHeight()*0.5; var r = Math.sqrt(Math.pow((startX - startX2),2)+Math.pow((startY - startY2),2)); var angle = Math.atan2(startY2 - startY,startX2 - startX); bird.addBodyCircle(bird.getWidth()*0.5,bird.getHeight()*0.5,bird.getWidth()*0.5,1,.5,.4,.5); var force = 7; var vec = new LGlobal.box2d.b2Vec2(-force*r*Math.cos(angle),-force*r*Math.sin(angle)); bird.box2dBody.ApplyForce(vec, bird.box2dBody.GetWorldCenter()); }上面代码首先计算了一下小鸟的被拖拽的距离,以及被拖拽的角度。
addBodyCircle给小鸟加入body,让其变为一个刚体。
ApplyForce给刚体加上一个力。
好了,点开下面链接进行测试,通过拖拽小鸟,将小鸟弹飞出去吧。
http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample02/index02.html
下面给出本次教程的源码,当然,lufylegend库件和box2dweb需要自己下载配置一下
http://fsanguo.comoj.com/download.php?i=AngryBirds1.rar
本次就写到这里,在下一讲中会加入碰撞功能,并且让镜头时刻跟随小鸟,敬请期待。
发表评论
-
IOS-HTML5-Video标签不能播放
2019-05-06 12:04 1494h5的video标签 在UIwebview ... -
七步配置phonegap+cordova+ionic开发环境
2016-12-19 16:21 687本文讲的是Android混合 ... -
iOS企业应用发布教程
2016-11-01 08:51 373iOS企业应用可以不经过app store发布,而可以直接在 ... -
IOS在自己网站发布APP(企业版$299上线流程)
2016-11-01 08:49 447最近刚上线一个企业内 ... -
xcode Run Script Command /bin/sh failed with exit code 1
2016-09-09 17:38 1223Xcode编译库报错:Command /bin/sh fai ... -
(二十三):Objective-C代码混淆扩展----安全攻防之代码混淆的一个小工具iOS安全攻防
2016-09-09 15:10 1167http://blog.csdn.net/yiyaaixu ... -
iOS安全–浅谈关于iOS加固的几种方法,代码混淆,类名方法名混淆等
2016-09-09 15:00 789转自:http://www.blogfshare ... -
Request获取用户真实IP
2016-09-05 11:26 561在Servlet里,获取客户端的IP地址的方法是:reque ... -
IOS UIAlertView(警告框)方法总结
2016-09-02 16:17 369摘要 在IOS8之后,UIAle ... -
iOS控件AlertView的使用
2016-09-13 10:46 424http://www.idev101.com/code/U ... -
iOS安全攻防(二十三):Objective-C代码混淆
2016-09-02 16:10 434iOS安全攻防(二十三):Objective-C ... -
iOS安全攻防(二十):越狱检测的攻与防
2016-09-02 15:23 624越狱检测的攻与防 在应用开发过程中,我们希望 ... -
iOS安全–IOS应用调试检测以及反调试
2016-09-02 15:05 1669一、检测调试 当一个应用被调试的时候,会给进程设置一个标识 ... -
iOS程序 防止动态调试和代码注入
2016-09-02 15:02 2324iPhone真实的运行环境是没有sys/ptrace.h抛出。 ... -
IOS 程序禁止被调试
2016-08-31 10:33 509IOS程序发布后,禁止被调试设置: 4.3.3开发环境 ... -
iOS设备是否越狱的判断代码
2016-08-31 10:36 506苹果是非常看重产品的安全性的,所以给用户设计了一套复杂的安全 ... -
苹果 App Store账号申请和证书申请发布app等知识
2016-07-21 15:27 804app store为开发者提供四种类型的申请: 个人i ... -
xcode 中生成和打包 ipa文件的方法和步骤
2016-07-21 15:15 503第一步:这里需要注意,要选择真机,否则Archive ... -
Xcode如何打包ipa安装包
2016-07-21 15:02 1255右键工程,选择“打开方式”->“X ... -
ios打包ipa的四种实用方法(.app转.ipa)
2016-07-21 15:01 4总结一下,目前.app包转为.ipa包的方法有以下几种: ...
相关推荐
该工程在MATLAB 2010a 上运行开发。所有的代码完全开源,您可以在了解了项目的架构之后,根据自己的想法进行二次开发。游戏的体验与安卓平台的运行体验一致。
C++设计模式--基于Qt4开源跨平台开发框架
好东西一定得分享,自己现阶段需要好好学习一下QT。C++设计模式--基于Qt4开源跨平台开发框架 完整清晰版中文PDF。好东西而且分数不贵!解压密码qt。
Android--开发--[开源项目]Android--开发--_炫酷的3D音乐播放器_各种特效OpenGL
c++设计模式--基于Qt4开源跨平台开发框架(源代码)c++设计模式--基于Qt4开源跨平台开发框架(源代码)c++设计模式--基于Qt4开源跨平台开发框架(源代码)c++设计模式--基于Qt4开源跨平台开发框架(源代码)c++设计模式--...
基于java的开发源码-smart-socket 开源的Java AIO框架.zip 基于java的开发源码-smart-socket 开源的Java AIO框架.zip 基于java的开发源码-smart-socket 开源的Java AIO框架.zip 基于java的开发源码-smart-socket ...
个人毕设-基于java开发的开源网址导航网站项目源码.zip个人毕设-基于java开发的开源网址导航网站项目源码.zip个人毕设-基于java开发的开源网址导航网站项目源码.zip个人毕设-基于java开发的开源网址导航网站项目源码...
开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列...
《C++设计模式--基于Qt4开源跨平台开发框架》涉及到qt的基础知识和容器语法的使用,qt中的设计模式,是很好的资料。现与大家一起分享。免费下载。 由于上传大小有限制,所以分为两部分。 第一部分下载地址: ...
Java版 愤怒的小鸟开源游戏
Keil uVision开发需要版权费,而网上开源的单片机、微控制器平台和资料比较少,有一些人用Eclipse。这篇文档讲解Eclipse + CDT...可以查看本人另一篇编写的文档:《EmBlocks + J-Link,STM32开源开发环境搭建与调试》。
基于java的开发源码-Solo Java开源博客.zip 基于java的开发源码-Solo Java开源博客.zip 基于java的开发源码-Solo Java开源博客.zip 基于java的开发源码-Solo Java开源博客.zip 基于java的开发源码-Solo Java开源博客...
基于java的开发源码-PublicCMS开源Java系统.zip 基于java的开发源码-PublicCMS开源Java系统.zip 基于java的开发源码-PublicCMS开源Java系统.zip 基于java的开发源码-PublicCMS开源Java系统.zip v基于java的开发源码-...
PHP实例开发源码—X-Cart Pro PHP购物车开源软件.zip PHP实例开发源码—X-Cart Pro PHP购物车开源软件.zip PHP实例开发源码—X-Cart Pro PHP购物车开源软件.zip
PHP实例开发源码—X-Cart Gold PHP购物车开源软件.zip PHP实例开发源码—X-Cart Gold PHP购物车开源软件.zip PHP实例开发源码—X-Cart Gold PHP购物车开源软件.zip
打地鼠游戏设计c 基于java的开发源码-md blockchain 开源java区块链平台.zip 基于java的开发源码-md blockchain 开源java区块链平台.zip 基于java的开发源码-md blockchain 开源java区块链平台.zip 基于java的开发...
C#源码系列7---一个开源ERP源码(C#)
基于java的开发源码-belog博客程序(Java开源博客系统).zip 基于java的开发源码-belog博客程序(Java开源博客系统).zip 基于java的开发源码-belog博客程序(Java开源博客系统).zip 基于java的开发源码-belog博客程序...
基于java的开发源码-iqq(开源 QQ 工具 iQQ).zip 基于java的开发源码-iqq(开源 QQ 工具 iQQ).zip 基于java的开发源码-iqq(开源 QQ 工具 iQQ).zip 基于java的开发源码-iqq(开源 QQ 工具 iQQ).zip 基于java的开发源码-...
基于java的开发源码-makagiga(开源个人桌面软件 Makagiga).zip 基于java的开发源码-makagiga(开源个人桌面软件 Makagiga).zip 基于java的开发源码-makagiga(开源个人桌面软件 Makagiga).zip 基于java的开发源码-...