canvas实现跟随鼠标移动的海洋多足生物交互动画效果代码-html代码-BFW代码库

canvas实现跟随鼠标移动的海洋多足生物交互动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现跟随鼠标移动的海洋多足生物交互动画效果代码

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

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

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

  
<style>
body {
	margin: 0;
	overflow: hidden;
	background: #000;
	font-family: 'Courier New', monospace;
}
canvas {
	display: block;
}
</style>


  
</head>

<body translate="no">
  <canvas id="canvas"></canvas>
  
    <script >
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';

const channel = new BroadcastChannel("alien-core");

let isMainWindow = document.hasFocus();
let windowId = Math.random().toString(36).substr(2, 9);
let lastMoveTime = Date.now();

window.addEventListener("focus", () => {
  isMainWindow = true;
  channel.postMessage({
    type: "window-focus",
    id: windowId,
    timestamp: Date.now() });

});

window.addEventListener("blur", () => {
  isMainWindow = false;
});

const localCore = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 40,
  vx: 0,
  vy: 0,
  energyBoost: 0 };


let targetX = localCore.x;
let targetY = localCore.y;

const remoteCores = new Map();
const detachedElements = [];

let passEffect = {
  isActive: false,
  progress: 0,
  direction: 1,
  startTime: 0,
  duration: 2000 };


let energyBridge = {
  isActive: false,
  progress: 0,
  startTime: 0,
  duration: 3000,
  particles: [] };


class Tentacle {
  constructor(core, angle) {
    this.core = core;
    this.angle = angle;
    this.segments = [];
    this.length = 30; // más corto y más ágil
    this.segmentLength = 10; // más pequeño
    this.animation = Math.random() * 100;
    this.gradient = null;

    for (let i = 0; i < this.length; i++) {
      this.segments.push({
        x: core.x,
        y: core.y,
        offset: i * 0.3 + Math.random() * 0.5 // offsets únicos
      });
    }
  }

  update() {
    this.animation += 0.06 + localCore.energyBoost * 0.06;
    let prevX = this.core.x;
    let prevY = this.core.y;

    for (let i = 0; i < this.length; i++) {
      const segment = this.segments[i];
      const wave =
      Math.sin(this.animation + segment.offset) * (12 + localCore.energyBoost * 18) +
      Math.cos(this.animation * 0.5 + segment.offset) * 8;

      const targetX = prevX + Math.cos(this.angle) * this.segmentLength + wave * 0.25;
      const targetY = prevY + Math.sin(this.angle) * this.segmentLength + wave * 0.25;

      segment.x += (targetX - segment.x) * 0.45;
      segment.y += (targetY .........完整代码请登录后点击上方下载按钮下载查看