js实现canvas粒子碰撞运动效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js实现canvas粒子碰撞运动效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  overflow: hidden;
  background: #111;
  color: #fff;
  font-family: monospace;
  font-size:16px;
}

.wrapper {
  position: relative;
}

.dimensions {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #fff;
  color: #222;
  padding: 10px;
  border-radius: 5px;
  opacity: 0.5;
}
</style>

</head>

<body translate="no">
  <div id="canvas-wrapper" class="wrapper"><canvas id="board" width="1536" height="294"></canvas></div>

  
      <script >
function main()
{

  // Grab the window width and height
  w = window.innerWidth;
  h = window.innerHeight;

  // Block variables
  number_of_blocks = 200;
  block_size = 8;
  block_velocity = 6;

  // Add the canvas element to the dom and initiate
  var canvas_wrapper = document.getElementById('canvas-wrapper');
  canvas_wrapper.innerHTML = '';
  canvas_wrapper.innerHTML += '<canvas id="board" width="' + w + '" height="' + h + '"></canvas>';
  // For debugging, show window width and height
  //canvas_wrapper.innerHTML += '<div class="dimensions">' + w + 'px x ' + h + 'px</div>';
  var canvas = document.getElementById('board');
  c = canvas.getContext('2d');

  // Create the blocks!
  createBlocks();

  // Create array for debris
  debris = [];

  // Create the render loop
  renderer = setInterval(function ()
  {
    render();
  }, 40);
}

function createBlocks()
{
  blocks = [];
  for (i = 0; i < number_of_blocks; i++)
  {
    // Decide on a starting point for each block
    x = Math.floor(Math.random() * (w - block_size * 2 - block_size + 0)) + block_size;
    y = Math.floor(Math.random() * (h - block_size * 2 - block_size + 0)) + block_size;

    // Give each block some directions and speed
    dx = Math.floor(Math.random() * block_velocity + 1);
    dy = Math.floor(Math.random() * block_velocity + 1);

    // Random chance of horizontal direction switch
    if (Math.floor(Math.random() * 2) == 1)
    {
      dx = -dx;
    }

    // Random chance of vertical direction switch
    if (Math.floor(Math.random() * 2) == 1)
    {
      dy = -dy;
    }

    // Add the blocks to array
    blocks[blocks.length] = { 'id': i, 'x': x, 'y': y, 'dx': dx, 'dy': dy };
  }
}

// Draw the blocks on the canvas
function drawBlocks()
{
  for (i = 0; i < blocks.length; i++)
  {
    c.fillStyle = 'rgba(255,255,255, 0.9)';
    c.fillRect(blocks[i].x, blocks[i].y, block_size, block_size);
  }
}

// Update the block positions on each loop
function moveBlocks()
{
  for (i = 0; i < blocks.length; i++)
  {
    // Change direction flag
    changed_direction = false;

    // For a  50/50 chance of direction change
    // when block reaches canvas boundary
    r = Math.floor(Math.random() * 2 + 1);

    // Test if block is at a horizontal boundary
    // If true, reverse the horizontal direction
    if (blocks[i].x <= 0)
    {
      blocks[i].x = 0;
      changed_direction = true;
      blocks[i].dx = -blocks[i].dx;
      // Test against 50/50 chance of vertical direction change
      if (r == 2)
      {
        blocks[i].dy = -blocks[i].dy;
      }
    }

    if (blocks[i].x >= w - block_size)
    {
      blocks[i].x = w - block_size;
      changed_direction = true;
      blocks[i].dx = -blocks[i].dx;
      // Test against 50/50 chance of vertical direction change
      if (r == 2)
      {
        blocks[i].dy = -blocks[i].dy;
      }
    }

    // Test if block is at a vertical boundary
    // If true, reverse the vertical direction
    if (blocks[i].y <= 0)
    {
      blocks[i].y = 0;
      changed_direction = true;
      blocks[i].dy = -blocks[i].dy;
      // Test against 50/50 chance of horizontal direction change
      if (r == 2)
      {
        blocks[i].dx = -blocks[i].dx;
      }
    }

    if (blocks[i].y >= h - block_size)
    {
      blocks[i].y = h - block_size;
      changed_direction = true;
      blocks[i].dy = -blocks[i].dy;
      // Test against 50/50 chance of horizontal direction change
      if (r == 2)
      {
        blocks[i].dx = -blocks[i].dx;
      }
    }

    // Change random number range to 1 - 100
    r = Math.floor(Math.random() * 100 + 1);

    // Test against previous direction change and
    // small odds to 'randomly' change the vertical
    // direction anywhere on the board.	
    if (r <= 3 && !changed_direction)
    {
      blocks[i].dy = -blocks[i].dy;
    }

    // Test against previous direction change and
    // small odds to 'randomly' change the horizontal
    // direction anywhere on the boa.........完整代码请登录后点击上方下载按钮下载查看