canvas实现鼠标交互小行星陨石移动动画效果代码-html代码-BFW代码库

canvas实现鼠标交互小行星陨石移动动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现鼠标交互小行星陨石移动动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
</head>

<body translate="no">
  
  
      <script  >
////////////////////////////////////////////////////////////////////////////////
console.clear();

let canvas, canvasCtx;
let canvasSize = [0, 0],scale = 1;
let state;

main();

////////////////////////////////////////////////////////////////////////////////
function main() {
  canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  document.body.style.margin = '0';
  canvas.style.display = 'block';

  canvasCtx = canvas.getContext('2d');

  state = createState();

  setupControls();

  requestAnimationFrame(mainLoop);

  function mainLoop() {
    tick();
    requestAnimationFrame(mainLoop);
  }
}

function setupControls() {
  canvas.addEventListener('mousemove', e => {
    const x = e.offsetX - canvasSize[0] / 2;
    const y = e.offsetY - canvasSize[1] / 2;
    const m = 3;
    state.vel = [x * m, y * m];
  });
}

function createState() {
  const state = {
    time: 0,
    timeDelta: 1 / 60,
    asteroidLimit: 50,
    spawnProb: 0.0001,
    nToSpawn: 0,
    asteroids: [],
    vel: [8, 128] };

  return state;
}

function tick() {
  checkResizeAndInit();
  canvasCtx.fillStyle = '#000000';
  canvasCtx.fillRect(0, 0, canvasSize[0], canvasSize[1]);

  state.time += state.timeDelta;

  respawnAsteroids();
  moveAsteroids();

  drawAsteroids();
}

function checkResizeAndInit() {
  if (
  window.innerWidth === canvasSize[0] &&
  window.innerHeight === canvasSiz.........完整代码请登录后点击上方下载按钮下载查看