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

本文最后更新于:1 年前

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

思路

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


  • 每个body都有一个force属性,用来赋予该对象一个力,由于本引擎是个2D引擎,所以用的是vector2,也就是二维向量。
    force属性
    force属性本身的值就是一个vector2类型的,该类型表示一个二维向量,向量有两个属性,x和y,可以表示力的方向,这里如果有什么不懂的建议补一下高中数学平面几何,内容很简单。
    举个例子,我们可以把一个body的force属性设置为:
    1
    body.force = {x: 1, y: 0};
    表示的就是一个平行与x轴且方向为正方向(右侧)的向量,其中y值为1,表示力的大小.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 简单的按键响应
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;
}
})

效果

运行效果