vue使用box2d-js

Box2D-js是Box2D物理引擎的JavaScript端口，可以在Vue中使用。你需要先安装Box2D-js库。你可以通过npm安装，使用以下命令：

npm install box2d-js

然后在Vue组件中使用Box2D-js，你需要引入Box2D-js库并创建Box2D世界。以下是一个简单的示例：

<template>
  <div>
    <canvas ref="canvas" width="800" height="600"></canvas>
  </div>
</template>

<script>
import { b2Vec2, b2World, b2BodyDef, b2BodyType, b2PolygonShape, b2FixtureDef } from 'box2d-js'

export default {
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')

    // 创建Box2D世界
    const gravity = new b2Vec2(0, 10)
    const world = new b2World(gravity)

    // 创建地面刚体
    const groundBodyDef = new b2BodyDef()
    groundBodyDef.position.Set(400 / 30, 550 / 30)
    const groundBody = world.CreateBody(groundBodyDef)

    const groundShape = new b2PolygonShape()
    groundShape.SetAsBox(400 / 30, 10 / 30)
    const groundFixtureDef = new b2FixtureDef()
    groundFixtureDef.shape = groundShape
    groundFixtureDef.density = 0
    groundFixtureDef.friction = 0.5
    groundFixtureDef.restitution = 0.2
    groundBody.CreateFixture(groundFixtureDef)

    // 创建方块刚体
    const boxBodyDef = new b2BodyDef()
    boxBodyDef.type = b2BodyType.b2_dynamicBody
    boxBodyDef.position.Set(200 / 30, 50 / 30)
    const boxBody = world.CreateBody(boxBodyDef)

    const boxShape = new b2PolygonShape()
    boxShape.SetAsBox(50 / 30, 50 / 30)
    const boxFixtureDef = new b2FixtureDef()
    boxFixtureDef.shape = boxShape
    boxFixtureDef.density = 1
    boxFixtureDef.friction = 0.5
    boxFixtureDef.restitution = 0.2
    boxBody.CreateFixture(boxFixtureDef)

    // 模拟世界
    setInterval(() => {
      world.Step(1 / 60, 10, 10)
      ctx.clearRect(0, 0, canvas.width, canvas.height)

      // 绘制地面
      ctx.beginPath()
      ctx.moveTo(0, 550)
      ctx.lineTo(800, 550)
      ctx.stroke()

      // 绘制方块
      ctx.save()
      ctx.translate(boxBody.GetPosition().x * 30, boxBody.GetPosition().y * 30)
      ctx.rotate(boxBody.GetAngle())
      ctx.fillRect(-50, -50, 100, 100)
      ctx.restore()
    }, 1000 / 60)
  }
}
</script>

这个示例创建了一个Box2D世界并在Canvas上绘制了一个方块和地面。你可以根据自己的需求修改这个示例。