matterj模拟雪花重力下落堆积效果代码-html代码-BFW代码库

matterj模拟雪花重力下落堆积效果代码

代码语言：html

所属分类：其他

代码描述：matterj模拟雪花重力下落堆积效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  padding:0;
  margin:0;
  box-sizing:border-box;

}

#canvas{
  background: conic-gradient(from .66turn at bottom center, #1C2155, #38446f)

}


#notes hr{
  margin:4px 0px;
  border: 0.25px solid rgba(255,255,255,0.21);
  
}


#notes{
  height: 15vh;
/*   display:none; */
  font-family: 'Montserrat', sans-serif;
  font-weight:300;
  position:absolute;
  max-width:300px;
  z-index:10;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.42);
  padding:8px;
  margin:8px;
  border-radius:4px;
  font-size:0.75rem;
  color:lightgrey;
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.02), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 12px rgba(0,0,0,0.12);
  
}
</style>




</head>

<body  >
  <div id="canvas"></div>

<div id="notes">
  <h3>Snowflake Bentley</h3>
  <hr>
  <quote>Wilson Alwyn Bentley was the first person to take extensive photographs of snowflakes.<p/><p> 
  He was the first to proclaim that no two snowflakes are alike: </p>
<br/><br/><quote>

 
 
</div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.17.1.js"></script>
  
      <script >

//
let canvas = document.getElementById("canvas"),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight;

let init = () => {

  //
  let Engine = Matter.Engine,
  Render = Matter.Render,
  Runner = Matter.Runner,
  Composites = Matter.Composites,
  Common = Matter.Common,
  MouseConstraint = Matter.MouseConstraint,
  Mouse = Matter.Mouse,
  World = Matter.World,
  Bodies = Matter.Bodies;

  // create engine
  let engine = Engine.create(),
  world = engine.world;

  // create renderer
  let render = Render.create({
    element: canvas,
    engine: engine,
    options: {
      width: w,
      height: h,
      showAngleIndicator: false,
      wireframes: false,
      background: '' } });


  //

  Render.run(render);

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

  // add bodies
  // Matter.Composites.stack(xx, yy, columns, rows, columnGap, rowGap, callback) 
  let stack = Composites.stack(0, 0, w / 15, 10, 2, 2, (x, y) => {
    switch (Math.round(Common.random(0, 5))) {
      case 0:
        return Bodies.circle(x, y, 10, { render: {
            sprite: {
              texture: setImgSrc0() } } });




      case 1:
        return Bodies.circle(x, y, 8, { render: {
            sprite: {
              texture: setImgSrc1() } } });




      case 2:
        return Bodies.circle(x, y, 8, { render: {
            sprite: {
              texture: setImgSrc2() } } });




      case 3:
        return Bodies.circle(x, y, 8, { render: {
            sprite: {
              texture: setImgSrc3() } } });



      case 4:
        return Bodies.circle(x, y, 8, { render: {
            sprite: {
              texture: setImgSr.........完整代码请登录后点击上方下载按钮下载查看