Collide

马黑黑 发表于 2024-4-13 13:32

本帖最后由马黑黑于 2024-4-13 14:05 编辑 <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; z-index: 1; }
#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" autoplay></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.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>

马黑黑 发表于 2024-4-13 13:33

本帖最后由马黑黑于 2024-4-13 13:34 编辑 <style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">#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; }</cl-cd>
<cl-cd data-idx="3">#play { position: absolute; width: 100px; top: 462px; cursor: pointer; left: 630px; animation: rot 5s linear infinite var(--state); }</cl-cd>
<cl-cd data-idx="4">@keyframes rot { to { transform: rotate(360deg); } }</cl-cd>
<cl-cd data-idx="5"></style></cl-cd>
<cl-cd data-idx="6"> </cl-cd>
<cl-cd data-idx="7"><div id="mydiv"></cl-cd>
<cl-cd data-idx="8">    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1817349555" autoply></audio></cl-cd>
<cl-cd data-idx="9">    <img id="play" src="https://638183.freep.cn/638183/web/svg/3star-01.svg" alt="" /></cl-cd>
<cl-cd data-idx="10"></div></cl-cd>
<cl-cd data-idx="11"> </cl-cd>
<cl-cd data-idx="12"><script></cl-cd>
<cl-cd data-idx="13">var canv = document.createElement('canvas');</cl-cd>
<cl-cd data-idx="14">var ww = canv.width = mydiv.offsetWidth;</cl-cd>
<cl-cd data-idx="15">var hh = canv.height = mydiv.offsetHeight;</cl-cd>
<cl-cd data-idx="16">canv.style.cssText = `position: absolute'; left: 0; top: 0; cursor: crosshair`;</cl-cd>
<cl-cd data-idx="17">mydiv.prepend(canv);</cl-cd>
<cl-cd data-idx="18">var ctx = canv.getContext('2d');</cl-cd>
<cl-cd data-idx="19">var balls = [];</cl-cd>
<cl-cd data-idx="20">var raf = null;</cl-cd>
<cl-cd data-idx="21">var speed = () => (Math.random() < 0.5 ? -1 : 1) * (Math.random() * 0.5 + 0.5);</cl-cd>
<cl-cd data-idx="22">var mState = () => {</cl-cd>
<cl-cd data-idx="23">    aud.paused ?</cl-cd>
<cl-cd data-idx="24">        (mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf)) :</cl-cd>
<cl-cd data-idx="25">        (mydiv.style.setProperty('--state', 'running'), render());</cl-cd>
<cl-cd data-idx="26">};</cl-cd>
<cl-cd data-idx="27">var innerCircle = (ex,ey,cx,cy,r) => Math.sqrt((ex - cx) ** 2 + (ey - cy) ** 2) <= r;</cl-cd>
<cl-cd data-idx="28">var drawBall = (x,y,r,color) => {</cl-cd>
<cl-cd data-idx="29">    ctx.save();</cl-cd>
<cl-cd data-idx="30">    ctx.beginPath();</cl-cd>
<cl-cd data-idx="31">    ctx.fillStyle = color;</cl-cd>
<cl-cd data-idx="32">    ctx.arc(x,y,r,0,2*Math.PI);</cl-cd>
<cl-cd data-idx="33">    ctx.fill();</cl-cd>
<cl-cd data-idx="34">    ctx.restore();</cl-cd>
<cl-cd data-idx="35">};</cl-cd>
<cl-cd data-idx="36">var move = (ball) => {</cl-cd>
<cl-cd data-idx="37">    var x = ball.x, y = ball.y, r = ball.r, color = ball.color, spdX = ball.speedX, spdY = ball.speedY;</cl-cd>
<cl-cd data-idx="38">    x += spdX;</cl-cd>
<cl-cd data-idx="39">    y += spdY;</cl-cd>
<cl-cd data-idx="40">    if(x - r < 0 || x + r > ww) spdX = - spdX;</cl-cd>
<cl-cd data-idx="41">    if(y - r < 0 || y + r > hh) spdY = - spdY;</cl-cd>
<cl-cd data-idx="42">    ball.x = x;</cl-cd>
<cl-cd data-idx="43">    ball.y = y;</cl-cd>
<cl-cd data-idx="44">    ball.speedX = spdX;</cl-cd>
<cl-cd data-idx="45">    ball.speedY = spdY;</cl-cd>
<cl-cd data-idx="46">    drawBall(x,y,r,color);</cl-cd>
<cl-cd data-idx="47">};</cl-cd>
<cl-cd data-idx="48">var render = () => {</cl-cd>
<cl-cd data-idx="49">    ctx.clearRect(0,0,ww,hh);</cl-cd>
<cl-cd data-idx="50">    for(var j = 0; j < balls.length; j ++) {</cl-cd>
<cl-cd data-idx="51">        for(var k = 0; k < balls.length; k ++) {</cl-cd>
<cl-cd data-idx="52">            var dx = balls.x - balls.x, dy = balls.y - balls.y;</cl-cd>
<cl-cd data-idx="53">            var distance = Math.sqrt(dx * dx + dy * dy);</cl-cd>
<cl-cd data-idx="54">            if(distance < (balls.r + balls.r)) {</cl-cd>
<cl-cd data-idx="55">                balls.speedX = -balls.speedX;</cl-cd>
<cl-cd data-idx="56">             balls.speedY = -balls.speedY;</cl-cd>
<cl-cd data-idx="57">             balls.speedX = -balls.speedX;</cl-cd>
<cl-cd data-idx="58">             balls.speedY = -balls.speedY;</cl-cd>
<cl-cd data-idx="59">            }</cl-cd>
<cl-cd data-idx="60">        }</cl-cd>
<cl-cd data-idx="61">        move(balls);</cl-cd>
<cl-cd data-idx="62">    }</cl-cd>
<cl-cd data-idx="63">    aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);</cl-cd>
<cl-cd data-idx="64">};</cl-cd>
<cl-cd data-idx="65">var initBalls = (total) => {</cl-cd>
<cl-cd data-idx="66">    for (var j = 0; j < total; j ++) {</cl-cd>
<cl-cd data-idx="67">        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();</cl-cd>
<cl-cd data-idx="68">        balls.push({x: x, y: y, r: r, color: color, speedX: spdx, speedY: spdy});</cl-cd>
<cl-cd data-idx="69">        move(balls);</cl-cd>
<cl-cd data-idx="70">    }</cl-cd>
<cl-cd data-idx="71">};</cl-cd>
<cl-cd data-idx="72">aud.loop = false;</cl-cd>
<cl-cd data-idx="73">aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="74">aud.onseeked = () => cancelAnimationFrame(raf);</cl-cd>
<cl-cd data-idx="75">aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };</cl-cd>
<cl-cd data-idx="76">play.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="77">canv.onclick = (e) => {</cl-cd>
<cl-cd data-idx="78">    var x = e.offsetX, y = e.offsetY;</cl-cd>
<cl-cd data-idx="79">    for(var j = 0; j < balls.length; j ++) {</cl-cd>
<cl-cd data-idx="80">        if(innerCircle(x, y, balls.x, balls.y, balls.r)) {</cl-cd>
<cl-cd data-idx="81">            if(balls.r < 20) balls.r += 2;</cl-cd>
<cl-cd data-idx="82">            balls.color = `#${Math.random().toString(16).substr(-6)}`;</cl-cd>
<cl-cd data-idx="83">        }</cl-cd>
<cl-cd data-idx="84">    }</cl-cd>
<cl-cd data-idx="85">};</cl-cd>
<cl-cd data-idx="86">initBalls(40);</cl-cd>
<cl-cd data-idx="87"></script></cl-cd>
</div>

