js实现闪电能力转移动画效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - Energy</title> <style> html, body { margin: 0; padding: 0; height: 100%; } body { background-color: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } canvas { flex-shrink: 0; background-color: #222; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; object-fit: contain; } </style> </head> <body translate="no"> <script> // UTIL const PI = Math.PI, TWO_PI = Math.PI * 2; const Util = {}; Util.timeStamp = function () { return window.performance.now(); }; Util.random = function (min, max) { return min + Math.random() * (max - min); }; Util.map = function (a, b, c, d, e) { return (a - b) / (c - b) * (e - d) + d; }; Util.lerp = function (value1, value2, amount) { return value1 + (value2 - value1) * amount; }; Util.clamp = function (value, min, max) { return Math.max(min, Math.min(max, value)); }; // Vector class Vector { constructor(x, y) { this.x = x || 0; this.y = y || 0; } set(x, y) { this.x = x; this.y = y; } reset() { this.x = 0; this.y = 0; } fromAngle(angle) { let x = Math.cos(angle), y = Math.sin(angle); return new Vector(x, y); } add(vector) { this.x += vector.x; this.y += vector.y; } sub(vector) { this.x -= vector.x; this.y -= vector.y; } mult(scalar) { this.x *= scalar; this.y *= scalar; } div(scalar) { this.x /= scalar; this.y /= scalar; } dot(vector) { return vector.x * this.x + vector.y * this.y; } limit(limit_value) { if (this.mag() > limit_value) this.setMag(limit_value); } mag() { return Math.hypot(this.x, this.y); } setMag(new_mag) { if (this.mag() > 0) { this.normalize(); } else { this.x = 1; this.y = 0; } this.mult(new_mag); } normalize() { let mag = this.mag(); if (mag > 0) { this.x /= mag; this.y /= mag; } } heading() { return Math.atan2(this.y, this.x); } setHeading(angle) { let mag = this.mag(); this.x = Math.cos(angle) * mag; this.y = Math.sin(angle) * mag; } dist(vector) { return new Vector(this.x - vector.x, this.y - vector.y).mag(); } angle(vector) { return Math.atan2(vector.y - this.y, vector.x - this.x); } copy() { return new Vector(this.x, this.y); }} // Init canvas let canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"), H = canvas.height = window.innerHeight, W = canvas.width = window.innerWidth; document.body.appendChild(canvas); // Mouse let mouse = { x: W / 2, y: H / 2 }; canvas.onmousemove = function (event) { mouse.x = event.clientX - canvas.offsetLeft; mouse.y = event.clientY - canvas.offsetTop; }; document.body.onresize = function (event) { H = canvas.height = window.innerHeight; W = canvas.width = window.innerWidth; }; // Let's go class Arrow { constructor(x, y, target) { this.position = new Vector(x, y); this.velocity = new Vector().fromAngle(Util.random(0, TWO_PI)); this.acceleration = new Vector(0, 0); this.target = target; this.travelled_distance = 0; this.min_size = 1; this.max_size = 6; this.size = Util.random(this.min_size, this.max_size); this.zone = this.size * 4; this.topSpeed = Util.map(this.size, this.min_size, this.max_size, 40, 10); let tailLength = Math.floor(Util.map(this.size, this.min_size, this.max_size, 4, 16)); this.tail = []; for (let i = 0; i < tailLength; i++) { this.tail.push({ x: this.position.x, y: this.position.y }); } this.wiggle_speed = Util.map(this.size, this.min_size, this.max_size, 2, 1.2); this.blink_offset = Util.random(0, 100); this.alpha = Util.random(0.1, 1); } render() { this.update(); this.draw(); } update() { let old_position = this.position.copy(); // .........完整代码请登录后点击上方下载按钮下载查看
网友评论0