■javascriptでスロットマシン ゲームを短いソースコードで作る
遊び方
「start」ボタンでスロットが開始します。
「stop」ボタンを押して3つの数字が同じだと当たりです。
0
0
0
ソースコード
<script> var carr=[{f:false,v:0,obj:null},{f:false,v:0,obj:null},{f:false,v:0,obj:null}]; var nowStatus=false; window.addEventListener("load",function(){ for(let i=0;i<carr.length;i++){ carr[i].obj=document.getElementById("c"+(i+1)); } setInterval(interval,20); }); function interval(){ if(nowStatus){ for(let i=0;i<carr.length;i++){ if(carr[i].f){ //1を足して10で割った余りを入れる(9を超えない用) carr[i].v = (carr[i].v+1) %10; carr[i].obj.innerHTML=carr[i].v; } } } } function start(){ if(nowStatus){return;} nowStatus=true; for(let i=0;i<carr.length;i++){ carr[i].f=true; } } function stop(c){ if(nowStatus){ carr[c].f=false; if(!carr[0].f && !carr[1].f && !carr[2].f){ nowStatus=false; if(carr[0].v==carr[1].v && carr[1].v==carr[2].v){ document.getElementById("char").innerHTML="あたり"; }else{ document.getElementById("char").innerHTML="はずれ"; } } } } </script> <style> .w33{width:33%;text-align:center;}.w100{width:100%;text-align:center;} </style> <div style="display:flex;width:300px;flex-wrap:wrap;"> <div id="c1" class="w33">0</div> <div id="c2" class="w33">0</div> <div id="c3" class="w33">0</div> <div class="w33"><button onclick="stop(0)">stop</button></div> <div class="w33"><button onclick="stop(1)">stop</button></div> <div class="w33"><button onclick="stop(2)">stop</button></div> <div class="w100"><button onclick="start()">start</button></div> </div> <div id="char"></div>
■3Dスロットマシン
WEB 3Dデザインのスロットマシンはこちら
https://mam-mam.net/javascript/three_js_slot.html
■javascriptでCanvasを使ったスロットマシン ゲームを作る
遊び方
「Start」ボタンでスロットが開始します。
「Stop」ボタンを押して3つの数字が同じだと当たりです。
ソースコードはかなり長くなります。
ソースコード
<script> function TMamSlot(){ 'use strict'; this.d=[0,0,0]; //0~999 this.ds=[0,0,0];//0:stop 1:start 2:stopping this.dv=[0,0,0]; this.status=0; //0 1 this.BStop=[]; this.BStart=null; this.can=null; this.ctx=null; this.result=null; this.size=30; this.family='BlinkMacSystemFont,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif,"Segoe UI"'; this.init=function(){ this.can=document.getElementById('slotcan'); this.can.width=300; this.can.height=200; this.can.style.maxWidth="360px"; this.can.style.width="100%"; this.ctx=this.can.getContext('2d', {willReadFrequently:true}); this.ctx.font=this.size+"px "+this.family; this.ctx.textAlign="center"; this.ctx.textBaseline="middle"; for(let i=0;i<this.d.length;i++){ this.BStop[i]=document.querySelector('#stop'+(i+1)); this.BStop[i].addEventListener('click',function(){ let id=parseInt(event.target.id.substr(-1))-1; if(this.status==1 && this.ds[id]==1){ this.ds[id]=2; } }.bind(this)); } this.BStart=document.querySelector('#start'); this.BStart.addEventListener('click',function(){ if(this.status==0){ this.start(); } }.bind(this)); this.result=document.querySelector("#slotresult"); this.draw(); } this.draw=function(){ let lg=this.ctx.createLinearGradient(0,0,0,this.can.height); lg.addColorStop(0.0,'rgb(255,255,255)'); lg.addColorStop(0.3,'rgb(255,255,255)'); lg.addColorStop(0.5,'rgb(180,255,255)'); lg.addColorStop(0.7,'rgb(255,255,255)'); lg.addColorStop(1.0,'rgb(255,255,255)'); this.ctx.fillStyle=lg; this.ctx.fillRect(0,0,this.can.width,this.can.height,1); for(let i=0;i<this.d.length;i++){ for(let j=-4;j<=4;j++){ let pos=this.d[i] % 100; //% 剰余 let v=Math.floor(this.d[i] / 100)+j; v=(10+v)%10; let size=this.size*(1-(Math.abs(j-pos/100)/5)); this.ctx.font=size+"px "+this.family; let col=Math.floor(Math.abs(256/16*(j-pos/100))); this.ctx.fillStyle="rgb("+col+","+col+","+col+")"; //let y=(j-pos/100)*this.size; let y=Math.sin((j-pos/100)/4*Math.PI/2)*this.can.height/2; this.ctx.fillText(v,this.can.width/3*i+this.can.width/6,this.can.height/2+y); } } this.ctx.beginPath(); this.ctx.strokeStyle="rgba(0,0,0,0.8)"; this.ctx.lineWidth=8; this.ctx.rect(0,0,this.can.width,this.can.height); this.ctx.stroke(); this.ctx.beginPath(); this.ctx.strokeStyle="rgba(0,0,0,0.3)"; this.ctx.lineWidth=1; this.ctx.moveTo(this.can.width*0.1,this.can.height/2-this.size*0.66); this.ctx.lineTo(this.can.width*0.9,this.can.height/2-this.size*0.66); this.ctx.moveTo(this.can.width*0.1,this.can.height/2+this.size*0.5); this.ctx.lineTo(this.can.width*0.9,this.can.height/2+this.size*0.5); this.ctx.stroke(); } this.start=function(){ if(this.status==1){return;} this.status=1; for(let i=0;i<this.d.length;i++){ this.ds[i]=1; this.dv[i]=0; } this.result.innerHTML=" "; this.starting(); } this.starting=function(){ for(let i=0;i<this.d.length;i++){ if(this.ds[i]==1){ this.dv[i]+=Math.floor(1+Math.random()*3); if(this.dv[i]>30){this.dv[i]=30;} }else if(this.ds[i]==2){ if(this.dv[i]>2){ this.dv[i]-=(Math.floor(Math.random()*this.dv[i]/10)+1); if(this.dv[i]<2){ if(this.d[i]%2==1){this.d[i]++;} this.dv[i]=2; } }else{ if(this.d[i]%2==1){this.d[i]++;} this.dv[i]=2; } } if(this.ds[i]!=0){ this.d[i]+=this.dv[i]; this.d[i] %= 1000; if(this.ds[i]==2 && this.dv[i]==2 && (this.d[i] % 100)==0){ this.ds[i]=0; this.dv[i]=0; } } } if(this.ds[0]==0 && this.ds[1]==0 && this.ds[2]==0){ this.status=0; if(this.d[0]==700 && this.d[1]==700 && this.d[2]==700){ }else if(this.d[0]==this.d[1] && this.d[1]==this.d[2]){ this.result.innerHTML="あたり"; }else if(this.d[0]==this.d[1] || this.d[1]==this.d[2] || this.d[0]==this.d[2]){ this.result.innerHTML="おしい"; }else{ this.result.innerHTML="はずれ"; } this.draw(); }else{ this.draw(); setTimeout(this.starting.bind(this),20); } } this.init(); } window.addEventListener('load',function(){ MamSlot=new TMamSlot; }); </script> <style> .slotButton{ display:inline-block; box-sizing:border-box; max-width:calc(100% - 0.5em); margin:6px; padding:0.5em; color:#000; text-shadow:1px 1px 2px #999; background:#fff; border:0px none #000; text-decoration:none; box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4); cursor:pointer; border-radius:10px 10px 10px 10px; vertical-align:middle; user-select: none; word-break:break-all; word-wrap:anywhere; } .slotButton:active{ box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.4) inset; } .slotButton:hover{} .slotStart{ background:#cfc; padding:1em 4em; } </style> <canvas id="slotcan"></canvas> <div style="display:flex;flex-wrap:wrap;width:100%;max-width:360px;"> <div style="width:33%;text-align:center;"><a class="slotButton" id="stop1">Stop</a></div> <div style="width:33%;text-align:center;"><a class="slotButton" id="stop2">Stop</a></div> <div style="width:33%;text-align:center;"><a class="slotButton" id="stop3">Stop</a></div> </div> <div style="width:100%;max-width:360px;text-align:center;"><a class="slotButton slotStart" id="start">Start</a></div> <div id="slotresult" style="width:100%;max-width:360px;font-size:32px;color:red;font-weight:bold;"> </div>