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 distanceFromCup = {size: 500, towards: true};
var firstAnimation = {max: 241, min: 171, percent: 1};
var secondAnimation = {max: 170, min: 100, percent: 0};
var thirdAnimation = {max: 241, min: 100, percent: 0};



// ---------------
// Box Constructor
// ---------------

function Box(x, y, w, h, options) {
  this.w = w;
  this.h = h;
  this.body = Bodies.rectangle(x, y, w, h, options);

  World.add(world, this.body);
}



//
function calculateLinks() {
  // 77 is the offset from the bottom and the top
  // 200 is the amount of space we want between the marshmallow and cup when hanging
  var spaceLeft = window.innerHeight - (125 + 100 + 77 + 200);
  var links = spaceLeft / 26;

  if(links < 3) {
    return Math.ceil(3);
  } else if(links > 6) {
    return Math.ceil(6);
  } else {
    return Math.ceil(links);
  }
}



// ------------
// Create chain
// ------------

function CreateChain(x, y, chainLinks, linkLength) {
  this.x = x;
  this.y = y;
  this.hinges = [];
  this.constraints = [];
  this.chainLinks = chainLinks;
  this.linkLength = linkLength;
}

CreateChain.prototype.remove = function() {
  for(let i = 0; i < this.constraints.length; i++) {
    World.remove(world, this.constraints[i]);
  }

  chain = null;
};

CreateChain.prototype.init = function() {
  // Create hinges
  for(var i = 0; i < th.........完整代码请登录后点击上方下载按钮下载查看