はじめに
HTMLとかの復習ついでに、ここに残していきたいと思います。
誰かしらの参考になれば幸いです。
#修正部分
2021/12/29
以下を修正
・startボタン連打でスロットが加速してしまう
・同じストップボタンを3回押しても結果判定に入ってしまう
#ソースコード
Slot.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="Slot.css">
</head>
<body>
<h1>スロット</h1>
<p>
<script src="Slot.js"></script>
<input type="button" value="START" onclick=start()> <!--Startボタン-->
<div class="slotparts">
<input type="text" value=0 id=slot0></br> <!--スロットの目の部分-->
<input type="button" value="Stop" onclick=stop0()> <!--Stopボタン-->
</div>
<div class="slotparts">
<input type="text" value=0 id=slot1></br>
<input type="button" value="Stop" onclick=stop1()>
</div>
<div class="slotparts">
<input type="text" value=0 id=slot2></br>
<input type="button" value="Stop"onclick=stop2() >
</div>
<div id=output></div> <!--結果の出力部分-->
</p>
</body>
</html>
Slot.js
var begin=0; // ゲーム開始を表すフラグ
var stop_flag; // 目が確定しているスロットを記憶するためのフラグ(配列, 例:stop_flag[0]=1 はスロット0の目が確定していることを示す)
var slot; // スロットの目として表示する乱数を格納する配列(getElementById().value=乱数 とすれば良いので要らない説あり)
var ans; // 確定したスロットの目を格納する配列
var setIn; // setIntervalをclearIntervalで止める必要があるので
// -------スタートボタンが押された際の機能-------------------------
function start()
{
// if(begin===0)が無いとstartボタン連打でスロットが早くなってしまう
if(begin===0)
{
begin=1;
// 初期化、startボタンが押されたときに初期化したいのでここに書く
stop_flag=[0,0,0];
slot = [0, 0, 0];
ans = [0, 0, 0];
setIn=[];
num=0;
run0(); // start直後にスロットの目が変わらないとヌルゲーになるので最初だけ呼び出し
run1();
run2();
setIn[0]=setInterval(run0, 500); // 0.5秒の間隔でスロットの目を変える
setIn[1]=setInterval(run1, 500);
setIn[2]=setInterval(run2, 500);
}
}
// -------------------------------------------------------------
// -------スロットの目を変える部分の機能-------------------------
function run0() // スロット0
{
slot[0] = Math.floor(Math.random() * 9 + 1); // 乱数を生成
document.getElementById("slot0").value = slot[0]; // スロットの目として表示
}
function run1() // スロット1
{
slot[1] = Math.floor(Math.random() * 9 + 1);
document.getElementById("slot1").value = slot[1];
}
function run2() // スロット2
{
slot[2] = Math.floor(Math.random() * 9 + 1);
document.getElementById("slot2").value = slot[2];
}
// -------------------------------------------------------------
// -------スロットの目を止める部分の機能-------------------------
function stop0() // スロット0
{
clearInterval(setIn[0]); // 1.スロットの目が変わるのを止める
ans[0] = document.getElementById("slot0").value; // 2.Stopボタンを押した際のスロットの目を一度保存
document.getElementById("slot0").value = ans[0]; // 3.保存したスロットの目をslotのvalueに代入する
stop_flag[0]=1; // 4.目を止めたスロットとして、フラグを立てる
result(); // 5.結果判定へ
}
function stop1()
{
clearInterval(setIn[1]);
ans[1] = document.getElementById("slot1").value;
document.getElementById("slot1").value = ans[1];
stop_flag[1]=1;
result();
}
function stop2()
{
clearInterval(setIn[2]);
ans[2] = document.getElementById("slot2").value;
document.getElementById("slot2").value = ans[2];
stop_flag[2]=1;
result();
}
// -------------------------------------------------------------
// -------結果判定の機能の部分-----------------------------------
function result()
{
// 全てのスロットの目が確定しているかの確認
if((stop_flag[0]===1) && (stop_flag[1]===1) && (stop_flag[2]===1))
{
// 全ての目が同じだったら
if(ans[0]===ans[1] && ans[0]==ans[2])
{
window.alert("当たり");
}
else
{
window.alert("はずれ");
}
begin=0;
}
}
// -------------------------------------------------------------
Slot.css
body{
background-color: steelblue;
text-align: center;
}
h1{
text-align: center;
}
p{
font-size: 14px;
text-align: center;
}
.slotparts{ /* class属性で指定するときは頭に. */
display:inline-block;
}
#slot0{ /* id属性で指定するときは頭に# */
width:20px;
text-align: center;
}
#slot1{
width:20px;
text-align: center;
}
#slot2{
width:20px;
text-align: center;
}