js 能量收集
export class Energy { public radius = 0; public pos = {x: 0, y: 0}; public cp = {x: 0, y: 0}; public speed = 1; public coefficient = {x: 0, y: 0}; public dir = [ {x: 1, y: 1}, {x: 1, y: -1}, {x: -1, y: 1}, {x: -1, y: 1}, ]; constructor(private ctx: CanvasRenderingContext2D, private rect: { x: number, y: number }) { this.init(); } private init(): void { // 初始化半径及位置 this.radius = Math.ceil(Math.random() * 2); // 运行速度,每帧的位移量, 最大速度为5,受半径影响 this.speed = this.radius; this.pos = this.randomRectOuterPos(); // 求容器的中心点 this.cp.x = this.rect.x / 2; this.cp.y = this.rect.y / 2; // 运行速度,每帧的位移量, 最大速度为5 this.speed = this.radius; // 求分量的偏移角度 const angle = Math.atan2(this.pos.x - this.cp.x, this.pos.y - this.cp.y); // 分别计算出x\y方向上的偏移系数,网页坐标和数学的0点坐标是关于y轴对称 this.coefficient.x = -Math.sin(angle); this.coefficient.y = -Math.cos(angle); } private randomRectOuterPos(): { x: number, y: number } { // 先随机生成x轴还是y轴 const p = {x: 0, y: 0}; const dir = Math.random() > 0.5 ? -1 : 1; if (Math.random() > 0.5) { // 先x轴 p.x = dir > 0 ? (Math.ceil(Math.random() * 100) + this.rect.x) : (Math.ceil(Math.random() * -100)); p.y = Math.ceil(Math.random() * this.rect.y); } else { p.y = dir > 0 ? (Math.ceil(Math.random() * 100) + this.rect.y) : (Math.ceil(Math.random() * -100)); p.x = Math.ceil(Math.random() * this.rect.x); } return p; } public run() { // 向容器的中心位置移动 this.pos.x += this.coefficient.x * this.speed; this.pos.y += this.coefficient.y * this.speed; // 达到中心之后,重新随机位置 if (Math.abs(this.pos.x - this.cp.x) < 2 || Math.abs(this.pos.y - this.cp.y) < 2) { this.init(); } this.ctx.beginPath(); this.ctx.arc(this.pos.x, this.pos.y, this.radius, 0, 2*Math.PI); this.ctx.fillStyle = '#eef1a4'; this.ctx.fill(); this.ctx.closePath(); } public drawCenterEnergy(img?: any): void { // 绘制中心点 this.ctx.beginPath(); this.ctx.drawImage(img, this.cp.x - img.width / 2, this.cp.y - 10); // this.ctx.fillStyle = '#ff0000'; // this.ctx.fill(); this.ctx.closePath(); } } // const energys: Energy[] = []; // for (let i = 0; i < 100; i++) { // energys.push(new Energy(ctx, {x: pNode.clientWidth, y: pNode.clientHeight})); // } // const img = new Image(); // img.src = 'assets/test1.png'; // const update = () => { // ctx.clearRect(0, 0, pNode.clientWidth, pNode.clientHeight); // energys[0].drawCenterEnergy(img); // energys.forEach(energy => energy.run()); // window.requestAnimationFrame(update); // } // update();