一杆全进（学习黑黑小珠珠移动效果）
<style>#papa { left: -252px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/6311886416f2c2beb1d623ce.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; }
#lrc { position: absolute; left: 220px; bottom: 42px; font: bold 1.5em sans-serif; color: #ccc; text-shadow: 1px 1px 2px #000; letter-spacing: 2px; }
#mplayer { position: absolute; left: 620px;bottom: 42px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 28px; height: 28px; background: #9AB38B; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnwrap:hover { background: #418147; }
#btnplay { width: 16px; height: 16px; background: gold; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent gold; display: none; }
#prog { width: 160px; height: 2px; background: #CDD8DD linear-gradient(90deg,red,olive,red) no-repeat ; background-size: 1px 2px; position: relative; cursor: pointer; }
#prog::before { position: absolute; top: -5px; height: 12px; width: 200px; content: ''; }
#tmsg { left: 260px; bottom: 16px; color: #306052; }
.ball { position: absolute; left: 810px; bottom: 443px; width: 10px; height: 10px; border-radius: 50%; background: red; animation: move 20s var(--ss) linear infinite; }
@keyframes move {
0%, 100% { left: 810px; bottom: 443px; }
36% { left: 163px; bottom: 261px; }
55% { left: 486px; bottom: 84px; }
74% { left: 543px; bottom: 440px; }
90% { left: 850px; bottom: 327px; }
95% { left: 946px; bottom: 361px; }
}
</style>
<div id="papa">
<span id="lrc">lrc歌词</span>
<span id="mplayer">
<span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span>
<span id="prog"></span>
<span id="tmsg">00:00 | 00:00</span>
</span>
<div style="position: absolute; right:0px; bottom: 90px; width:128px;opacity: 1;">
<img alt="" src="https://pic.imgdb.cn/item/62cbbf8cf54cd3f93783952e.gif"/></div>
</div>
<script>
let lrcAr = [
['0.00','抽出我心爱的台球杆'],
['5.08','擦亮眼睛请看清我的球技'],
['10.10','与你打球我不用使出全力'],
['20.02','想要更多的人认可我的球技'],
['118.07','谢谢欣赏']
];
let aud = new Audio(), lw = prog.offsetWidth;
aud.src = 'https://music.163.com/song/media/outer/url?id=1863293910.mp3';
aud.autoplay = true;
aud.loop = true;
Array.from({length: 50}).forEach((item,key) => {
item = document.createElement('span');
item.className = 'ball';
item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(-6)};`;
papa.appendChild(item);
});
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script> 去找了一下，还真找到了《打台球》的歌。
现在的角度应该所有的球都能进了吧{:4_173:} 我发现可以用小球走过的距离的比例来设置百分比，这样无论是长距离还是短距离就都差不多的速度了@马黑黑 {:4_173:}当然我这个没仔细量，是按差不多的比例设置的。 当中的两球分别进腰洞，右边的两个分别进右侧两个底洞。好像角度差不多，那只沉底的暗红色小球打个旋转球也是必进。{:4_173:} 彩珠变成台球啦，有意思，有意思！ 梦油 发表于 2022-9-2 14:38
彩珠变成台球啦，有意思，有意思！
没变台球，而是这一杆的打法标示，按照这个方向打，都能进{:4_173:} 厉害厉害。这就玩上了啊。{:4_189:} 红影 发表于 2022-9-2 14:56
没变台球，而是这一杆的打法标示，按照这个方向打，都能进
好啊！台球皇后。 加林森 发表于 2022-9-2 15:05
厉害厉害。这就玩上了啊。
让小珠珠派点实际用途，比在四周巡山更有收获{:4_173:} 梦油 发表于 2022-9-2 15:21
好啊！台球皇后。
这个只是理论上的打法，真要进的话，还跟用的力道以及角度的精准控制有关{:4_173:} 红影 发表于 2022-9-2 15:22
让小珠珠派点实际用途，比在四周巡山更有收获
红影喜欢赌啊？{:4_189:} 好玩的帖，欣赏问好老师！{:4_187:} 加林森 发表于 2022-9-2 15:23
红影喜欢赌啊？
玩台球不一定赌的啊。 梦缘 发表于 2022-9-2 16:24
好玩的帖，欣赏问好老师！
问好梦缘，谢谢{:4_187:} 红影 发表于 2022-9-2 15:23
这个只是理论上的打法，真要进的话，还跟用的力道以及角度的精准控制有关
看来影子朋友对台球还有两下子啊。 红影 发表于 2022-9-2 16:56
玩台球不一定赌的啊。
明白的。{:4_172:} 哈哈哈，老马教一个基础，你们都能充分发挥技术啦 比赛结果，0:0