wsd1 · December 15, 2020 12:18
diff --git a/test.html b/test.html
 <!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="https://brm.io/matter-js/demo/js/lib/decomp.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.js"></script>
    <script src="http://raw.githack.com/liabru/matter-attractors/master/build/matter-attractors.min.js"></script>
    <script type="text/javascript">

        Matter.use('matter-attractors');

        const COLOR = {
            WINDOW: '#f8f9fa',
            BAR: '#868e96',
            DOT: '#f8f9fa',
            HEADER: '#868e96',
            TEXT: '#ced4da',
            SOCIAL: '#f06595',
            IMAGE: '#22b8cf'
        };
        window.onload = function () {
            var Vertices = Matter.Vertices;
            var Body = Matter.Body;
            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();//创建引擎
            engine.world.gravity.y = 0.0;
            //engine.world.gravity.x = 0.5;

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

            /**添加鼠标控制
             * 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 star = Vertices.fromPath('0 0 0 300 150 300 150 280 20 280 20 20 280 20 280 280 170 280 170 300 300 300 300 0'), //50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38
                concave = Bodies.fromVertices(100, 200, star, {
                    frictionAir: 0.1,
                    plugin: {
                        attractors: [
                            function (bodyA, bodyB) {
                                var force = {
                                    x: (bodyA.position.x - bodyB.position.x) * 1e-5,
                                    y: (bodyA.position.y - bodyB.position.y) * 1e-5,
                                };

                                // apply force to both bodies
                                Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force));
                                Body.applyForce(bodyB, bodyB.position, force);
                            }
                            /*
                            MatterAttractors.Attractors.gravity
                            */
                        ]
                    }
                }, true);

            var boxA = Bodies.rectangle(250, 100, 80, 80, {
                frictionAir: 0.1
            });//绘制矩形。
            var circle = Bodies.circle(300, 50, 25, {
                frictionAir: 0.1
            });//绘制圆。（300,50）表示圆心坐标点，25 表示半径
            var polygon = Bodies.polygon(350, 100, 5, 25, {
                frictionAir: 0.1
            });//绘制多边形。(350,100)表示多边形中心点，5表示多边形边数，25表示半径
            var trapezoid = Bodies.trapezoid(500, 100, 50, 80, 1, {
                frictionAir: 0.1
            });//绘制梯形。(500,100)表示梯形中心坐标，50表示宽，80表示高，1表示斜坡率(slope)


            //Body.setMass(concave, 10000);

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

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

 <body>
 </body>

 </html>
	<!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="https://brm.io/matter-js/demo/js/lib/decomp.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.js"></script>
	<script src="http://raw.githack.com/liabru/matter-attractors/master/build/matter-attractors.min.js"></script>
	<script type="text/javascript">

	Matter.use('matter-attractors');

	const COLOR = {
	WINDOW: '#f8f9fa',
	BAR: '#868e96',
	DOT: '#f8f9fa',
	HEADER: '#868e96',
	TEXT: '#ced4da',
	SOCIAL: '#f06595',
	IMAGE: '#22b8cf'
	};
	window.onload = function () {
	var Vertices = Matter.Vertices;
	var Body = Matter.Body;
	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();//创建引擎
	engine.world.gravity.y = 0.0;
	//engine.world.gravity.x = 0.5;

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

	/**添加鼠标控制
	* 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 star = Vertices.fromPath('0 0 0 300 150 300 150 280 20 280 20 20 280 20 280 280 170 280 170 300 300 300 300 0'), //50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38
	concave = Bodies.fromVertices(100, 200, star, {
	frictionAir: 0.1,
	plugin: {
	attractors: [
	function (bodyA, bodyB) {
	var force = {
	x: (bodyA.position.x - bodyB.position.x) * 1e-5,
	y: (bodyA.position.y - bodyB.position.y) * 1e-5,
	};

	// apply force to both bodies
	Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force));
	Body.applyForce(bodyB, bodyB.position, force);
	}
	/*
	MatterAttractors.Attractors.gravity
	*/
	]
	}
	}, true);

	var boxA = Bodies.rectangle(250, 100, 80, 80, {
	frictionAir: 0.1
	});//绘制矩形。
	var circle = Bodies.circle(300, 50, 25, {
	frictionAir: 0.1
	});//绘制圆。（300,50）表示圆心坐标点，25 表示半径
	var polygon = Bodies.polygon(350, 100, 5, 25, {
	frictionAir: 0.1
	});//绘制多边形。(350,100)表示多边形中心点，5表示多边形边数，25表示半径
	var trapezoid = Bodies.trapezoid(500, 100, 50, 80, 1, {
	frictionAir: 0.1
	});//绘制梯形。(500,100)表示梯形中心坐标，50表示宽，80表示高，1表示斜坡率(slope)


	//Body.setMass(concave, 10000);

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

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

	<body>
	</body>

	</html>