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

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

代码语言：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,
Ve.........完整代码请登录后点击上方下载按钮下载查看