2019最新妙堂Vue.JS进阶深造高级课程

最新推荐文章于 2024-06-27 14:31:41 发布

weixin_44241283

最新推荐文章于 2024-06-27 14:31:41 发布

阅读量547

点赞数

本文链接：https://blog.csdn.net/weixin_44241283/article/details/85859329

版权

Matter.Bodies 内置刚体
1、物体或者叫刚体，在物理引擎里特指坚硬的物体，具有固定的形状，不能形变。刚体可以用于表示一个箱子、一个球或是一块木头，每个物体都有自己的物理属性，如质量、速度、摩擦力、角度等，还可以设置刚体的标记。

2、Matter.Bodies 模块中内置了几种常见的刚体，如矩形 Matter.rectangle、多边形 Matter.polygon、圆形 Matter.circle 、梯形 Matter.trapezoid 等。

3、Matter.Bodies 官网API：http://brm.io/matter-js/docs/classes/Bodies.html#method_fromVertices

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Matter-JS</title>
<script src="../js/matter_0.14.2.js"></script>
<script type="text/javascript">
window.onload = function () {
var Engine = Matter.Engine;//引擎.引擎模块包含创建和操作引擎的方法
var Render = Matter.Render;//基于HTML5画布的渲染器
var World = Matter.World;//演出舞台. Matter.js 中任何的物体都需要一个舞台/容器，而存放这些物体的地方，则称之为World(世界)
var Bodies = Matter.Bodies;//用于创建各种形状的物体，物体必须添加到Wolrd中，然后由引擎运行世界

var engine = Engine.create();//创建引擎
//创建render(渲染器)：渲染上面创建好的物理引擎(engine)，渲染对象是html网页的body
var render = Render.create({
engine: engine,
element: document.body,
options: {//指定舞台大小
width: 800,
height: 600,
showVelocity: true//showVelocity表示显示速度
}
});

/**添加鼠标控制
* Matter.MouseConstraint.create(engine, options)
* 第一个参数是引擎 engine，第二个参数是一个json对象，用于设置属性，
*/
var mouseConstraint = Matter.MouseConstraint.create(engine, {});
/**创建刚体
* Bodies.rectangle = function(x, y, width, height, options)
* x,y 分别表示矩形中心点的坐标，坐标的原点(0,0)在 Canvas(画布)的左上角
* width,height 分别表示矩形的宽和高
* options：描述矩形的参数，是一个 json 对象
* @type {body}
*/
var boxA = Bodies.rectangle(250, 0, 80, 80);//绘制矩形。
var circle = Bodies.circle(300, 50, 25);//绘制圆。（300,50）表示圆心坐标点，25 表示半径
var polygon = Bodies.polygon(350, 100, 5, 25);//绘制多边形。(350,100)表示多边形中心点，5表示多边形边数，25表示半径
var trapezoid = Bodies.trapezoid(500, 100, 50, 80, 1);//绘制梯形。(500,100)表示梯形中心坐标，50表示宽，80表示高，1表示斜坡率(slope)

//创建矩形作为陆地,isStatic=true 表示物体静止
var ground = Bodies.rectangle(400, 570, 800, 60, {isStatic: true});

//将所有物体添加到世界中
World.add(engine.world, [boxA, circle, polygon, trapezoid, mouseConstraint, ground]);
Engine.run(engine);//运行引擎
Render.run(render);//运行渲染器
}
</script>
</head>
<body>
</body>
</html>