[javascript] Box2D JS初探(一个控制小球的游戏例子)。学习用!
Box2D 开源物理引擎,第一次接触,主要用途应该是做游戏,不过也可以作些简单的页面特性,比如切割粉碎。拖动带弹性系数。
从写了个控制小球运动,可以方向键控制左右和弹跳,碰到障碍物就死掉的DEMO来试试。
演示地址: null
这里注意的是,市面上有box2d JS 和 box2d Web2种js版本,有些小伙伴用老的box2d JS,那就不是这么写的了非常麻烦,而且box2d js不更新了,不建议学习使用。
<html><head><title>Box2dWeb example</title></head><body οnlοad="init();"><img id="tulip" style="display: none" src="33.jpg" alt="The Tulip" /><canvas id="canvas" width="900" height="600"></canvas></body><script type="text/javascript" src="Box2dWeb-2.1.a.3.min.js"></script><script type="text/javascript">var world;function init() {var b2Vec2 = Box2D.Common.Math.b2Vec2, b2BodyDef = Box2D.Dynamics.b2BodyDef, b2Body = Box2D.Dynamics.b2Body, b2FixtureDef = Box2D.Dynamics.b2FixtureDef, b2Fixture = Box2D.Dynamics.b2Fixture, b2World = Box2D.Dynamics.b2World, b2MassData = Box2D.Collision.Shapes.b2MassData, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape, b2DebugDraw = Box2D.Dynamics.b2DebugDraw, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef, b2WeldJointDef = Box2D.Dynamics.Joints.b2WeldJointDef;world = new b2World(new b2Vec2(0,10) //gravity 重力的方向,力度 单位牛,10就是重力加速度G, true //allow sleep);var fixDef = new b2FixtureDef; //刚体创建fixDef.density = 1.0; //密度fixDef.friction = 0.5; //摩擦力 加大了之后正方形被推动就比较不容易动fixDef.restitution = 0.8; //弹性系数,1应该就是不衰减,大于1反而越来越快var bodyDef = new b2BodyDef;//create groundbodyDef.type = b2Body.b2_staticBody;bodyDef.position.x = 1; //单位是米,一米是30像素。bodyDef.position.y = 19.8;//以下试图建立四边框(用刚体来做,游戏四边的场景边框,不然会掉出去)fixDef.shape = new b2PolygonShape;fixDef.shape.SetAsBox(30, 0.1); //长宽应该(宽长,xy对应)world.CreateBody(bodyDef).CreateFixture(fixDef);fixDef.shape.SetAsBox(0.1, 20);bodyDef.position.Set(0.1, 0.1);world.CreateBody(bodyDef).CreateFixture(fixDef);fixDef.shape.SetAsBox(30, 0.1);bodyDef.position.Set(0.1, 0.1);world.CreateBody(bodyDef).CreateFixture(fixDef);fixDef.shape.SetAsBox(0.1, 20);bodyDef.position.Set(29.8, 0.1);world.CreateBody(bodyDef).CreateFixture(fixDef);//在场景中制作台阶fixDef.shape.SetAsBox(3, 0.1);bodyDef.position.Set(10, 18.5);world.CreateBody(bodyDef).CreateFixture(fixDef);var mouseX, mouseY,selectBody, keyBoll,vX, vY,keyVelocity,Death = false,barrier;var canvasPosition = getElementPosition(document.getElementById("canvas"));var context = document.getElementById("canvas").getContext("2d");var img=document.getElementById("tulip");//在场景中的空中放置一个正方形bodyDef.type = b2Body.b2_dynamicBody;fixDef.shape = new b2PolygonShape();fixDef.shape.SetAsBox(1,1); //30px * 30px 的矩形fixDef.restitution = 2; //改变弹性系数,如果撞到他会更快的反弹bodyDef.position.Set(10,13); //矩形陷阱的放置位置console.log(fixDef.shape.GetVertices() );console.log(typeof fixDef.shape.GetVertices()[0] );selectBody = world.CreateBody(bodyDef).CreateFixture(fixDef).GetBody();//建个链接器。把矩形固定在场景中var jointDef = new b2MouseJointDef();jointDef.bodyA = world.GetGroundBody(); jointDef.bodyB = selectBody;//矩形和场景本体相连jointDef.target.Set(10, 13);//连接位置jointDef.collideConnected = true;//是否碰撞。要碰。不然就是根线,不能固定用jointDef.maxForce = 3000.0;//最大力,如果设置过小,会被从固定位置撞开world.CreateJoint(jointDef);//连接器加入世界// 创建钉子fixDef.restitution = 0;fixDef.friction = 5000fixDef.shape = new b2PolygonShape;var vArray = [new b2Vec2(0,-0.5),new b2Vec2(0.25,0.5),new b2Vec2(-0.25,0.5)]fixDef.shape.SetAsVector(vArray, 3);//创建一个三角形这里要注意了,Vector字面是向量,其实穿进去的是三角形顶点坐标List,3是顶点个数。而且要顺时针方向,不然无法物理判定。bodyDef.position.Set(15,19.5);barrier = world.CreateBody(bodyDef).CreateFixture(fixDef).GetBody();//创建连接,这个WeldJoint看字面就知道,是刚体连接,上面那个连接会被力改变,会旋转。这个就是焊死了。相当于固定jointDef = new b2WeldJointDef();jointDef.bodyA = world.GetGroundBody();jointDef.bodyB = barrier;jointDef.localAnchorA = new b2Vec2(15, 19.3)jointDef.localAnchorB = barrier.GetLocalCenter();jointDef.collideConnected = true;world.CreateJoint(jointDef);//创建主角--一个球 fixDef.restitution = 0.8;fixDef.shape = new b2CircleShape(1);bodyDef.position.Set(1,19.5);bodyDef.userData=img;//给球上图片keyBoll = world.CreateBody(bodyDef).CreateFixture(fixDef).GetBody();//把这个球的body记录下来。/**这里是点击小球在鼠标位置降落下来的 监听。document.addEventListener("mousedown", function(e) {mouseX = (e.layerX - canvasPosition.x) / 30;mouseY = (e.layerY - canvasPosition.y) / 30; }, true);document.addEventListener("mouseup", function(e) {fixDef.shape = new b2CircleShape(0.5);bodyDef.position.Set(mouseX,mouseY);selectBody = world.CreateBody(bodyDef).CreateFixture(fixDef).GetBody();vX = (e.layerX - canvasPosition.x) / 30 - mouseX;vY = (e.layerY - canvasPosition.y) / 30 - mouseY;selectBody.ApplyImpulse( new b2Vec2(vX*5,vY*5), selectBody.GetLocalCenter());}, true);**///监控键盘事件document.addEventListener("keydown", function(e) {var theEvent = window.event || e;var code = theEvent.keyCode || theEvent.which;console.log(code);var keyVelocity = keyBoll.GetLinearVelocity();//按上方向键:if(code==38){//判定是不是y方向速度为0 ,我要球落地挺稳才让他继续下一次起跳,不然会越来越高。if (keyVelocity.y == 0) {//给一个y方向20的向上加速度。算下10的重力。应该也就2秒就下落了。keyBoll.ApplyImpulse(new b2Vec2(0,-20), keyBoll.GetWorldCenter());}}//左按键if(code==37){keyBoll.SetAwake(true);//唤醒目标,并直接给向左10的速度,这里和上不一样,是直接替换速度,并不是加速度,所以Y方向的速度还需要加入。keyBoll.SetLinearVelocity(new b2Vec2(-10,keyVelocity.y), keyBoll.GetWorldCenter());}//右按键if(code==39){keyBoll.SetAwake(true);//同理keyBoll.SetLinearVelocity(new b2Vec2(10,keyVelocity.y), keyBoll.GetWorldCenter());}}, false);//监听按键弹起,并给个减速(也可以直接熟读至0)看个人喜好。document.addEventListener("keyup", function(e) {var theEvent = window.event || e;var code = theEvent.keyCode || theEvent.which;console.log(code);if(code==37){keyBoll.ApplyImpulse(new b2Vec2(10,0), keyBoll.GetWorldCenter());}if(code==39){keyBoll.ApplyImpulse(new b2Vec2(-10,0), keyBoll.GetWorldCenter());}}, false);//setup debug drawvar debugDraw = new b2DebugDraw();debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));debugDraw.SetDrawScale(30.0);debugDraw.SetFillAlpha(0.3);debugDraw.SetLineThickness(2.0);debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);world.SetDebugDraw(debugDraw);window.setInterval(update, 1000 / 60); //配置侦数//官网的例子里的一个canvans定位函数function getElementPosition(element) {var elem=element, tagname="", x=0, y=0;while((typeof(elem) == "object") && (typeof(elem.tagName) != "undefined")) {y += elem.offsetTop;x += elem.offsetLeft;tagname = elem.tagName.toUpperCase();if(tagname == "BODY")elem=0;if(typeof(elem) == "object") {if(typeof(elem.offsetParent) == "object")elem = elem.offsetParent;}}return {x: x, y: y};}function update() {var a = 1 / 60;//如果2个球被被唤醒了,并且球和钉子在一定范围内,则说明撞到钉子了。GameOver 并且把刷新率置99999,表示不动了。if (barrier.IsAwake() && keyBoll.IsAwake()) {if (barrier.GetPosition().x + 2 > keyBoll.GetPosition().x && barrier.GetPosition().x - 2 < keyBoll.GetPosition().x ) {alert("Game Over");a = 999999;}console.log(barrier.GetPosition());console.log(keyBoll.GetPosition()); }world.Step(a //frame-rate, 10 //velocity iterations , 10 //position iterations);world.DrawDebugData();//贴图context.save();context.translate(keyBoll.GetPosition().x*30,keyBoll.GetPosition().y*30);context.rotate(keyBoll.GetAngle());context.drawImage(keyBoll.GetUserData(),-keyBoll.GetUserData().width/2,-keyBoll.GetUserData().height/2);context.restore(); world.ClearForces();};};</script></html>
[javascript] Box2D JS初探(一个控制小球的游戏例子)。学习用!相关推荐
- 用html和js制作一个控制灯泡开关效果
用html和js制作一个控制灯泡开关效果 **用css样式来控制div图片和文本的位置,然后用js里面onclick点击事件来控制图片的更换效果来实现当前运行图的效果** 1.以下是运行的效果图 2. ...
- c++飞扬的小鸟游戏_通过建立一个飞扬的鸟游戏来学习从头开始
c++飞扬的小鸟游戏 Learn how to use Scratch 3.0 by building a flappy bird game in this course developed by W ...
- 前端每日实战:164# 视频演示如何用原生 JS 创作一个数独训练小游戏(内含 4 个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mQYobz 可交互视频 此视频是可 ...
- 【原生JS】做一个打字消除小游戏,学习摸鱼两不误
JS打字消除小游戏 话不多说先看效果! 页面布局: CSS样式: JS文件(重点): 话不多说先看效果! JS打字消除游戏 页面布局: <!DOCTYPE html> <html&g ...
- 用HTML+CSS+JS做一个漂亮简单的游戏网页——全屏游戏美术大赛作品(4个滚动页面)
- Underscore js是一个JavaScript实用库
Underscore.js是一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象.弥补了部分jQuery没有实现的功能,同时又是Backbon ...
- JavaScript:在一个JS文件中引入另外的一个JS文件
前因 这个问题是因为有很多的Html文件(含有公共的JS文件),可能都需要使用同一个JS方法,但是这个JS方法需要依赖其他JS文件的支持,这时候我们不能每一个Html都要写导入JS的标签,我们需要使用 ...
- (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能 本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲 ...
- javascript之jQuery:一个轻松编写js的库
以下内容来自廖雪峰的js教程,整理了下作为笔记 1.简介 JavaScript世界中使用最广泛的一个库,我把它理解为轻松编写js的一个库 jQuery能帮我们干这些事情: 消除浏览器差异:你不需要自己 ...
- html制作自动切换音乐按钮代码,HTML5+JavaScript+CSS实现音乐播放器——难点二:自己设计一个控制音乐播放的控制器...
我们都知道HTML5给我们提供了"controls"这个插件,可是这个插件却比较丑,还不能实现上一首下一首的播放,以及进度条的手动改变等功能,那么如何自己设计一个控制音乐播放的控制 ...
最新文章
- 关于架构的一点思考(一)
- 部署:持续集成(CI)与持续交付(CD)——《微服务设计》读书笔记
- [vue] 说说你对slot的理解有多少?slot使用场景有哪些?
- 2. 怎么根据nagios报警做出调整的
- python全栈和java全栈_Python是全栈式开发语言吗?原因竟是这样!
- jquery.cookie使用方法
- [转载]QMessageBox 用法_vortex_新浪博客
- Oracle Enterprise Manager Cloud Control 12c 概述
- java 表格布局_Java怎样把表格放在绝对定位的面板上
- 关于如何用python下载文件
- 5.3 上兴远程控制
- 通俗解释Docker
- 【人工智能】机器学习:岭回归与LASSO回归(Ridge/LASSO Regression)
- PowerMill 2020基础三四五轴编程到精通视频教程
- 计算机二级vb考试大纲与样卷,全国高校计算机等级考试广西二级VB考试大纲和模拟试卷.doc...
- 李宏毅老师《机器学习》课程笔记-4.1 Self-attention
- Unity 中实现子弹时间效果
- Spring Integration
- 如何把台式计算机的数据传到另一台台式机上,怎么把台式电脑移到另一个房间去啊...
- Vijos 捕风捉影