Matter引擎实现香蕉动画效果-html代码-BFW代码库

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.8 13.2 84.2 16.2 85.8 29.2 75.2 48 55.2 60.4 31.6 63.8 7.4 58.2");


// Define how to create a new banana object
const banana = function (xPos, yPos) {
  // Add a subtle random spin
  let spin = Math.random() * 0.4 - 0.2;
  return Bodies.fromVertices(
  xPos,
  yPos,
  bananaSet,
  {
    // Add a label to check for collisions
    label: "banana",
    // Add some elasticity for bouncy bananas
    restitution: 1,
    // Zero the frictions for slippery bananas
    friction: 0,
    frictionAir: 0,
    // Add the initial rotating force
    torque: spin,
    // Add a little downward force to minimise objects sticking together
    force: { x: 0, y: 0.02 },
    // Render the banana
    render: {
      fillStyle: "#ffe417",
      strokeStyle: "#ffe417" } },


  true);

};

// To avoid adding too many bananas
function bananaBalancer() {
  // Check the total objects in the world minus the 3 walls (and mouse influencer but remembering that the count starts at 0)
  let total = Composite.allBodies(engine.world).length - 3;
  // Make the comparison
.........完整代码请登录后点击上方下载按钮下载查看