效果演示

项目使用

环境说明

请使用 Animate CC 2021 或更高版本打开项目文件

主要源码

let _this = this;

let mystate = {
	mouseX: 0,
	mouseY: 0,
	rect: canvas.getBoundingClientRect(),
	iscreateball: false,
	timer: null,
	intervalnum: 100,
}

let balls = [];
let i = 0; //所有循环用这个变量

//----
let bg = new lib._bg();
_this.addChild(bg);

let num = new lib._txt();
_this.addChild(num);
num.x = canvas.clientWidth - 130;
num.y = 20;

let txt = new lib._text();
_this.addChild(txt);
txt.x = canvas.clientWidth / 2;
txt.y = canvas.clientHeight / 2;
txt.scaleX = txt.scaleY = 0.3;

let aim = new lib._aim();
_this.addChild(aim);
aim.stop();

let allEvent = new Event("BALLMOVE");

canvas.addEventListener("mousedown", ondown);
canvas.addEventListener("mouseup", onup);
canvas.addEventListener("mousemove", onmove);
_this.addEventListener("tick", ontick);


const hm = document.getElementById('canvas');
function ondown(e)
{
	aim.gotoAndStop(1);
	if (!mystate.iscreateball)
	{
		mystate.iscreateball = true;
		mystate.timer = setInterval(function () {
				createmoreball();
				//console.log(balls.length);
		}, mystate.intervalnum)
	}

}

function onup(e)
{
	mystate.iscreateball = false;
	clearInterval(mystate.timer);
	aim.gotoAndStop(0);
}

function onmove(e)
{
	//console.log(e.currentTarget);
	hm.style.cursor = 'none';
	mystate.mouseX = e.clientX - mystate.rect.left;
	mystate.mouseY = e.clientY - mystate.rect.top;
}


function ontick(e)
{
	aim.x = mystate.mouseX;
	aim.y = mystate.mouseY;
	allEvent.data = {
		mx: mystate.mouseX,
		my: mystate.mouseY,
		length:balls.length,
	};
	_this.dispatchEvent(allEvent);

}

//用于节约资源

function createmoreball()
{
	if (balls.length == 0)
	{
		createsingleball();
	}
	else
	{
		for (i = 0; i < balls.length; i++)
		{
			if (!balls[i].visible)
			{
				balls[i].visible = true;
				return;
			}
		}
		createsingleball();
	}
}

function createsingleball()
{
	let ctb = new lib._controlball();
	_this.addChild(ctb);
	balls.push(ctb);
}