Matter引擎实现香蕉动画效果

代码语言:html

所属分类:动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
      * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

    </style>

</head>
<body translate="no">
<script src='http://repo.bfw.wiki/bfwrepo/js/decomp.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/matter.min.js'></script>
<script>
      // Set window height and width variables
let width = window.innerWidth,
height = window.innerHeight;

// This project uses Matter so load in the modules as necessary
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
World = Matter.World,
Mouse = Matter.Mouse,
Body = Matter.Body,
Bodies = Matter.Bodies,
Vertices = Matter.Vertices,
Composite = Matter.Composite;

// Create an engine
var engine = Engine.create();

// Create a renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    showAngleIndicator: false,
    wireframes: false,
    background: "#f7f7f8",
    width: width,
    height: height,
    showAngleIndicator: false,
    showCollisions: false,
    showInternalEdges: false,
    showVelocity: false } });



// Set the global gravity variables to be slower than normal
engine.world.gravity.y = 0.05;
engine.world.gravity.x = 0;
engine.world.gravity.scale = 0.001;

// Create runner
const runner = Runner.create();
Runner.run(runner, engine);

// Add container walls
World.add(engine.world, [
Bodies.rectangle(width / 2, height + 150, width * 2, 60, {
  label: "ground",
  isStatic: true,
  render: {
    visible: false } }),


Bodies.rectangle(-30, height / 2, 60, height * 2, {
  label: "left-wall",
  isStatic: true,
  render: {
    visible: false } }),


Bodies.rectangle(width + 30, height / 2, 60, height * 2, {
  label: "right-wall",
  isStatic: true,
  render: {
    visible: false } })]);




// Define the banana shape with a set of coordinates
const bananaSet = Vertices.fromPath(
"0 47.6 1.6 41.2 14.4 38.6 36.8 39.2 55.2 33.6 71.2 20.2 74.8 14.2 72.6 3.2 79.8 0 77.2 4.2 78.........完整代码请登录后点击上方下载按钮下载查看

网友评论0