查看“Widget:Click5”的源代码

<noinclude>{{#widget:click5}}</noinclude>
<includeonly>


<script>
// 帧的顺序，frames[key][0] 为第一帧，frames[key][1] 为第二帧以此类推
const frames = {
   "qy":[ 
    "https://patchwiki.biligame.com/images/lysk/e/ed/297tink83u41mvzxnbb4j2iax4hb39f.png",
    "https://patchwiki.biligame.com/images/lysk/d/dc/297tink83u41mvzxnbb4j2iax4hb39f.png",
    "https://patchwiki.biligame.com/images/lysk/6/60/reztwzwgtzh9bsrasjbwmfjzx3a12qu.png",
    "https://patchwiki.biligame.com/images/lysk/f/f0/lju5tidcj3e72qyyt80jjp25nk6smi2.png",
    "https://patchwiki.biligame.com/images/lysk/1/1d/qnl3oz2v5zlcizzugs2clnjo5g7bp8v.png",
    "https://patchwiki.biligame.com/images/lysk/2/24/6uzviptoijycqq92nyx21nkm2h0h04n.png",
    "https://patchwiki.biligame.com/images/lysk/0/07/ls8ua71yxygn3nsipm3ir6hqw4rklg1.png",
    "https://patchwiki.biligame.com/images/lysk/2/29/dko7dv3m01d8485rb9w4sgc828wxa4l.png",
    "https://patchwiki.biligame.com/images/lysk/8/84/r3x61na9fl096aqcjoa32zmldlr03d0.png",
    "https://patchwiki.biligame.com/images/lysk/6/68/5j47ku3e47ctl5tgtf9wbk0io2rdc6m.png",
    "https://patchwiki.biligame.com/images/lysk/e/e6/2u9i6gsakx1esz9f5qdkc7hql7g2qwp.png",
    "https://patchwiki.biligame.com/images/lysk/2/23/5wumrbxkqc14rjng076nhotspzqs0mx.png",
    "https://patchwiki.biligame.com/images/lysk/d/d7/90v799efel47l4i7lifsxs4u8in7ut6.png",
    "https://patchwiki.biligame.com/images/lysk/2/2d/kg99s3ow5uw6y7vuqo0fwfrpoitz6o2.png",
    "https://patchwiki.biligame.com/images/lysk/0/0d/ou1bler2xodp4k97czy90b767efb67x.png",
    "https://patchwiki.biligame.com/images/lysk/9/9d/coilgz6yxvque73r0le6m4f90no81r8.png",
    "https://patchwiki.biligame.com/images/lysk/5/5b/2ej6wkt4g6dvgd9jlvwfj099ptkmbo1.png"    
],
   "sxh":[
    "https://patchwiki.biligame.com/images/lysk/d/d1/s9b5wh410dmp2xet6o5dvnztj3mznl6.png",
    "https://patchwiki.biligame.com/images/lysk/c/c4/ez6esa61041qhu3ozh6mueswfuhg723.png",
    "https://patchwiki.biligame.com/images/lysk/2/21/jmz039wksxwwglfth3qfhkmohfcckj4.png",
    "https://patchwiki.biligame.com/images/lysk/1/1d/s6uu10jzcm9tkk97vux52t6ld7r6t2t.png",
    "https://patchwiki.biligame.com/images/lysk/6/69/syi1z8le0s0rzqxp5k928bu9nwxj2sp.png",
    "https://patchwiki.biligame.com/images/lysk/3/37/jvodvp7g7uf5dohz6r5kyld3jc0lh3u.png",
    "https://patchwiki.biligame.com/images/lysk/5/55/5p1m0fkkis4713ikv9yvah7ia9e4lyk.png",
    "https://patchwiki.biligame.com/images/lysk/7/7b/ihfxfni02526h0uv2bd9x4jmoq9nvfp.png",
    "https://patchwiki.biligame.com/images/lysk/5/5a/3q5s58246hg7i80tobm15rzkngbqtr9.png",
    "https://patchwiki.biligame.com/images/lysk/f/fd/0l59fuen91dewbhsquhaav1n306e5kt.png",
    "https://patchwiki.biligame.com/images/lysk/4/48/7moaarqwe14c2vcwbf51bpcbagpvi1b.png",
    "https://patchwiki.biligame.com/images/lysk/f/fe/db8j2cr75jurnyndh438svmne284ksw.png",
    "https://patchwiki.biligame.com/images/lysk/b/b1/auat84710qhuhudty98fnbeodf4vk4v.png",
    "https://patchwiki.biligame.com/images/lysk/2/2a/h0knr7trjqwt0xjr5k7n4qrq1c92ycu.png",
    "https://patchwiki.biligame.com/images/lysk/a/ad/fbucqmrk1n5mcona9sw9doaw3371vsw.png",
    "https://patchwiki.biligame.com/images/lysk/1/1c/cpmxlail9rg5cujyx6ovn35wokmwes9.png",
    "https://patchwiki.biligame.com/images/lysk/9/91/8pznpjwwf46jhbc68pr8kkccyit755f.png"
],
   "ls":[
   "https://patchwiki.biligame.com/images/lysk/3/39/gwneoms0yo7bxe8670f5414rfl5eplz.png",
   "https://patchwiki.biligame.com/images/lysk/5/5c/4ytmkubevd8vhhbma8ps9yowehnkvkt.png",
   "https://patchwiki.biligame.com/images/lysk/8/81/rsgk2slhxyrn1bzdxnflu1m5ho1ooji.png",
   "https://patchwiki.biligame.com/images/lysk/7/73/101gdg700pvwd7v7jtagmm0satswejb.png",
   "https://patchwiki.biligame.com/images/lysk/d/df/ni4iepf7gq7we3f8y8f91snuurpelcg.png",
   "https://patchwiki.biligame.com/images/lysk/d/d8/n6jfwjgdz40d7f18i84oc6a3po85rgz.png",
   "https://patchwiki.biligame.com/images/lysk/3/3c/e7ukjbh5lhftgiixjpdpqs4ezrz25zm.png",
   "https://patchwiki.biligame.com/images/lysk/9/91/29bwaqrvclrqvb892s4y184vb83s5vz.png",
   "https://patchwiki.biligame.com/images/lysk/e/e1/mp3iy81j80ibph982a1pex44obm26jv.png",
   "https://patchwiki.biligame.com/images/lysk/b/b2/sxbc9vd2dvofwat6wu6l7334r0dbnea.png",
   "https://patchwiki.biligame.com/images/lysk/c/c2/2qhlv77hcr6qkfmvc493oaz9tq299hm.png",
   "https://patchwiki.biligame.com/images/lysk/2/2b/nlyczomxsfcw7103mzu5ararr1ctopt.png",
   "https://patchwiki.biligame.com/images/lysk/6/64/co964urs8p0t3gt6kj9bznc9ytpv8r5.png",
   "https://patchwiki.biligame.com/images/lysk/4/48/0w9gsilflp6n6ngshxt7peff2xiog6x.png",
   "https://patchwiki.biligame.com/images/lysk/1/15/c7nntxfe8ylwp4jnsl3fp7hxfhxhgnq.png",
   "https://patchwiki.biligame.com/images/lysk/e/e5/joazl8zlfx3yjtk69eff64jipjboa2u.png",
   "https://patchwiki.biligame.com/images/lysk/8/84/4ra40j0xe9v602impao5zjdbofah8oe.png"
],
   "qc":[
   "https://patchwiki.biligame.com/images/lysk/e/e3/ddzwpf2ey1op2i6h79cu156oexzpjd9.png",
   "https://patchwiki.biligame.com/images/lysk/c/c6/n0kr1nxm1rgchd1myi98pkp58zxtsow.png",
   "https://patchwiki.biligame.com/images/lysk/5/5e/gqgyptrbxu3z8ab66owsc1efiuzdfup.png",
   "https://patchwiki.biligame.com/images/lysk/a/a0/q9ttbpehcp5so31rstxwj8vojvgexta.png",
   "https://patchwiki.biligame.com/images/lysk/4/4a/mlg3zba6b6r287gs12bjn5tz6ll8cx8.png",
   "https://patchwiki.biligame.com/images/lysk/2/2d/p6al82xky8hjhflbrx0yin0tsbv3xs4.png",
   "https://patchwiki.biligame.com/images/lysk/7/76/rc9kmsgt6gnysx63qua8jpu4kpn8myr.png",
   "https://patchwiki.biligame.com/images/lysk/1/1b/922x7tax7yj4xahagtdjrdm80qte203.png",
   "https://patchwiki.biligame.com/images/lysk/d/d9/nhf1xhhithvp9p3vkicw50w1kyvsx7y.png",
   "https://patchwiki.biligame.com/images/lysk/0/08/swi3c1f6dy1z05n25hdcqn1ozipflv5.png",
   "https://patchwiki.biligame.com/images/lysk/4/4e/nglbwve5wz6goglnvdr3lbdobmwpsfx.png",
   "https://patchwiki.biligame.com/images/lysk/6/67/ithugvbbzywt8zufbaxkz46r8qqsi53.png",
   "https://patchwiki.biligame.com/images/lysk/9/95/2msh7jif32yevq2y287n5266eufzqcg.png",
   "https://patchwiki.biligame.com/images/lysk/d/d2/n8sdhtse3yxgb8scyxolof8zfd8s6ik.png",
   "https://patchwiki.biligame.com/images/lysk/c/c3/ax1tbdhvnropj7em5o7orzfkujwftkq.png",
   "https://patchwiki.biligame.com/images/lysk/8/8f/ct81f7b5joozjq2xq2myry62wey5w9k.png",
   "https://patchwiki.biligame.com/images/lysk/e/e1/psznqzwi1xoiq27w99faz2je236norw.png"
],
   "xyz":[
   "https://patchwiki.biligame.com/images/lysk/f/fd/g33wugdfwj6d5jlrah58au5mfld591i.png",
   "https://patchwiki.biligame.com/images/lysk/0/0a/oh0c5v3wl95zmnkvmss51bdwhfmya9p.png",
   "https://patchwiki.biligame.com/images/lysk/9/95/f4hhttp2zwo1cay9sp6c8dsfm0qc8vz.png",
   "https://patchwiki.biligame.com/images/lysk/2/23/hprxt51o6zi3oqla4afkofn261w54r8.png",
   "https://patchwiki.biligame.com/images/lysk/4/4f/ti5d3fly2jqae57xii0t105qjgzuqx0.png",
   "https://patchwiki.biligame.com/images/lysk/0/05/mcak7vbozcc9dirc3i0i5jhgj665a1e.png",
   "https://patchwiki.biligame.com/images/lysk/e/ec/l6nbc9m46n8jfxtwhceaxxqgtmjk94s.png",
   "https://patchwiki.biligame.com/images/lysk/b/b5/inmhknbvpvec4ylnsg0zsq8p1ymq2kd.png",
   "https://patchwiki.biligame.com/images/lysk/2/23/ar84636zz661jq28tkrghpnl4a6fuzv.png",
   "https://patchwiki.biligame.com/images/lysk/d/d0/sxroapbdvh1lnozt337k166bgi8109h.png",
   "https://patchwiki.biligame.com/images/lysk/f/f6/f2bo5wic8ucnwgvroa97hbeeaq66z1c.png",
   "https://patchwiki.biligame.com/images/lysk/c/ce/8526wu1nfjnpgf9hnpjqeqbz4l4rbpu.png",
   "https://patchwiki.biligame.com/images/lysk/9/98/45qr7h1bygxpak75c8hfq1i0wm5y7f3.png",
   "https://patchwiki.biligame.com/images/lysk/a/a0/dtk38h3t9jhdlagpesvdaj4blj4xcw7.png",
   "https://patchwiki.biligame.com/images/lysk/b/b3/khu0j2eidc9oryha3kkhwfh2sj4w1hf.png",
   "https://patchwiki.biligame.com/images/lysk/1/14/1ivs40ld5tzzfihwd76yf4qdn2hjnel.png",
   "https://patchwiki.biligame.com/images/lysk/b/ba/rs710xpk4g90k5a8c5gu6xmn1yu5cpa.png"
],
   "hunter":[
   "https://patchwiki.biligame.com/images/lysk/3/36/75fklb53b33in3p4nqcs6vew41kdryh.png",
   "https://patchwiki.biligame.com/images/lysk/4/4b/75fklb53b33in3p4nqcs6vew41kdryh.png",
   "https://patchwiki.biligame.com/images/lysk/f/f5/nieud97zja62n63d82dpolivkkgldrl.png",
   "https://patchwiki.biligame.com/images/lysk/a/a9/agbucdwwtvo76ladd1fuk2je8hpbm7d.png",
   "https://patchwiki.biligame.com/images/lysk/c/c3/agbucdwwtvo76ladd1fuk2je8hpbm7d.png",
   "https://patchwiki.biligame.com/images/lysk/2/2d/90bspw09oer0xppefobeqk90qhz9h30.png",
   "https://patchwiki.biligame.com/images/lysk/d/d6/90bspw09oer0xppefobeqk90qhz9h30.png",
   "https://patchwiki.biligame.com/images/lysk/3/35/eudnbqig334v91q8y5vdcqi9fkz0q7h.png",
   "https://patchwiki.biligame.com/images/lysk/d/db/eudnbqig334v91q8y5vdcqi9fkz0q7h.png",
   "https://patchwiki.biligame.com/images/lysk/6/6b/eu40eszq6ysvf45mq807cx7rqtdiedm.png",
   "https://patchwiki.biligame.com/images/lysk/9/92/ki2qv7e2spvphgz5ktrsim0qwzsffbd.png",
   "https://patchwiki.biligame.com/images/lysk/a/a0/ki2qv7e2spvphgz5ktrsim0qwzsffbd.png",
   "https://patchwiki.biligame.com/images/lysk/3/38/owfn0ojppqdzdjn4ghyhxk34mik1c3e.png",
   "https://patchwiki.biligame.com/images/lysk/2/21/owfn0ojppqdzdjn4ghyhxk34mik1c3e.png",
   "https://patchwiki.biligame.com/images/lysk/4/4a/7ri0s7s5ih9tii9sttgtv3smb0js62q.png",
   "https://patchwiki.biligame.com/images/lysk/9/9a/nrpu9oi2h2rteozym8rx47an65csjt6.png",
   "https://patchwiki.biligame.com/images/lysk/0/06/nrpu9oi2h2rteozym8rx47an65csjt6.png"
]
}

let curFile = ["qy","sxh","ls","qc","xyz","hunter"];
// let curFile = ["hunter"];

const canvas = document.createElement("canvas")
canvas.id = "effect-canvas";

document.body.appendChild(canvas);

const ctx = canvas.getContext("2d")
const frameImages = {};
let frameIndex = 0;
let currentAnimationKey = "";

// canvas长宽大小（像素大小）需要与css里effect-canvas元素长宽一致，保持图片清晰
canvas.width = 80;
canvas.height = 80; 

// 调整动画播放速度，fps = 60正常速度，数字越小，播放速度越慢
const fps = 50; 
let lastTime = 0; 

// 预加载所有帧
for (const key in frames){
    const totalFrames = frames[key].length;
    frameImages[key] = []; 

    for (let i = 0; i< totalFrames; i++){
        frameImages[key][i] = new Image();
        frameImages[key][i].src = frames[key][i];
    }
}

function playAnimation() {
   
   // 每次点击会更换背景图
   const randomIndex = Math.floor(Math.random() * curFile.length);
   currentAnimationKey = curFile[randomIndex]; 
   frameIndex = 0;
   lastTime = performance.now()

   animate();
}

function animate(currentTime) {

   const deltaTime = currentTime - lastTime; 
   const interval = 1000 / fps; 

   if (deltaTime >= interval) {
    if (frameIndex >= frameImages[currentAnimationKey].length) {
        return; 
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(frameImages[currentAnimationKey][frameIndex], 0,0, canvas.width, canvas.height);
    frameIndex++;
    lastTime = currentTime; 
  }
   requestAnimationFrame(animate)
}

document.addEventListener("mousedown", (e) => {
   canvas.style.left = (e.clientX - canvas.width/2) + "px";
   canvas.style.top = (e.clientY - canvas.height/2) + "px";
   playAnimation();
})


</script>

<style>
#effect-canvas {
   position: fixed; 
   top: 0 ; 
   left: 0; 
   width: 80px; 
   height: 80px;
   pointer-events: none; 
}

</style>
</includeonly>