■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つの数字が同じだと当たりです。
ソースコードはかなり長くなります。