马黑黑 发表于 2024-4-13 13:37

小球接受点击操作，每一次成功点击，重新渲染是会大一点，一直打到半径为20像素，同时每一次成功点击它会变换颜色。

当小球较小时，点击会有点困难。

红影发表于 2024-4-13 14:08

这个是前面小球撞击帖子的实例吧，好玩。
那些发生纠缠的小球，倒是正好配合了帖子节奏呢{:4_173:}

红影发表于 2024-4-13 14:09

马黑黑发表于 2024-4-13 13:37
小球接受点击操作，每一次成功点击，重新渲染是会大一点，一直打到半径为20像素，同时每一次成功点击它会变 ...

我暂停了，再点击，发现渲染和变色也会变化。运动中点击太难了{:4_189:}

红影发表于 2024-4-13 14:13

奇怪，点击加精华按键的时候，小球忽然变成了横向拉伸了呢。

红影发表于 2024-4-13 14:15

https://pic.imgdb.cn/item/661a22d868eb93571313394d.jpg

马黑黑 发表于 2024-4-13 14:16

红影发表于 2024-4-13 14:13
奇怪，点击加精华按键的时候，小球忽然变成了横向拉伸了呢。

JS没有闭包，局部刷新可能受到影响

马黑黑 发表于 2024-4-13 14:16

红影发表于 2024-4-13 14:09
我暂停了，再点击，发现渲染和变色也会变化。运动中点击太难了

聪明。不过，等运行起来才看到效果。

马黑黑 发表于 2024-4-13 14:16

红影发表于 2024-4-13 14:08
这个是前面小球撞击帖子的实例吧，好玩。
那些发生纠缠的小球，倒是正好配合了帖子节奏呢

{:4_173:}

马黑黑 发表于 2024-4-13 14:17

红影发表于 2024-4-13 14:15

这是小球高兴过头了

红影发表于 2024-4-13 14:25

马黑黑发表于 2024-4-13 14:16
JS没有闭包，局部刷新可能受到影响

哦哦，这样啊。好在评分没出问题。

红影发表于 2024-4-13 14:25

马黑黑发表于 2024-4-13 14:16
聪明。不过，等运行起来才看到效果。

是的，点击后也需要运行才看得到效果，否则是不变的。

红影发表于 2024-4-13 14:26

马黑黑发表于 2024-4-13 14:16

它们扭动的节奏正好是音乐节奏{:4_173:}

马黑黑 发表于 2024-4-13 14:26

红影发表于 2024-4-13 14:26
它们扭动的节奏正好是音乐节奏

有点像

红影发表于 2024-4-13 14:27

马黑黑发表于 2024-4-13 14:17
这是小球高兴过头了

都忘乎所以了{:4_189:}

马黑黑 发表于 2024-4-13 14:27

红影发表于 2024-4-13 14:25
是的，点击后也需要运行才看得到效果，否则是不变的。

整体渲染才出效果

马黑黑 发表于 2024-4-13 14:28

红影发表于 2024-4-13 14:25
哦哦，这样啊。好在评分没出问题。

JS代码闭包的话，就不会在不同机制的刷新中丢三落四

马黑黑 发表于 2024-4-13 14:28

红影发表于 2024-4-13 14:27
都忘乎所以了

正常，人家需要欣赏

红影发表于 2024-4-13 14:29

马黑黑发表于 2024-4-13 14:26
有点像

这个帖子里的小球纠缠随机发生，却是完美匹配帖子，真棒{:4_199:}

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

Collide