p5+matter实现拖动薯片到油锅里炸一炸交互效果代码-html代码-BFW代码库

p5+matter实现拖动薯片到油锅里炸一炸交互效果代码

代码语言：html

所属分类：拖放

代码描述：p5+matter实现拖动薯片到油锅里炸一炸交互效果代码，拖动试试。

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


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

<head>

  <meta charset="UTF-8">

 
  
<style>
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #fee096;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.height-warning {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 10;
}

@media(max-height: 499px) {
  .height-warning {
    opacity: 1;
  }
}

.instructions {
  display: none;
  line-height: 26px;
}

.instructions a {
  color: #7f6e4a;
}

@media(min-width: 768px) {
  .instructions {
    z-index: 5;
    position: absolute;
    top: 20px;
    left: 20px;
    color: #b79e6a;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.010em;
  }
}
</style>




</head>

<body >

  <div class="height-warning"></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-0.5.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.17.1.js"></script>
      <script>
// Module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body,
    Constraint = Matter.Constraint,
    Composite = Matter.Composite,
    Composites = Matter.Composites,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    Events = Matter.Events,
    Vertices = Matter.Vertices;

var engine = Engine.create();
var world = engine.world;

var floor;
var cup;
var cupLeft;
var cupRight;
var cupHandle;

var chain = null;
var heatLines = [];

var distanceToCup = 10000;
var distance.........完整代码请登录后点击上方下载按钮下载查看