Matter.js之给box添加键盘控制

Matter.js是个开源的2D物理引擎，它提供了一个简单的API，可以让我们以更简单的方式来操作物理引擎。但是却没有提供一个简单的控制器，我们需要自己写一个控制器，来控制画布中的物体运动。本文章基于上次制作的demo，给box添加键盘控制。

思路

代码写的默认变量都是暴露在外面的，因此打算直接用js的按键检测的方式实现键盘控制，这样就可以让我们的box自由移动了。
首先需要认识一下matter.js提供的操作对象的方法

• 力
  每个body都有一个force属性，用来赋予该对象一个力，由于本引擎是个2D引擎，所以用的是vector2，也就是二维向量。
  
  force属性本身的值就是一个vector2类型的，该类型表示一个二维向量，向量有两个属性，x和y，可以表示力的方向，这里如果有什么不懂的建议补一下高中数学平面几何，内容很简单。
  举个例子，我们可以把一个body的force属性设置为：

  body.force = {x: 1, y: 0};

  表示的就是一个平行与x轴且方向为正方向（右侧）的向量，其中y值为1，表示力的大小.

关于平面坐标系，后面会详细解析，在这里只为实现功能
这样的话只要判断按键的代码，然后赋值不同的向量给对象的force属性就可以实现鼠标控制对象运动的功能了。
加下来就是我的代码了，代码比较简单，一目了然

// 简单的按键响应
document.getElementById("root").addEventListener("keydown",function(event){
	event.preventDefault();
	console.log("event",event);
	switch(event.key){
		case "ArrowUp":
		case " ":
		boxB.force = {x:0,y:-0.2}
		break;
		case "ArrowDown":
		boxB.force = {x:0,y:0}
		break;
		case "ArrowLeft":
		boxB.force = {x:-0.1,y:0}
		break;
		case "ArrowRight":
		boxB.force = {x:0.1,y:0}
		break;
	}
})

效果