本帖最后由 马黑黑 于 2024-4-13 13:34 编辑
<style>
#mydiv { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/1/collide.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px #333; position: relative; }
#play { position: absolute; width: 100px; top: 462px; cursor: pointer; left: 630px; animation: rot 5s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1817349555" autoply></audio>
<img id="play" src="https://638183.freep.cn/638183/web/svg/3star-01.svg" alt="" />
</div>
<script>
var canv = document.createElement('canvas');
var ww = canv.width = mydiv.offsetWidth;
var hh = canv.height = mydiv.offsetHeight;
canv.style.cssText = `position: absolute'; left: 0; top: 0; cursor: crosshair`;
mydiv.prepend(canv);
var ctx = canv.getContext('2d');
var balls = [];
var raf = null;
var speed = () => (Math.random() < 0.5 ? -1 : 1) * (Math.random() * 0.5 + 0.5);
var mState = () => {
aud.paused ?
(mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf)) :
(mydiv.style.setProperty('--state', 'running'), render());
};
var innerCircle = (ex,ey,cx,cy,r) => Math.sqrt((ex - cx) ** 2 + (ey - cy) ** 2) <= r;
var drawBall = (x,y,r,color) => {
ctx.save();
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fill();
ctx.restore();
};
var move = (ball) => {
var x = ball.x, y = ball.y, r = ball.r, color = ball.color, spdX = ball.speedX, spdY = ball.speedY;
x += spdX;
y += spdY;
if(x - r < 0 || x + r > ww) spdX = - spdX;
if(y - r < 0 || y + r > hh) spdY = - spdY;
ball.x = x;
ball.y = y;
ball.speedX = spdX;
ball.speedY = spdY;
drawBall(x,y,r,color);
};
var render = () => {
ctx.clearRect(0,0,ww,hh);
for(var j = 0; j < balls.length; j ++) {
for(var k = 0; k < balls.length; k ++) {
var dx = balls[j].x - balls[k].x, dy = balls[j].y - balls[k].y;
var distance = Math.sqrt(dx * dx + dy * dy);
if(distance < (balls[j].r + balls[k].r)) {
balls[j].speedX = -balls[j].speedX;
balls[j].speedY = -balls[j].speedY;
balls[k].speedX = -balls[k].speedX;
balls[k].speedY = -balls[k].speedY;
}
}
move(balls[j]);
}
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
};
var initBalls = (total) => {
for (var j = 0; j < total; j ++) {
var x = Math.random() * (ww - 200) + 50, y = Math.random() * (hh - 100) + 30, r = Math.random() * 5 + 5, color = '#' + Math.random().toString(16).substr(-6), spdx = speed(), spdy = speed();
balls.push({x: x, y: y, r: r, color: color, speedX: spdx, speedY: spdy});
move(balls[j]);
}
};
aud.loop = false;
aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => cancelAnimationFrame(raf);
aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };
play.onclick = () => aud.paused ? aud.play() : aud.pause();
canv.onclick = (e) => {
var x = e.offsetX, y = e.offsetY;
for(var j = 0; j < balls.length; j ++) {
if(innerCircle(x, y, balls[j].x, balls[j].y, balls[j].r)) {
if(balls[j].r < 20) balls[j].r += 2;
balls[j].color = `#${Math.random().toString(16).substr(-6)}`;
}
}
};
initBalls(40);
</script>
| 
发表于 2024-4-13 13:32
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
