matterjs模拟物理落体搅拌碰撞动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：matterjs模拟物理落体搅拌碰撞动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - Time</title>
  
  
  
  
<style>
body {
  text-align: center;
  margin: 0;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
	background:#000;
}
canvas {
  margin: -5px -5px auto;
	background:#000;
}
.marble{
  border-radius:0%;
  overflow:hidden;
}

.tee{
	background-color:#fff;
}
.tee:after{
	content:'GG'
}
</style>



</head>

<body >
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
      <script  >
let w = window.innerWidth + 5;
let h = window.innerHeight + 6;
let TOTAL_MARBLES = Math.floor(w / 10);
//matter js engine
let Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
Vector = Matter.Vector;
let engine = Engine.create();
let render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: w,
    height: h,
    wireframes: false,
    background: "radial-gradient(#123456, #000, #000)" } });



let balls = [];
let catapults = [];
let risers = [];
let allMarbles = [];
//Random Number generator
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function createMarbleBackground(num, radius) {
  // empty out array
  let baseEncodedSvgArray = [];
  for (let i = 0; i < num; i++) {
    let uniqueID = random(0, 10000);
    let svg = `
      <svg height="${radius * 2}px" width="${radius * 2}px" style="overflow:hidden; border-radius:50%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(100,100,100);stop-opacity:0.5" />
      <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
    </radialGradient>
  </defs>
  <filter id="filter${uniqueID}">
    <feTurbulence baseFrequency="${
    random(1, 10000) / 100000
    }" numOctaves="${random(1, 9)}" seed="${random(1, 10000)}"/>
    <feColorMatrix values="		
    ${random(-10, 20) / 10}	${random(-10, 20) / 10} ${random(-10, 20) / 10} ${
    random(-10, 20) / 10
    } ${random(-20, 20) / 10} 		
    ${random(-10, 20) / 10} ${random(-10, 20) / 10} ${random(-10, 20) / 10} ${
    random(-10, 20) / 10
    } ${random(-20, 20) / 10}		
    ${random(-10, 20) / 10} ${random(-10, 20) / 10} ${random(-10, 20) / 10} ${
    random(10, 20) / 10
    } ${random(-20, 20) / 10}			
    ${random(-20, 20) / 10}	${random(-20, 20) / 10}	${random(-20, 20) / 10}	${
    random(-20, 20) / 10
    }	${random(-20, 20) / 10}			
    "/>
    </filter>
    <circle class="whiteBG" cx="50%" cy="50%" r="100%" fill="rgb(${random(
    0,
    255)
    },${random(0, 255)},${random(0, 255)})" />
    <circle class="patternFill" cx="50%" cy="50%" r="100%"  filter="url(#filter${uniqueID})"/>
		<text class='tee' text-anchor='middle' x="50%" y="75%">O</text>
</svg>
    `;
    let frag = document.createRange().createContextualFragment(svg);
    // pass node into serializer
    let s = new XMLSerializer().serializeToString(frag);
    // create base-encoded svg
    let marble = "data:image/svg+xml;base64," + window.btoa(s);
    // push marbles into array
    baseEncodedSvgArray.push(marble);
  }
  // gimme dat array
  return baseEncodedSvgArray;
}

function createGumballWorld() {
  w = window.innerWidth + 5;
  h = window.innerHeight + 6;

  //matter js engine
  Engine = Matter.Engine;
  Render = Matter.Render;
  World = Matter.World;
  Bodies = Matter.Bodies;
  Body = Matter.Body;
  Composite = Matter.Composite;
  Composites = Matter.Composites;
  Constraint = Matter.Constraint;
  MouseConstraint = Matter.MouseConstraint;
  Mouse = Matter.Mouse;
  Vector = Matter.Vector;

  engine = Engine.create();

  render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: w,
      height: h,
      wireframes: false,
      background: "radial-gradient(#123456, #000, #000)" } });




  let options3 = {
    friction: 0,
    restitution: 0.95,
    isStatic: true,
    render: { fillStyle: '#123456', strokeStyle: '#123456', lineWidth: 0 } };

  //Extra thick so the frame rate doesn't allow it to escape
  var topWall = Bodies.rectangle(w / 2, -220, w, 400, { isStatic: true });
  var leftWall = Bodies.rectangle(-200, h.........完整代码请登录后点击上方下载按钮下载查看