短いJavascriptでスロットマシン ゲーム作成

■javascriptでスロットマシン ゲームを短いソースコードで作る

遊び方

「start」ボタンでスロットが開始します。
「stop」ボタンを押して3つの数字が同じだと当たりです。

ソースコード

<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>

■３Ｄスロットマシン

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>