HTML5 CANVAS BOX2DJS 网页 游戏 学习.doc

BOX2DJS Study1. 下载box2djs源代码安装包 /projects/box2d-js/files/ 2. 解压，将所有javascript文件放到一个文件夹，如webGames文件夹： 3. 建议下载BlueFish 软件（Mac版） 新建html文档，如： indexs.html ，然后添加如下代码：4. 第三步讲解： 最基本的html文档（蓝色部分是专门为ios设计，绿色部分是游戏专用canvas，棕色部分是启动是自动加载） ：添加所有javascript文件（刚才解压的所有）： 。 。5. 新建mytest.js文件 （同时添加到indexs.html中） 。 。6. 编辑mytest.js= 总代码 =/ HTML5 Canvas Game Drawing With Box2D function fun() var world; / the physics world var ctx; / the canvas context var canvasWidth; / width var canvasHeight; / height / = init the canvas and context = ctx =document.getElementById(canvas).getContext(2d); var canvasElm = document.getElementById(canvas); canvasElm.setAttribute(width,document.body.clientWidth -15); canvasElm.setAttribute(height,document.body.scrollHeight -15); canvasWidth=document.body.clientWidth ; canvasHeight=document.body.scrollHeight; / = clear the canvas with black color = ctx.fillStyle=rgb(0,220,220); ctx.fillRect(0,0,canvasElm.width,canvasElm.height); / = create the world = var worldAABB = new b2AABB(); worldAABB.minVertex.Set(-1000, -1000); worldAABB.maxVertex.Set(1000, 1000); var gravity = new b2Vec2(0, 300); var doSleep = true; var world = new b2World(worldAABB, gravity, doSleep); / = create the ground = var groundSd1 = new b2BoxDef(); / bottom groundSd1.extents.Set(160, 2); groundSd1.restitution = 0.2; var groundBd1 = new b2BodyDef(); groundBd1.AddShape(groundSd1); groundBd1.position.Set(160, 480); world.CreateBody(groundBd1); var groundSd2 = new b2BoxDef(); / top groundSd2.extents.Set(160,2); groundSd2.restitution = 0.2; var groundBd2 = new b2BodyDef(); groundBd2.AddShape(groundSd2); groundBd2.position.Set(160, 0); world.CreateBody(groundBd2); var groundSd3 = new b2BoxDef(); / left groundSd3.extents.Set(2, 240); groundSd3.restitution = 0.2; var groundBd3 = new b2BodyDef(); groundBd3.AddShape(groundSd3); groundBd3.position.Set(0,240); world.CreateBody(groundBd3); var groundSd4 = new b2BoxDef(); / right groundSd4.extents.Set(2, 240); groundSd4.restitution = 0.2; var groundBd4 = new b2BodyDef(); groundBd4.AddShape(groundSd4); groundBd4.position.Set(320, 240); world.CreateBody(groundBd4); / = create the box = var boxSd1 = new b2BoxDef(); boxSd1.density = 0.5; boxSd1.extents.Set(20, 20); var boxBd1 = new b2BodyDef(); boxBd1.AddShape(boxSd1); boxBd1.position.Set(200,100); world.CreateBody(boxBd1); / = create the circle = var circleSd1 = new b2CircleDef(); circleSd1.density = 1.0; circleSd1.radius = 20; circleSd1.restitution = 1.0; circleSd1.friction = 0; var circleBd1 = new b2BodyDef(); circleBd1.AddShape(circleSd1); circleBd1.position.Set(220,210); world.CreateBody(circleBd1); var circleSd1 = new b2CircleDef(); circleSd1.density = 1.0; circleSd1.radius = 20; circleSd1.restitution = 1.0; circleSd1.friction = 0; var circleBd1 = new b2BodyDef(); circleBd1.AddShape(circleSd1); circleBd1.position.Set(100,250); world.CreateBody(circleBd1); / = step = function step() world.Step(1.0/60, 5); ctx.clearRect(0, 0, document.body.clientWidth , document.body.scrollHeight); drawWorld(world, ctx); / setTimeout(step,20); / no , canot work well ! setInterval(step,1000/60); /= drawWorld =function drawWorld(world) for (var j = world.m_jointList; j; j = j.m_next) / drawJoint(j); for (var b = world.m_bodyList; b; b = b.m_next) for (var s = b.GetShapeList(); s != null; s = s.GetNext() ctx.beginPath(); switch (s.m_type) case b2Shape.e_circleShape: var circle = s; var r = circle.m_radius; var pos = circle.m_position; ctx.arc(pos.x, pos.y, r, 0, Math.PI * 2, false); var image=new Image(); image.src=image.png; ctx.drawImage(image,pos.x,pos.y); break; case b2Shape.e_polyShape: var poly = s; var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices0); ctx.moveTo(tV.x, tV.y); for (var i = 0; i poly.m_vertexCount; i+) var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_verticesi); ctx.lineTo(v.x, v.y); var image=new Image(); image.src=image.png; ctx.drawImage(image,tV.x, tV.y); ctx.lineTo(tV.x, tV.y); break; ctx.stroke(); /fun() =7. 上一步的一步一步讲解： 设定全局变量 var world; / the physics world var ctx; / the canvas context var canvasWidth; / widthvar canvasHeight; / height canvasWidth=document.body.clientWidth ; canvasHeight=document.body.scrollHeight; 获取游戏上下文，并制定宽高属性（-15是为了适应ios屏幕大小）： ctx =document.getElementById(canvas).getContext(2d); var canvasElm = document.getElementById(canvas); canvasElm.setAttribute(width,document.body.clientWidth -15); canvasElm.setAttribute(height,document.body.scrollHeight -15); 先清屏： ctx.fillStyle=rgb(0,220,220); ctx.fillRect(0,0,canvasElm.width,canvasElm.height); 下面正式进入BOX2D世界 创建BOX2D世界 var worldAABB = new b2AABB(); worldAABB.minVertex.Set(-1000, -1000); worldAABB.maxVertex.Set(1000, 1000); var gravity = new b2Vec2(0, 300); var doSleep = true; var world = new b2World(worldAABB, gravity, doSleep); 创建地形墙壁 var groundSd1 = new b2BoxDef(); / bottom groundSd1.extents.Set(160, 2); groundSd1.restitution = 0.2; var groundBd1 = new b2BodyDef(); groundBd1.AddShape(groundSd1); groundBd1.position.Set(160, 480); world.CreateBody(groundBd1); var groundSd2 = new b2BoxDef(); / top groundSd2.extents.Set(160,2); groundSd2.restitution = 0.2; var groundBd2 = new b2BodyDef(); groundBd2.AddShape(groundSd2); groundBd2.position.Set(160, 0); world.CreateBody(groundBd2); var groundSd3 = new b2BoxDef(); / left groundSd3.extents.Set(2, 240); groundSd3.restitution = 0.2; var groundBd3 = new b2BodyDef(); groundBd3.AddShape(groundSd3); groundBd3.position.Set(0,240); world.CreateBody(groundBd3); var groundSd4 = new b2BoxDef(); / right groundSd4.extents.Set(2, 240); groundSd4.restitution = 0.2; var groundBd4 = new b2BodyDef(); groundBd4.AddShape(groundSd4); groundBd4.position.Set(320, 240); world.CreateBody(groundBd4);创建一个四方形 和 一个圆圈/ = create the box = var boxSd1 = new b2BoxDef(); boxSd1.density = 0.5; boxSd1.extents.Set(20, 20); var boxBd1 = new b2BodyDef(); boxBd1.AddShape(boxSd1); boxBd1.position.Set(200,100); world.CreateBody(boxBd1); / = create the circle = var circleSd1 = new b2CircleDef(); circleSd1.density = 1.0; circleSd1.radius = 20; circleSd1.restitution = 1.0; circleSd1.friction = 0; var circleBd1 = new b2BodyDef(); circleBd1.AddShape(circleSd1); circleBd1.position.Set(220,210);world.CreateBody(circleBd1); var circleSd1 = new b2CircleDef(); circleSd1.density = 1.0; circleSd1.radius = 20; circleSd1.restitution = 1.0; circleSd1.friction = 0; var circleBd1 = new b2BodyDef(); circleBd1.AddShape(circleSd1); circleBd1.position.Set(100,250); world.CreateBody(circleBd1); 创建step（）函数 function step() world.Step(1.0/60, 5); ctx.clearRect(0, 0, document.body.clientWidth , document.body.scrollHeight); drawWorld(world, ctx); / setTimeout(step,20); / no , canot work well ! setInterval(step,1000/60); 创建 drawWorld（）： 红色部分是我后来自己添加的（不规格，需要在webGames文件夹中放置个image.png图片）function drawWorld(world) for (var j = world.m_jointList; j; j = j.m_next) / drawJoint(j); for (var b = world.m_bodyList; b; b = b.m_next) for (var s = b.GetShapeList(); s