matter.js学习笔记（七）--Composites.car()制造汽车

来源：互联网发布：生化奇兵3:无限知乎编辑：程序博客网时间：2024/05/01 06:17

写在前面

内置Composites.car()函数，可以生成简易小车。由一个矩形和两个圆形构成。两个圆形的圆心在矩形的两条宽的中心。

1.构造小车

这个函数用法较简单。

var audi=Composites.car(300,100,200,50,50);

参数分析。前两个参数为小车中心的x坐标和y坐标。第三个和第四个参数为矩形车身的长和宽。最后的参数为轮子的半径。

2.生成两个斜面与地面

var ground=Bodies.rectangle(800,900,1800,100,{    isStatic:true});var stickA=Bodies.rectangle(400,400,50,700,{    isStatic:true,    angle:-Math.PI*0.4});var stickB=Bodies.rectangle(700,700,50,700,{    isStatic:true,    angle:Math.PI*0.4});

3.最终效果

最终效果

4.代码全文

为了显示出轮子的转动，将渲染器render的options选项的showAngleIndicator设为true。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title>    <script src="../build/matter.js"></script>    <script src="../demo/lib/jquery-1.11.0.min.js"></script>    <style>        body{            margin:0;            overflow: hidden;        }    </style></head><body><script>    var Engine=Matter.Engine,        Render=Matter.Render,        World=Matter.World,        Bodies=Matter.Bodies,        Composites=Matter.Composites,        Constraint=Matter.Constraint,        MouseConstraint=Matter.MouseConstraint;    var engine=Engine.create(),        world=engine.world;    var render=Render.create({        engine:engine,        element:document.body,        options:{            width:$(window).width(),            height:$(window).height(),            wireframes:false,            showAngleIndicator:true        }    });    Engine.run(engine);    Render.run(render);    var mouseConstraint=MouseConstraint.create(engine,{});    var audi=Composites.car(300,100,200,50,50);    //audi.bodies[0].render.showAngleIndicator=true;    var ground=Bodies.rectangle(800,900,1800,100,{        isStatic:true    });    var stickA=Bodies.rectangle(400,400,50,700,{        isStatic:true,        angle:-Math.PI*0.4    });    var stickB=Bodies.rectangle(700,700,50,700,{        isStatic:true,        angle:Math.PI*0.4    });    World.add(world,[ground,stickA,stickB,audi,mouseConstraint]);</script></body></html>

阅读全文

1 0