matter实现鼠标点击喷射箭头自由落地运动动画效果代码-html代码-BFW代码库

matter实现鼠标点击喷射箭头自由落地运动动画效果代码

代码语言：html

所属分类：动画

代码描述：matter实现鼠标点击喷射箭头自由落地运动动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
	min-height:100vh;
	min-width:100vw;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-items:center;
	align-content:center;
	justify-content:center;
	background:white;
	font-family:"Montserrat",sans-serif;
	font-size:1.5em;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
#besideMouse {
	z-index:10;
	top:-1000px;
	position:fixed;
	font-weight:bold;
	font-size:1rem;
	text-align:center;
	opacity:.75;
	transform-origin:left center;
	transform:rotate(33deg);
	pointer-events:none;
	transition:opacity .5s
}
#besideMouse.hidden {
	opacity:.2
}
h1 {
	color:rgba(0,0,0,0.75);
	text-stroke:5px black;
	padding:0;
	pointer-events:none
}
h1 span.struck {
	color:rgba(0,0,0,0.95)
}
hr {
	color:rgba(0,0,0,0.75);
	border:0;
	border-top:1px solid;
	background:0
}
p {
	color:rgba(0,0,0,0.45)
}
a {
	color:#F7ACCF;
	text-decoration:none
}
a span.struck {
	color:#CB8DAA
}
.smaller {
	font-size:.65em
}
em {
	opacity:.5
}
.aside {
	margin-top:2rem
}
.aside a {
	color:#5DD9C1
}
.aside span.struck {
	color:#33776A
}
#world {
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	pointer-events:none
}
.title .wrapNode {
	display:inline
}
.title span {
	line-height:.5em;
	display:inline-block;
	transform:translateY(0);
	transition:transform .15s,color .25s
}
.title span.struck {
	transform:translateY(0.2em)
}

    </style>

</head>

<body>
    <div id="world"></div>
    <p id="besideMouse">click<br>me!</p>
    <div class="wrapper">
        <h1>
            <div class="title">Eric D'Addio</div><small class="title">Creative Developer</small></h1>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.js"></script>

    <script>
        const cursorSprite = "https://image.flaticon.com/icons/png/128/587/587376.png";
    
    // module aliases
    var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body;
    
    // create an engine
    var engine = Engine.create();
    
    // create a renderer
    var canvas = document.getElementById("world");
    var render = Render.create({
      element: canvas,
      engine: engine,
      options: {
        width: canvas.offsetWidth,
        height: canvas.offsetHeight,
        background: "transparent",
        wireframes: false,
        showAngleIndicator: false } });
    
    
    
    const offset = -50,
    w = 5;
    
    let bounds = [
    [offset, offset, w, canvas.offsetHeight * 2.5],
    [canvas.offsetWidth - offset, -w, w, canvas.offsetHeight * 2.5],
    [offset, canvas.offsetHeight - offset, canvas.offsetWidth * 2.5, w]].
    map(bound => {
      return Bodies.rectangle(...bound);
    });
    
    bounds.forEach(bound => {
      bound.label = "bound";
      Body.setStatic(bound, true); // has to be set in post for collision detection to work
    });
    
    /**
        Get letters as boxes
    */
    function wrapTextNode(textNode) {
      let wrapNode = document.createElement("div");
      wrapNode.classList.add("wrapNode");
      let newTextNode = document.createTextNode(textNode.textContent);
      wrapNode.appendChild(newTextNode);
      textNode.parentNode.replaceChild(wrapNode, textNode);
    }
    
    (function () {
      let id = 0;
      document.querySelectorAll(".title").forEach(title => {
        title.childNodes.forEach(node => {
          if (node.nodeType == Node.TEXT_NODE) {
            wrapTextNode(node);
          }
        });
    
        title.childNodes.forEach(node => {
          let newHTML = "";
          let putty = node.innerHTML;
    
          putty.split("").forEach(l => {
            if (l == " &quo.........完整代码请登录后点击上方下载按钮下载查看