matter引擎模拟自由落体及碰撞检测效果-html代码-BFW代码库

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>POPCORN!!!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
      * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

    </style>

</head>
<body translate="no">

<audio class="pop" src="https://freesound.org/data/previews/244/244654_3624044-lq.mp3"></audio>
<audio class="pop" src="https://freesound.org/data/previews/411/411642_5121236-lq.mp3"></audio>
<audio class="pop" src="https://freesound.org/data/previews/245/245645_1038806-lq.mp3"></audio>

<script src='https://cdn.jsdelivr.net/npm/poly-decomp@0.3.0/build/decomp.js'></script>
<script src='https://cdn.jsdelivr.net/npm/matter-js@0.14.2/build/matter.min.js'></script>
<script >
      // Set window height and width variables
let width = window.innerWidth,
height = window.innerHeight;

const audio = document.querySelectorAll("audio");

// This project uses Matter so load in the modules as necessary
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Mouse = Matter.Mouse,
Body = Matter.Body,
Bodies = Matter.Bodies,
Vertices = Matter.Vertices,
Constraint = Matter.Constraint,
Composite = Matter.Composite;

// Create an engine
var engine = Engine.create();

// Create a renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    showAngleIndicator: false,
    wireframes: false,
    background: "#f7f7f8",
    width: width,
    height: height,
    showAngleIndicator: false,
    showCollisions: false,
    showInternalEdges: false,
    showVelocity: false } });



// Add container walls
World.add(engine.world, [
Bodies.rectangle(width / 2, height + 30, width, 60, {
  label: "ground",
  isStatic: true }),

Bodies.rectangle(-30, height / 2, 60, height * 4, {
  label: "left-wall",
  isStatic: true }),

Bodies.rectangle(width + 30, height / 2, 60, height * 4, {
  label: "right-wall",
  isStatic: true })]);



// Define the corn shape with a set of coordinates
let cornSet = [
{ x: 9.006618, y: 13.010806 },
{ x: 10.698117, y: 10.06409 },
{ x: 9.065259, y: 3.235077 },
{ x: 7.587805, y: 1.178564 },
{ x: 5.419502, y: 0.144841 },
{ x: 3.324593, y: 1.059169 },
{ x: 1.773746, y: 3.235077 },
{ x: 0.140884, y: 10.064096 },
{ x: 1.832385, y: 13.010806 },
{ x: 5.419502, y: 13.741506 }];


// Increase the scale of the corn
cornSet = Vertices.scale(cornSet, 3, 3);

// Track number of corn dropped and corn popped
let cornDropped = 0;
let cornPopped = 0;
// Define the function to create a single grain of corn
const corn = function () {
  // Corn colours
  let corn0 = "#e28a27";
  let corn1 = "#ea9d20";
  // Add a random spin to the corn
  let spin = Math.random() * 0.4 - 0.2;
  // Start colour for the corn
  let color = corn0;
  // If the number is divisible by 2 then change the appearance
  if (cornDropped % 2 === 0) {
    color = corn1;
  }
  // Increase the number of corn dropped
  cornDropped++;
  // Create a new grain of corn
  return Bodies.fromVertices(
  width / 2,
  -80,
  cornSet,
  {
    label: "corn",
    // Add some elasticity
    restitution: 0.8,
    friction: 0.05,
    torque: spin,
    render: {
      fillStyle: color,
      strokeStyle: color } },


  true);

};

// Define the function to create popcorn
function makePopcorn(x, y) {
  // Popcorn colours
  let popcorn0 = "#f9e7a4";
  let popcorn1 = "#f1dda6";
  let color = popcorn0;
  // If the number is divisible by 2 then change the appearance
  if (cornPopped % 2 === 0) {
    color = popcorn1;
  }
  var options = {
    render: {
      fillStyle: color,
      strokeStyle: color } };


  // Give the popped corn random sizes
  function randomSize(base) {
    return Math.floor(Math.random() * base) + base;
  }
  // Offset each part of the popcorn by a random amount
  function randomOffset() {
    return Math.ceil(Math.random() * 2);
  }
  // Add a random force to popcorn when it is created
  function randomForce() {
    return Math.random() * 2 - 1;
  }
  // Save each random size as a separate value for later reference
  const topSize = randomSize(18);
  const leftSize = randomSize(18);
  const rightSize = randomSize(18);
  const mainSize = randomSize(20);

  const offset = mainSize / 4;
  // Create new circles based on the randomised values
  const top = Bodies.circle.........完整代码请登录后点击上方下载按钮下载查看