乱数で表示される画像を固定したい

http://cya.sakura.ne.jp/java/kuji3.htm
犬でもわかるJavaScript講座

こちらを参考にさせていただき、スロットゲームを作成しています。

参考ページではストップボタンをリールそれぞれに配置し、ストップボタンを押した際に乱数を取得し画像を表示していますが、ストップボタンを一つにし停止図柄を固定したいと考えています。
ストップボタンを一つにするところまでは出来ましたが表示される画像を固定する事がどうしても出来ません。
試した事
・ myRnd = Math.floor(Math.random()*myImageCnt); // 乱数を求めるを削除し document.myFormImg1.src = myBuffer[myRnd].src;の画像指定部分を変更してみる事です。
JavaScript　画像などで調べるとやり方は色々出てきましたが、ストップボタンが無効になってしまい画像が停止しない状態になります。
そこで質問ですが、回転させるルーチンのところで乱数を求める、乱数番目の画像を表示するは不要に思えるのですが、いかがでしょうか？
また、そこが不要だった場合にストップのルーチン側の処理でmystopFlgがTrueだった場合、画像を表示するという処理で望む処理が得られるかと思いましたが停止処理が行われなくなるのはなぜでしょうか？

こちらが現在のコードです。よろしくお願いします。

HTML＆JavaScript
1<!DOCTYPE html>
2<html>
3	<head>
4	    <meta charset="utf-8">
5	    <title>Roulette.js</title>
6      <link rel="stylesheet" href="roulette.css">
7
8	</head>
9	<body>
10		<div id="header">
11				<h1>
12					ルーレット
13				</h1>
14		</div>
15
16
17
18<script type="text/javascript"><!--
19myImageCnt = 5;	// 画像の数
20myImage = new Array(	// 画像ファイル名の設定
21   "tuki.gif",
22   "nizi.gif",
23   "taiyou.gif",
24   "daiya.gif",
25    "medaru.gif",
26);
27myBuffer = new Array(myImageCnt);	// 画像イメージを収納するバッファ
28for(i=0; i<myImageCnt; i++){	// 画像イメージをメモリに取込む
29    myBuffer[i] = new Image();
30    myBuffer[i].src = myImage[i];
31}
32
33myStartFlg = 0;	// スタートボタンフラグ (0:動いていない 1:動いている)
34myStopFlg1 = 0;	// ボタン1フラグ (-1:動いている 0～n:止まっている)
35myStopFlg2 = 0;	// ボタン2フラグ (-1:動いている 0～n:止まっている)
36myStopFlg3 = 0;	// ボタン3フラグ (-1:動いている 0～n:止まっている)
37
38function myStart(){	// ボタンが押された
39    if (myStartFlg == 0){	// 既に押していなければ、
40        myStartFlg = 1;	// スタート!
41        myStopFlg1 = -1;	// ボタン1回転!
42        myStopFlg2 = -1;	// ボタン2回転!
43        myStopFlg3 = -1;	// ボタン3回転!
44        myLoop();
45    }
46}
47
48function myLoop(){	// 回転させるルーチン
49    if (myStopFlg1==-1||myStopFlg2==-1||myStopFlg3==-1){	// まだどこか回転しているか？
50        if (myStopFlg1==-1){	// ボタン1は回転しているか？
51            myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
52            document.myFormImg1.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
53        }
54        if (myStopFlg2==-1){	// ボタン2は回転しているか？
55            myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
56            document.myFormImg2.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
57        }
58        if (myStopFlg3==-1){	// ボタン3は回転しているか？
59            myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
60            document.myFormImg3.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
61        }
62        setTimeout( "myLoop()" , 50 );	// ぐるぐる回転させる!
63    }else{
64        myStartFlg = 0;	// 全部止まった
65    }
66}
67
68function myStop1(){	// ボタン1が押された
69    if (myStopFlg1 == -1){	// ボタン１は回転しているか？
70        myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
71        document.myFormImg1.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
72        myStopFlg1 = myRnd;	// 止まった画像の番号を退避
73    }
74}
75
76function myStop2(){	// ボタン2が押された
77    if (myStopFlg2 == -1){	// ボタン2は回転しているか？
78        myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
79        document.myFormImg2.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
80        myStopFlg2 = myRnd;	// 止まった画像の番号を退避
81    }
82}
83
84function myStop3(){	// ボタン3が押された
85    if (myStopFlg3 == -1){	// ボタン3は回転しているか？
86        myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
87        document.myFormImg3.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
88        myStopFlg3 = myRnd;	// 止まった画像の番号を退避
89    }
90}
91// --></script>
92
93<div class="roulette_container">
94
95
96<img src="nizi.gif" name="myFormImg1">
97<img src="daiya.gif" name="myFormImg2">
98<img src="nizi.gif" name="myFormImg3">
99
100</div>
101
102<div class="buttonhaiti">
103	<div style="margin-left:1%;margin-right:1%;">
104<form><input type="button" value="START" style="width:150%; padding: 10%;" onclick="myStart()"></form>
105<form><input type="button" value="STOP" style="width:150%;padding: 10%;" onclick="myStop1(); myStop2();myStop3();"></form>
106<div>
107</div>
108
109</div>
110</body>
111
112

