スロットマシンをつくりましょう
①まず1つめのスロットを作る
test3.html--->
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="test3.css">
<title>スロットマシン</title>
<meta charset="UTF-8">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="slot1">0</div>
<div id="slot2">0</div>
<div id="slot3">0</div>
<div>
<button id="b1">start</button>
<button id="b2">start</button>
<button id="b3">start</button>
</div>
<script src="test3.js"></script>
</body>
</html>
--->test3.css
body{
background: #eddaec;
}
#slot1,#slot2,#slot3{/*3つまとめて指定*/
display: inline-block;
font-size: 3rem;
border: solid 3px #fff;
background: #05344d;
color: #fff761;
padding: 0 0 0 3rem;
}
--->test3.js
$(function(){
var cnt1 = 0;
var cnt2 = 0;
var cnt3 = 0;
var timer1, timer2, timer3;
$('#b1').on('click',function(){
if($('#b1').text() =='start'){ //startだったら始める
$('#b1').text('stop');//stopボタンに変更
timer1 = setInterval(function(){//無名関数
cnt1++;
if(cnt1 == 10){
cnt1 = 0;
}
$('#slot1').text(cnt1);//slot1にcnt1を表示
}),100;//ここでsetIntervalが終わる
}else{ //stopだったら止める
$('#b1').text('start');//startボタンに変更
clearInterval(timer1);
}
});
});
②何度も押せるとずるができるので
さっきのdisabledを使う
}else{ //stopだったら止める
$('#b1').text('start');//startボタンに変更
$('#b1').prop('disabled',true);//もうボタンは押せないようにする
clearInterval(timer1);
}
③コピペで同じものを作る
--->test3.js
$(function(){
var cnt1 = 0;
var cnt2 = 0;
var cnt3 = 0;
var timer1, timer2, timer3;
var money = 100;//初期金額は100円
//-------------------
//slot1に関して
//-------------------
$('#b1').on('click',function(){
if($('#b1').text() =='start'){ //startだったら始める
$('#b1').text('stop');//stopボタンに変更
$('#p1').text(money -= 1);//所持金を減らす
//?? ただこれだと左側から順番に押さないと最初に減らないね？
timer1 = setInterval(function(){//無名関数
cnt1++;
if(cnt1 == 10){
cnt1 = 0;
}
$('#slot1').text(cnt1);//slot1にcnt1を表示
}),100;//ここでsetIntervalが終わる
}else{ //stopだったら止める
$('#b1').text('start');//startボタンに変更
$('#b1').prop('disabled',true);//もうボタンは押せないようにする
clearInterval(timer1);
}
});
//-------------------
//slot2に関して
//-------------------
$('#b2').on('click',function(){
if($('#b2').text() =='start'){ //startだったら始める
$('#b2').text('stop');//stopボタンに変更
timer2 = setInterval(function(){//無名関数
cnt2++;
if(cnt2 == 10){
cnt2 = 0;
}
$('#slot2').text(cnt2);//slot1にcnt1を表示
}),100;//ここでsetIntervalが終わる
}else{ //stopだったら止める
$('#b2').text('start');//startボタンに変更
$('#b2').prop('disabled',true);//もうボタンは押せないようにする
clearInterval(timer2);
}
});
//-------------------
//slot3に関して
//-------------------
$('#b3').on('click',function(){
if($('#b3').text() =='start'){ //startだったら始める
$('#b3').text('stop');//stopボタンに変更
timer3 = setInterval(function(){//無名関数
cnt3++;
if(cnt3 == 10){
cnt3 = 0;
}
$('#slot3').text(cnt3);//slot1にcnt1を表示
}),100;//ここでsetIntervalが終わる
}else{ //stopだったら止める
$('#b3').text('start');//startボタンに変更
$('#b3').prop('disabled',true);//もうボタンは押せないようにする
clearInterval(timer3);
}
});
//-----reset-------
$('#reset').on('click',function(){
$('#b1').prop('disabled',false);
$('#b2').prop('disabled',false);
$('#b3').prop('disabled',false);
cnt1 = 0;
cnt2 = 0;
cnt3 = 0;
$('#slot1').text(cnt1);
$('#slot2').text(cnt2);
$('#slot3').text(cnt3);
});
});
続きは次回。
現時点での問題：
全部押したときの判定がまだない
そろったかどうかの判定
所持金をどのタイミングでへらすか？
