matterjs实现沙漏动画效果代码-html代码-BFW代码库

matterjs实现沙漏动画效果代码

代码语言：html

所属分类：动画

代码描述：matterjs实现沙漏动画效果代码，显示沙漏通过的粮食量、所用时间和平均每秒通过量。

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

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

<head>
  <meta charset="UTF-8">
  
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>

</head>

<body translate="no">
  <div style="display: flex; align-items: start; scale:0.6; margin-top:-20vh">
	<canvas id="hourglassCanvas" width="400" height="500"></canvas>
	<div id="dataDisplay" style="margin-left: 20px; font-family: Arial; font-size: 26px;">
		<p id="grainsPassed">Number of Grains Passed: 0</p>
		<p id="currentTime">Current Time: 00:00.000</p>
	</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.19.0.js"></script>
  
      <script >
let canvas, ctx;
let grains = [];
const numGrains = 2000;
let grainsPassedCenter = 0;
let timerStarted = false;
let timerEnded = false;
let startTime;
let endTime;
let lastGrainPassedTime = null;

const glassThickness = 6;

window.onload = function () {
  initializeCanvas();
  initializeGrains();
  startTimer();
  animate();
};

function initializeCanvas() {
  canvas = document.getElementById("hourglassCanvas");
  ctx = canvas.getContext("2d");
  canvas.width = 800;
  canvas.height = 1000;
}

function initializeGrains() {
  grains = [];
  grainsPassedCenter = 0;
  const startY = canvas.height / 2 - neckHeight / 2 - glassThickness; // Just above the center
  const endY = 120 + glassThickness;
  const spreadX = hourglassWidth - 2 * glassThickness;

  const cellSize = 4;
  const spatialHash = new Map();

  for (let i = 0; i < numGrains; i++) {
    let x, y;
    let placed = false;
    let attempts = 0;
    const maxAttempts = 1000;

    while (!placed && attempts < maxAttempts) {
      x = canvas.width / 2 + (Math.random() - 0.5) * spreadX;
      y = startY - Math.random() * (startY - endY); // Fill upwards
      attempts++;

      const cellX = Math.floor(x / cellSize);
      const cellY = Math.floor(y / cellSize);
      const cellKey = `${cellX},${cellY}`;

      const nearbyKeys = [
      cellKey,
      `${cellX - 1},${cellY}`,
      `${cellX + 1},${cellY}`,
      `${cellX},${cellY - 1}`,
      `${cellX},${cellY + 1}`,
      `${cellX - 1},${cellY - 1}`,
      `${cellX + 1},${cellY - 1}`,
      `${cellX - 1},${cellY + 1}`,
      `${cellX + 1},${cellY + 1}`];


      let overlaps = false;
      for (const key of nearbyKeys) {
        if (spatialHash.has(key)) {
          for (const otherGrain of spatialHash.get(key)) {
            const dx = x - otherGrain.x;
            const dy = y - otherGrain.y;
            if (dx * dx + dy * dy <.........完整代码请登录后点击上方下载按钮下载查看