■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>
■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');
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>
■参考
ブラウザでWEB 3Dデザインのスロットマシンはこちら
https://mam-mam.net/javascript/three_js_slot.html