matter十字架跟随鼠标重力模拟小球动画交互效果代码-html代码-BFW代码库

matter十字架跟随鼠标重力模拟小球动画交互效果代码

代码语言：html

所属分类：动画

代码描述：matter十字架跟随鼠标重力模拟小球动画交互效果代码

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

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

<head>
  <meta charset="UTF-8">

  
<style>
body {
	align-items: center;
    background-color: #050A30;
    color: #D4F1F4;
	display: flex;
    flex-direction: column;
    font-family: 'Helvetica', 'Arial', sans-serif;
	justify-content: center;
	margin: 0;
	height: 100vh;
}

canvas {
    border-radius: 4px;
}
</style>


  
</head>

<body >
  <h1>Move the cross with your mouse!</h1>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.19.0.js"></script>
      <script >
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Events = Matter.Events,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Body = Matter.Body,
Collision = Matter.Collision,
Vector = Matter.Vector,
Composite = Matter.Composite;

// create an engine
var engine = Engine.create();
engine.gravity.scale = 0.00005;

// create a renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    wireframes: false,
    background: '#050A30' } });



const borderThickness = 20;
const borderOptions = {
  isStatic: true,
  render: {
    fillStyle: '#D4F1F4' } };


var borderBottom = Bodies.rectangle(400, 600, 800, borderThickness, borderOptions);
var borderTop = Bodies.rectangle(400, 0, 800, borderThickness, borderOptions);
var borderLeft = Bodies.rectangle(0, 300, borderThickness, 600, borderOptions);
var borderRight = Bodies.rectangle(800, 300, borderThickness, 600, borderOptions);

var group = Body.nextGroup(true);
var cross = Composite.create();
var crossOptions = {
  collisionFilter: {
    group: group.........完整代码请登录后点击上方下载按钮下载查看