canvas实现空间跳跃时空旅行穿越粒子光效果代码-html代码-BFW代码库

canvas实现空间跳跃时空旅行穿越粒子光效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现空间跳跃时空旅行穿越粒子光效果代码，点击鼠标左键不放可体验这种效果。

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

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

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

    <style>
        body {
      background: radial-gradient(#000, #111), #000;
      min-height: 100vh;
    }
    canvas {
      position: fixed;
      height: 100vh;
      width: 100vw;
    }
    </style>

</head>

<body>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>



    <script>
        function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const { TweenMax, _ } = window;
   
    const randomInRange = (max, min) =>
    Math.floor(Math.random() * (max - min + 1)) + min;
    const ACTIVE_PROBABILITY = 0;
    const BASE_SIZE = 1;
    const VELOCITY_INC = 1.01;
    const VELOCITY_INIT_INC = 1.025;
    const JUMP_VELOCITY_INC = 1.25;
    const JUMP_SIZE_INC = 1.15;
    const SIZE_INC = 1.01;
    const RAD = Math.PI / 180;
    const WARP_COLORS = [
    [197, 239, 247],
    [25, 181, 254],
    [77, 5, 232],
    [165, 55, 253],
    [255, 255, 255]];
    

    class Star {
   
      constructor() {_defineProperty(this, "STATE", { alpha: Math.random(), angle: randomInRange(0, 360) * RAD });_defineProperty(this, "reset", () => {const angle = randomInRange(0, 360) * (Math.PI / 180);const vX = Math.cos(angle);const vY = Math.sin(angle);const travelled = Math.random() > 0.5 ? Math.random() * Math.max(window.innerWidth, window.innerHeight) + Math.random() * (window.innerWidth * 0.24) : Math.random() * (window.innerWidth * 0.25);this.STATE = { ...this.STATE, iX: undefined, iY: undefined, active: travelled ? true : false, x: Math.floor(vX * travelled) + window.innerWidth / 2, vX, y: Math.floor(vY * travelled) + window.innerHeight / 2, vY, size: BASE_SIZE };});
        this.reset();
      }}
    
    
    const generateStarPool = size => new Array(size).fill().map(() => new Star());
    
    // Class for the actual app
    // Not too much happens in here
    // Initiate the drawing process and listen for user interactions 👍
    class JumpToHyperspace {

    
      constructor() {_defineProperty(this, "STATE", { stars: generateStarPool(300), bgAlpha: 0, sizeInc: SIZE_INC, velocity: VELOCITY_INC });_defineProperty(this, "canvas", document.createElement('canvas'));_defineProperty(this, "context", this.canvas.getContext('2d'));_defineProperty(this, "render",
    
    
    
    
    
        () => {
          const {
            STATE: {
              bgAlpha,
              velocity,
              sizeInc,
              initiating,
              jumping,
              stars },
    
            context,
            render } =
          this;
          // Clear the canvas
          context.clearRect(0, 0, window.innerWidth, window.innerHeight);
          if (bgAlpha > 0) {
            context.fillStyle = `rgba(31, 58, 157, ${bgAlpha})`;
            context.fillRect(0, 0, window.innerWidth, window.innerHeight);
          }
          // 1. Shall we add a new star
          const nonActive = stars.filter(s => !s.STATE.active);
          if (!initiating && nonActive.length > 0) {
            // Introduce a star
            nonActive[0].STATE.active = true;
          }
          // 2. Update the stars and draw them.
          for (const star of stars.filter(s => s.STATE.active)) {
            const { active, x, y, iX, iY, iVX, iVY, size, vX, vY } = star.STATE;
            // Check if the star needs deactivating
            if (
            ((iX || x) < 0 ||
            (iX || x) > window.innerWidth ||
            (iY || y) < 0 ||
            (iY || y) > window.innerHeight) &&
            active &&
            !initiating)
            {
              star.reset(true);
            } else if (active) {
              const newIX = initiating ? iX : iX + iVX;
              const newIY = initiating ? iY : iY + iVY;
              const newX = x + vX;
              const newY = y + vY;
         .........完整代码请登录后点击上方下载按钮下载查看