ブラウザ：お気に入りに仕込む遊び技。スロットマシーンJavaScript

ブラウザでスロットを回す

～スロットマシーンのブックマークレット～

ブラウザの「お気に入り」は
普通はページを開くためのものですが、

実は JavaScriptを登録すると小さなツールとして使うことができます。

こうした仕組みは ブックマークレット と呼ばれます。

今回は遊びネタとして、

ページにスロットマシーンを登場させるブックマークレット

を作ってみます。

クリックすると、
ページ内でスロットマシーンが次々と回転を始めます。

仕組み：ブックマークレット（Bookmarklet）

ブックマークのURL欄に javascript: ... を入れておくと、
そのブックマークをクリックした瞬間に JavaScript が実行されます。

次の JavaScript を使います。長いですが 1行で書かれた JavaScript です。

JavaScript：

javascript:(()=>{const ID='multi_slot_pop_bm_v1';if(!document.getElementById(ID)){const s=document.createElement('style');s.id=ID;s.textContent=`.mspSlot{position:fixed;width:170px;height:108px;pointer-events:none;z-index:2147483647;transform:translate(-50%,-50%) scale(.72);opacity:0;animation:mspIn .22s ease-out forwards}.mspBox{position:relative;height:100%;border-radius:16px;background:linear-gradient(180deg,#2c2b30,#131217);border:3px solid #c9a64d;box-shadow:0 12px 34px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.06);padding:8px}.mspReels{display:flex;gap:7px;justify-content:center;margin-top:6px}.mspReel{position:relative;width:46px;height:62px;border-radius:10px;background:linear-gradient(180deg,#666a79,#3e4351);padding:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 7px rgba(0,0,0,.25)}.mspWin{position:relative;height:100%;overflow:hidden;border-radius:8px;background:#151821;box-shadow:inset 0 5px 14px rgba(0,0,0,.62)}.mspShadeT,.mspShadeB{position:absolute;left:0;right:0;height:10px;z-index:5}.mspShadeT{top:0;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0))}.mspShadeB{bottom:0;background:linear-gradient(0deg,rgba(255,255,255,.16),rgba(255,255,255,0))}.mspLine{position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:rgba(255,70,70,.4);z-index:5}.mspDigit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 38px/1 Arial,Helvetica,sans-serif;color:#f5f7ff;text-shadow:0 1px 0 rgba(0,0,0,.45);backface-visibility:hidden;transform-style:preserve-3d}.mspDigit.c{z-index:2;transform-origin:center bottom}.mspDigit.n{z-index:1;transform-origin:center top;transform:rotateX(90deg)}.mspDigit:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.22)}.mspLabel{font:800 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-align:center;color:#f7e4a0;text-shadow:0 0 6px rgba(255,220,120,.18)}.mspRes{font:800 11px/1 Arial,Helvetica,sans-serif;text-align:center;color:#fff;margin-top:7px;min-height:11px}.mspJackpot .mspBox{box-shadow:0 0 0 2px rgba(255,230,120,.78),0 0 24px rgba(255,220,100,.45),0 12px 34px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.08)}@keyframes mspIn{from{opacity:0;transform:translate(-50%,-50%) scale(.46)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes mspOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.82)}}`;document.head.appendChild(s)}const W=170,H=108,pad=20,x=pad+Math.random()*(window.innerWidth-pad*2),y=pad+Math.random()*(window.innerHeight-pad*2);const wrap=document.createElement('div');wrap.className='mspSlot';wrap.style.left=x+'px';wrap.style.top=y+'px';wrap.innerHTML=`<div class="mspBox"><div class="mspLabel">SLOT</div><div class="mspReels"><div class="mspReel"><div class="mspWin"><div class="mspShadeT"></div><div class="mspShadeB"></div><div class="mspLine"></div></div></div><div class="mspReel"><div class="mspWin"><div class="mspShadeT"></div><div class="mspShadeB"></div><div class="mspLine"></div></div></div><div class="mspReel"><div class="mspWin"><div class="mspShadeT"></div><div class="mspShadeB"></div><div class="mspLine"></div></div></div></div><div class="mspRes">SPIN...</div></div>`;document.body.appendChild(wrap);const wins=[...wrap.querySelectorAll('.mspWin')],res=wrap.querySelector('.mspRes');const jackpot=Math.random()<0.035,finals=jackpot?[7,7,7]:Array.from({length:3},()=>Math.floor(Math.random()*10));if(!jackpot&&finals.join('')==='777')finals[2]=8;const sleep=ms=>new Promise(r=>setTimeout(r,ms));const mk=(n,c)=>{const d=document.createElement('div');d.className='mspDigit '+c;d.textContent=n;return d};const flip=(win,n,d=80)=>new Promise(ok=>{const cur=win.querySelector('.c')||mk(Math.floor(Math.random()*10),'c');if(!cur.parentNode)win.appendChild(cur);const nxt=mk(n,'n');win.appendChild(nxt);cur.style.transition=`transform ${d}ms cubic-bezier(.25,.8,.25,1),filter ${d}ms linear`;nxt.style.transition=`transform ${d}ms cubic-bezier(.25,.8,.25,1)`;requestAnimationFrame(()=>{cur.style.transform='rotateX(-90deg)';cur.style.filter='brightness(.75)';nxt.style.transform='rotateX(0deg)'});setTimeout(()=>{cur.remove();nxt.className='mspDigit c';nxt.style.transform='rotateX(0deg)';nxt.style.transition='';ok()},d+8)});wins.forEach(w=>w.appendChild(mk(Math.floor(Math.random()*10),'c')));(async()=>{for(let i=0;i<3;i++){const total=12+i*6+Math.floor(Math.random()*3);for(let k=0;k<total;k++){const remain=total-k,n=remain===1?finals[i]:Math.floor(Math.random()*10),d=remain>7?52:remain>5?72:remain>3?102:170;await flip(wins[i],n,d);await sleep(remain>7?12:remain>5?24:remain>3?46:80)}await sleep(90)}const txt=finals.join('');res.textContent=txt;if(txt==='777'){wrap.classList.add('mspJackpot');res.textContent='777 !!'}setTimeout(()=>{wrap.style.animation='mspOut .45s ease-in forwards';setTimeout(()=>wrap.remove(),430)},2600)})();})();