[HTML5]使用Box2dWeb模拟射箭效果并添加能量槽

上次已实现箭矢的飞行效果，但是箭在碰到墙壁时直接反弹回来，像钢棍而不是箭。在Box2d中，可以利用关节(Joint)将箭和靶子连接起来，组成一个整体，实现射击效果。使用关节要在文件开头添加新的变量，方便后面使用：

var b2Joints =  Box2D.Dynamics.Joints;
var b2Contacts =  Box2D.Dynamics.Contacts;
var b2Listener =Box2D.Dynamics.b2ContactListener;

箭与靶子的起始位置并不相同，要检测箭是否射中靶子就要实时进行碰撞检测，幸好Box2d可以自动进行这部分工作，不过检测到碰撞时如何处理需要自己定义。所以有下面的声明，声明一个b2Listener，两个物体碰撞时会调用Listener指定的方法。

var arrowContactListener = new b2Listener;
arrowContactListener.PreSolve = arrowPreSolve;
world.SetContactListener(arrowContactListener);

arrowPreSolve就是检测到碰撞时要执行的方法，具体实现如下：

function arrowPreSolve(contact,oldManifold){var contactPoint = new b2Vec2;var weldJointDef = new b2Joints.b2WeldJointDef;if(contact.IsTouching()){var bodyA =contact.GetFixtureA().GetBody();var bodyB = contact.GetFixtureB().GetBody();var objA = bodyA.GetUserData();var objB = bodyB.GetUserData();if (objA.name=="arrow" &&objB.name=="arrow") {for (var j = bodyA.GetJointList(); j; j=j.next) {bodyA.GetWorld().DestroyJoint(j.joint);}for (j=bodyB.GetJointList(); j; j=j.next) {bodyB.GetWorld().DestroyJoint(j.joint);}}if (objA.name=="arrow" &&objB.name=="target") {if (objA.isflying) {weldJointDef = newb2Joints.b2WeldJointDef;weldJointDef.Initialize(bodyB,bodyA,bodyA.GetWorldCenter());bodyB.GetWorld().CreateJoint(weldJointDef);}console.log("Hit Target!");}if (objB.name=="wall"&&objA.name=="arrow") {if (objA.isflying) {weldJointDef = newb2Joints.b2WeldJointDef;weldJointDef.Initialize(bodyA,bodyB,bodyB.GetWorldCenter());bodyA.GetWorld().CreateJoint(weldJointDef);}}if (objB.name=="arrow") {objB.isflying=false;}if (objA.name=="arrow") {objA.isflying=false;}}
}

几个条件语句分别处理箭与箭碰撞，箭与靶子碰撞和箭与墙壁碰撞这三种情况，最后更新箭的飞行状态。设置箭飞行状态的主要目的就是保证当前世界中只有一支活动的箭。

平时一些小游戏在射箭或者发生炮弹的时候都会有一个能量槽来表示力度的大小，接下来就向这个小游戏中添加一个能量槽，按鼠标时间越长，射箭的力度越大。

首先向arrow.html文件中添加下面的div，表示能量槽，在后面的JS代码中动态更新它的长度。

<divid="power_bar"></div>

然后在JS文件中修改鼠标消息响应方法，并添加一个定时修改能量槽长度的方法calculateStrength：

functiononMouseDown(e){if(arrowGame.state == arrowGame.STATE_PLAY){if(allowCreateArrow()) {arrowGame.chargeTaskID =setInterval(calculateStrength, 25);}}
}functiononMouseUp(e) {if(arrowGame.state == arrowGame.STATE_PLAY){// Only one arrow in gaming.if(allowCreateArrow()) {createArrow(e.clientX-canvasPosition.x,e.clientY-canvasPosition.y,arrowGame.power);clearInterval(arrowGame.chargeTaskID);arrowGame.power = 0;}}
}functioncalculateStrength() {      arrowGame.power++;arrowGame.powerBar.style.width =arrowGame.power*10 + "px";if(arrowGame.powerBar.style.width =="300px"){clearInterval(arrowGame.chargeTaskID);}
}

在鼠标按下时，开启定时器，增加能量槽的长度，当鼠标弹起时，根据当前的鼠标位置和能量槽长度创建一支箭。

效果如下图：

为方便后面编程，对整个JS文件的结构进行了修改，使用一个全局结构存储游戏状态，并修改整个流程，细节部分可以参照源代码。

源代码下载地址

[HTML5]使用Box2dWeb模拟射箭效果并添加能量槽相关推荐

[HTML5]使用Box2dWeb模拟飞行箭矢
Box2d是一个2D游戏物理引擎,由Erin Catto开发,于2007年发布.很多2D游戏都用过Box2d,其中最有名的自然是愤怒的小鸟.Box2d本身是C++编写,但在不同平台都有它的衍生版本,像 ...
delphi 实现屏幕旋转代码_Cocos Creator模拟射箭效果 | 附代码
1 获取代码关注微信公众号,发送[射箭]获取代码 2 效果预览 3 操作方法点击屏幕,屏幕出现起始位置标志的圆点,不松开手指,滑动屏幕,控制力度和方向,移动距离越大,弓箭拉伸效果越大,松开以后,箭 ...
Cocos Creator下JavaScript模拟射箭效果，附代码
获取代码关注微信公众号,发送[射箭]获取代码效果预览操作方法点击屏幕,屏幕出现起始位置标志的圆点,不松开手指,滑动屏幕,控制力度和方向,移动距离越大,弓箭拉伸效果越大,松开以后,箭将沿着结束点 ...
Cocos Creator模拟射箭效果 | 附代码
1 获取代码感谢「一枚小工」的投稿,关注他的微信公众号,发送[射箭]获取代码 2 效果预览 3 操作方法点击屏幕,屏幕出现起始位置标志的圆点,不松开手指,滑动屏幕,控制力度和方向,移动距离越大,弓 ...
canvas三角函数模拟水波效果
原文:canvas三角函数模拟水波效果最近项目中,ui设计了个水波效果的背景动画,然而并没有gif或svg动画,开始试着用css实现了一下,动画效果并不是很好,网上查了下基本都是用贝赛尔曲线实现,想 ...
html5怎么产生手风琴效果,Html5 js如何实现手风琴效果
Html5 js如何实现手风琴效果发布时间:2020-08-03 09:54:10 来源:亿速云阅读:92 作者:小猪这篇文章主要为大家展示了Html5 js如何实现手风琴效果,内容简而易懂,希 ...
OpenGL实现碰撞检测与模拟重力效果(简单的物理系统)
最近在做一个OpenGL的小游戏,想要实现碰撞检测与模拟重力效果,即类似Unity3d的物理引擎.碰撞检测参考了一篇博文: http://blog.csdn.net/zju_fish1996/arti ...
实现osgEarth三维仿真场景模型雾的效果的添加解决方法
在osgearth项目开发的过程中,为了实现逼真的三维场景可视化效果,需要对模型进行雾化处理,从而实现雾的自然天气情况模拟.在这过程中,利用OSG的osg::Fog类实现雾的效果,实现的效果如图1所示 ...
cocoscreator实现射箭效果
示例: 1:创建一个箭 -创建一个row节点为箭节点,添加刚体组件,并设置刚体Type为静态Static- 2:创建并挂载脚本 -创建一个脚本并挂载在bg节点上- 3: code cc.Class({ ...

[HTML5]使用Box2dWeb模拟射箭效果并添加能量槽

[HTML5]使用Box2dWeb模拟射箭效果并添加能量槽相关推荐

最新文章

热门文章