css
1/*
2*ルーレットページ用css
3　*/
4
5@charset "utf-8";
6
7* {
8	margin:0; padding:0; 		/*全要素のマージン・パディングをリセット*/
9}
10body {
11              background-color: #fafad2; /*背景色*/
12              color: #333333;			/* 文字色 */
13}
14
15/*ヘッダー部分*/
16
17	#header
18			{display: block;
19				background-color: #f8dce0;
20				padding: 10px;												text-align: center;											border: 1px solid #cccccc;										margin:auto;
21	}
22
23
24
25    .roulette_container
26		{
27					display: -webkit-inline-flex;
28					display: inline-flex;
29					justify-content: space-around;
30					background-color:rgb(253, 252, 253);
31					width:100%;
32					height:auto;
33					border:1px solid rgba(253, 252, 253, 0.31);
34					box-shadow:0px 0px 3px lightpink;margin:auto;
35				}
36
37	input[type="button"] {width:100%;
38	}
39
40	.buttonhaiti
41	{
42	display: -webkit-inline-flex;
43	display: inline-flex;
44	justify-content: space-around;
45	width:100%;
46	height:auto;
47	border:1px solid rgba(253, 252, 253, 0.31);
48	box-shadow:0px 0px 3px lightpink;margin:auto;
49

Lhankor_Mhy

2020/03/17 00:51

ご提示のコードを試してみましたが、当方の環境では問題なく停止しました。何度か試行しましたが、ランダムな画像で停止しているように見えました。つまり、「表示される画像をランダムにする事がどうしても出来ません」という問題が再現しません。どうも、質問の内容と私の理解が行き違っているような気がしていますが、ご提示のコードで「表示される画像をランダムにする事がどうしても出来ません」という問題が発生する、という私の理解は正しいですか？正しいのであれば、環境の問題かもしれません。

shiro55

2020/03/17 01:36

ご回答ありがとうございます。そしてすみません。ランダムではなく指定した画像を停止させたいの間違いです。質問修正しておきます。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1    if (myStopFlg1 == -1){    // ボタン１は回転しているか？
2        myRnd = 0;    // 乱数を求めず固定値にする

のようにすればいいのではないか、と思いました。

投稿2020/03/17 03:06

Lhankor_Mhy

総合スコア36057

shiro55

2020/03/17 04:44

ご回答ありがとうございます。自分でいじっている最中に myRnd = Math.floor(Math.random()*myImageCnt); // 乱数を求めるを myRnd = Math.floor(Math.abs(1)*myImageCnt); // 乱数を求める myRnd = Math.abs(1)*myImageCnt); // 乱数を求める myRnd = Math.floor(Math.abs(1)*myImageCnt); // 乱数を求める同じように myRnd = 1; もやってみましたが、いずれもスロットが停止しなくなる状態になりました。