matter实现口香糖机器内点击碰撞动画效果代码-html代码-BFW代码库

matter实现口香糖机器内点击碰撞动画效果代码

代码语言：html

所属分类：动画

代码描述：matter实现口香糖机器内点击碰撞动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<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:50%;
  overflow:hidden;
}
</style>




</head>

<body >
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.16.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
      <script >
var w = 1280;
var h = 720;

//seems a good number of elements that fits most screens
//total number of patterns to create
let TOTAL_MARBLES = Math.floor(w / 40);

let emojis = [
"😀",
"😁",
"😂",
"😃",
"😄",
"😅",
"😆",
"😇",
"😈",
"👿",
"😉",
"😊",
"😋",
"😌",
"😍",
"😎",
"😏",
"😐",
"😑",
"😒",
"😓",
"😔",
"😕",
"😖",
"😗",
"😘",
"😙",
"😚",
"😛",
"😜",
"😝",
"😞",
"😟",
"😠",
"😡",
"😢",
"😣",
"😤",
"😥",
"😦",
"😧",
"😨",
"😩",
"😪",
"😫",
"😬",
"😭",
"😮",
"😯",
"😰",
"😱",
"😲",
"😳",
"😴",
"😵",
"😶",
"😷",
"😸",
"😹",
"😺",
"😻",
"😼",
"😽",
"😾",
"😿",
"🙀"];


//matter js engine
let Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies,
Body = Matter.Body,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse;
let balls = [];
//Random Number generator
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function createSVGArray() {
  // empty out array
  let baseEncodedSvgArray = [];
  for (let i = 0; i < TOTAL_MARBLES; i++) {
    let uniqueID = random(0, 10000);
    let svg = `
      <svg height="145px" width="145px" 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>
		<g id="UrTavla">
    <circle  cx="50%" cy="50%" r="100%">
    </circle>
    <text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy="3em".........完整代码请登录后点击上方下载按钮下载查看