Day29 - 物理模拟 - 让物件自然的落下碰撞 (使用Matter.js)

Matter.js 使用

• 引用 Matter.js 函式库

  var s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js"
  document.head.appendChild(s);
  
  

• 核心概念

  • Engine 模拟引擎
  • Bodies 物体与相关函数
    • 有速度、位置、角度、外型等属性
    • Bodies.rectangle(x,y,宽,高,[其他参数])：建立方块
    • color：设定颜色
    • isStatic：是否为固定物件
  • World 整体环境
    • 包含所有物体
  • Constraint 限制条件 (距离 弹性…等)

• 建立基础环境

  function setup(){
  // 引用 Engine, Bodies 与 Worldlet Engine = Matter.Engine
      let Bodies = Matter.Bodies
      let World = Matter.World
  
  // 建立方块物件let boxA )
  
  // 建立地板，并设定 isStatic 为 true，让他固定不动let ground = Bodies.rectangle(width/2,height+30,width,60,{
  	isStatic: true
  })
  
  // 将物件加入到物理引擎内
      World.add(engine.world, boxA)
      World.add(engine.world, ground)
  
  // 初始化物理引擎
      engine = Engine.create()
  }
  
  function draw(){
  // 绘制出物件
  
      begineShape()
      for(let vert of boxA.vertices){
          vertex(vert.x, vert.y)
      }
      endShape()
  
  // 绘制出地板
      begineShape()
      for(let vert of ground.vertices){
          vertex(vert.x, vert.y)
      }
      endShape()
  }
  
  

• 将常用的建立方块包装成函式

  function generateNewBox(){
      let {Engine,Bodies,World,Constraint} = Matter
      let sz = random([10,20,40,60])
      let boxA = Bodies.polygon(
          random(width),random(height/3),4,sz)
      boxA.color = random(colors)
      boxA.sz = sz
      boxA.char = random("ABC".split(""))
      boxes.push(boxA)
  
      var constraint = Constraint.create({
          pointA: {x: width/2,y: 50},
          bodyB: boxA,
          length: random(50,width/2),
          stiffness: 0.01,
          damping: 0.05
      })
  
      constraints.push(constraint)
      World.add(engine.world,constraint)
  
      World.add(engine.world,boxA)
  }
  
  

• 增加限制（constraints）

  • 增加内建的 MouseConstraint

  // 将 Matter 的 Mouse 物件建立在 canvas 的 element 上var mouse = Mouse.create(canvas.elt)
  mouseConstraint = MouseConstraint.create(engine,{
  	mouse: mouse
  })
  World.add(engine.world,mouseConstraint)
  
  

  • 建立其他的 Constrants

      var constraint = Constraint.create({
          pointA: {x: width/2,y: 50},
          bodyB: boxA,
          length: random(50,width/2),
          stiffness: 0.01,//弹性damping: 0.05// 阻尼
      })
  
      constraints.push(constraint)
      World.add(engine.world,constraint)
  
  

• 直接设定物件的状态

  • Body.setVelocity(物件,参数)
  • Body.setPosition(物件,参数)
  • Body.setStatic(物件,参数)

• 绑定事件（Events）

  Events.on(engine,'collisionStart',function(event){
  	for(let pair of event.pairs){
  // console.log(pair)// clickSound.play()
  	}
  })