回马枪（马黑黑原创）TO：小辣椒
本帖最后由 朵拉 于 2024-4-13 16:05 编辑 <br /><br /><style>#mydiv { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/661a3bf068eb9357133ed2f1.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=1885536903" autoply></audio>
<img id="play" src="https://638183.freep.cn/638183/web/svg/clover4.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.x - balls.x, dy = balls.y - balls.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if(distance < (balls.r + balls.r)) {
balls.speedX = -balls.speedX;
balls.speedY = -balls.speedY;
balls.speedX = -balls.speedX;
balls.speedY = -balls.speedY;
}
}
move(balls);
}
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);
}
};
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.x, balls.y, balls.r)) {
if(balls.r < 20) balls.r += 2;
balls.color = `#${Math.random().toString(16).substr(-6)}`;
}
}
};
initBalls(40);
</script> @马黑黑
老师好，学生交作业，请指正哈{:4_190:} @小辣椒
小辣椒好，感谢你的一路支持{:4_204:}
只管听好歌，忽略刀光剑影哈{:4_185:}{:4_173:} 朵拉 发表于 2024-4-13 16:06
@马黑黑
老师好，学生交作业，请指正哈
{:4_190:} 漂亮的制作。欣赏朵宝好帖{:4_204:} 谢谢朵拉，小辣椒收礼来了，粒子效果好漂亮哦{:4_199:} 朵拉每次完成作业都是最速度的，而且手机制作，小辣椒好佩服的{:4_178:} 谢谢朵拉，小辣椒收礼好开心的{:4_179:} 马黑黑 发表于 2024-4-13 17:34
老师，感觉加上歌词会更好，
不知道代码语句 请赐教{:4_190:} 红影 发表于 2024-4-13 19:05
漂亮的制作。欣赏朵宝好帖
感谢影宝临帖，周末愉快{:4_204:} 朵拉 发表于 2024-4-14 13:11
老师，感觉加上歌词会更好，
不知道代码语句 请赐教
那你得会使用lrc歌词的相关代码，这类带吗我们有的是 挺漂亮的，歌曲也挺好听的。 朵拉 发表于 2024-4-14 13:11
感谢影宝临帖，周末愉快
抱抱朵宝，周日快乐{:4_179:}
页:
[1]