■javascriptでスロットマシン ゲームを短いソースコードで作る
遊び方
「start」ボタンでスロットが開始します。
「stop」ボタンを押して3つの数字が同じだと当たりです。
0
0
0
ソースコード
<script> //3つのスロットの状態などを保存する変数
//slots[0～2]{ spinning:回転中か、v:スロットの値(0～9)、elm:div要素を入れる } var slots=[ {spinning:false, v:0, elm:null}, {spinning:false, v:0, elm:null}, {spinning:false, v:0, elm:null} ]; //ウィンドウがロードされたら実行する関数 window.addEventListener("load",function(){ //ループ for(let i=0;i<slots.length;i++){ //idが"c1","c2","c3"の要素を取得してslots[0～2].elmに設定する slots[i].elm=document.getElementById( "c"+(i+1) ); } //0.02秒(20ミリ秒)毎にinterval関数を呼び出す setInterval(interval, 20); }); //0.02秒(20ミリ秒)毎に呼び出される関数 function interval(){ //ループ for(i=0～2){この部分が3回動く} for(let i=0;i<slots.length;i++){ //スロット[i]が回転中か if(slots[i].spinning){ //1を足して10で割った余りを入れる(9を超えない用) slots[i].v = (slots[i].v+1) %10; //スロットの値を表示させる slots[i].elm.innerHTML=slots[i].v; } } } //スタートボタンが押されたときに実行される関数 function start(){ //スロット３つ全てが停止中か if(!slots[0].spinning && !slots[1].spinning && !slots[2].spinning){ //スロット３つすべてが停止中なので全て回転中にする //ループ for(i=0～2){この部分が3回動く} for(let i=0;i<slots.length;i++){ slots[i].spinning=true; } document.getElementById("char").innerHTML=""; } } //ストップボタンが押されたときに実行される関数 function stop(c){ //スロット３つの内、１つでも回転しているか if(slots[0].spinning || slots[1].spinning || slots[2].spinning){ //スロット[c]を停止中にする slots[c].spinning=false; //スロットが3つとも回転していないか if(!slots[0].spinning && !slots[1].spinning && !slots[2].spinning){ if(slots[0].v==slots[1].v && slots[1].v==slots[2].v){ //スロット３つの値が同じ場合 document.getElementById("char").innerHTML="あたり"; }else if(slots[0].v==slots[1].v || slots[1].v==slots[2].v || slots[2].v==slots[0].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>
■３Ｄスロットマシン
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>