スロットゲームのリールが止まらない

javascript、css、htmlでスロットゲームを制作しているのですが、時々ストップボタンを押した際に、3つのリールのうち1つか2つが止まらないことがよくあります。
下記のコードから推測できる原因がありましたらご教授いただければと思います。
よろしくお願い致します。
【ソースコード】

css
1#slotmachinebox {
2	position: absolute;
3	top:50%;
4	left:50%;
5	display: block;
6	width: 460px;
7	height: 390px;
8	margin:0px auto;
9	padding: 0;
10	background-image: url(img/slotmainbg.png);
11}
12
13#slotmachinebox #reelbox {
14	position: absolute;
15	top: 64px;
16	left: 30px;
17	display: block;
18	overflow: hidden;
19	width: 430px;
20	height: 194px;
21	margin: 0;
22	padding: 0;
23}
24
25#slotmachinebox #reelbox .reel {
26	position: absolute;
27	z-index: 1;
28	display: block;
29	overflow: hidden;
30	width: 120px;
31	height: 180px;
32	margin-top: 5px;
33	margin-left: 15px;
34	padding: 0;
35}
36
37#slotmachinebox #reelbox .reel0{
38	top: 0px;
39	left: 10px;
40}
41
42#slotmachinebox #reelbox .reel1{
43	top: 0px;
44	left: 137px;
45}
46
47#slotmachinebox #reelbox .reel2{
48	top: 0px;
49	left: 274px;
50}
51
52#slotmachinebox #reelbox .wrapper{
53	list-style:none outside;
54	position: absolute;
55	top: 0px;
56	left: 0px;
57	width: 120px;
58	margin: 0;
59	padding: 0;
60}
61#slotmachinebox #reelbox .wrapper .icon0,
62#slotmachinebox #reelbox .wrapper .icon1,
63#slotmachinebox #reelbox .wrapper .icon2,
64#slotmachinebox #reelbox .wrapper .icon3,
65#slotmachinebox #reelbox .wrapper .icon4,
66#slotmachinebox #reelbox .wrapper .icon5,
67#slotmachinebox #reelbox .wrapper .icon6,
68#slotmachinebox #reelbox .wrapper .icon7,
69#slotmachinebox #reelbox .wrapper .icon8,
70#slotmachinebox #reelbox .wrapper .icon9,
71#slotmachinebox #reelbox .wrapper .icon10,
72#slotmachinebox #reelbox .wrapper .icon11,
73#slotmachinebox #reelbox .wrapper .icon12,
74#slotmachinebox #reelbox .wrapper .icon13,
75#slotmachinebox #reelbox .wrapper .icon14 {
76	display: block;
77	width: 120px;
78	height: 60px;
79	margin: 0;
80	padding: 0;
81	//text-indent: -10000px;
82	background-image: url(img/sloticons.png);
83}
84
85#slotmachinebox #reelbox .wrapper .icon0{
86	background-position: 0 0px;
87}
88
89#slotmachinebox #reelbox .wrapper .icon1{
90	background-position: 0 -60px;
91}
92
93#slotmachinebox #reelbox .wrapper .icon2{
94	background-position: 0 -120px;
95}
96
97#slotmachinebox #reelbox .wrapper .icon3{
98	background-position: 0 -180px;
99}
100
101#slotmachinebox #reelbox .wrapper .icon4{
102	background-position: 0 -240px;
103}
104
105#slotmachinebox #reelbox .wrapper .icon5{
106	background-position: 0 -300px;
107}
108
109#slotmachinebox #reelbox .wrapper .icon6{
110	background-position: 0 -360px;
111}

JavaScript
1	// 定数定義
2	var fps = 60; //FPS
3	var interval = 1 / fps * 1000;
4	
5	var maxRand = 65536; //最大乱数
6	//11070
7	var configNum = 6; //設定数
8	var configTable = [
9		// 0:BIG 1:REG 2:コイン 3:スイカ 4:ベル 5:チェリー 6:リプレイ
10		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定1
11		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定2
12		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定3
13		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定4
14		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定5
15		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]]  //設定6
16	];
17
18	var iconNum = 21; //リールに表示する絵柄絵柄数
19	var iconWidth = 120; //絵柄の幅
20	var iconHeight = 60; //絵柄の高さ
21	
22	var reelArray = new Array();
23	var reelNum = 3; //リール数
24	var reelMargin = 5;
25	var reelBaseX = 18;
26	var reelBaseY = 92;
27	var reelHeight = (iconHeight * iconNum); //リールの高さ
28	var reelMoveSpeedY = Math.floor(iconHeight / 3); //リール移動スピード
29
30	var iconArray = [//絵柄配列
31		[4, 5, 1, 3, 4, 6, 1, 3, 2, 6, 4, 3, 5, 6, 2, 5, 6, 4, 3, 0, 6],
32		[6, 4, 1, 3, 6, 5, 4, 5, 6, 4, 2, 3, 6, 0, 4, 3, 6, 1, 4, 2, 5],
33		[5, 3, 1, 4, 6, 3, 4, 0, 6, 3, 5, 6, 2, 3, 4, 6, 5, 0, 3, 4, 6]
34	];
35	var stopLineArray = [[1,1,1],[0,0,0],[2,2,2],[0,1,2],[2,1,0]]; //停止ライン配列
36	var stopLineId = 0;
37
38	//変数定義
39	var configId = Math.floor(Math.random()*configNum); //設定を決める
40	
41	var reelStopFlg = [null, null, null];
42	var reelposY = [0, 0, 0]; //リールの移動量
43	
44	var winIconArray = [ //当たり絵柄配列
45		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
46		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
47		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
48	];
49	var hitIcon = [
50		[0, 0, 0],
51		[0, 0, 0],
52		[0, 0, 0]
53	];
54	
55	// リール回転用
56	var reelmoveAnime;
57
58	addSlots();
59
60	function slotStart() {
61		reelStopFlg = [false, false, false];
62		winLottery();
63		reelmoveAnime = setInterval(slotMove, interval);
64		$('[id^=stopbtn]').css("pointer-events", "auto");
65	}
66
67	function slotStop(i) {
68			reelStopFlg[i] = true;
69		}
70
71	function winLottery() {
72		var iArray = [0,0,0];
73		var rand = Math.floor(Math.random()*maxRand);
74		for (var i = 0; i < configTable[configId].length; i++) {
75			if(configTable[configId][i][0] >= rand || rand <= configTable[configId][i][1]){
76				console.log("あたり");
77				iArray = [i,i,i];
78				wIcArrayRewrite(iArray);
79				break;
80			}
81			if(i == configTable[configId].length-1){
82				console.log("はずれ");
83				iArray[0] = Math.floor(Math.random()*configTable[configId].length);
84				iArray[1] = Math.floor(Math.random()*configTable[configId].length);
85				iArray[2] = Math.floor(Math.random()*configTable[configId].length);
86				wIcArrayRewrite(iArray);
87			}
88		}
89	}
90
91	function wIcArrayRewrite(iArray) {
92		for (var i = 0; i < reelNum; i++) {
93			for (var j = 0; j < iconNum; j++) {
94				if(iconArray[i][j] == iArray[i]){
95					winIconArray[i][j] = 1;
96				}else{
97					winIconArray[i][j] = 0;
98				}
99			}
100		}
101	}
102
103	//リール作成
104	function addSlots() {
105		reelStopFlg[i] = false;
106		for (var i = 0; i < reelNum; i++) {
107			$('.reel').eq(i).css("left", ((iconWidth + reelMargin) * i) + "px");
108			$('.wrapper').eq(i).css("height", reelHeight + "px");
109			$('.wrapper').eq(i).css("top", "-" + (iconHeight * Math.floor(Math.random()*iconNum)) + "px");
110			for (var j = 0; j < 24; j++) {
111				if (j < iconNum) {
112					$('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j] +
113						"'>" + iconArray[i][j] + "</li>");
114				} else {
115					$('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j - 21] +
116						"'>" + iconArray[i][j - 21] + "</li>");
117				}
118			}
119		}
120	}
121
122	//リール回転
123	function slotMove() {
124		for (var i = 0, stopCount = 0; i < reelNum; i++) {
125			if (!reelStopFlg[i] || reelposY[i] % iconHeight || winIconArray[i][(-reelposY[i] / iconHeight)+stopLineArray[stopLineId][i]] != 1) {
126				reelposY[i] += reelMoveSpeedY;
127				if (reelposY[i] > 0) reelposY[i] -= reelHeight;
128				$('.wrapper').eq(i).css("top", reelposY[i] + "px");
129			} else {
130				stopCount++;
131			}
132			if (stopCount == reelNum) {
133				$('#startbtn').css("pointer-events", "auto");
134				clearInterval(reelmoveAnime);
135				slotHits();
136			}
137		}
138	}
139
140	function slotHits() {
141		for (var i = 0; i < reelNum; i++) {
142			for (var j = 0; j < reelNum; j++) {
143				hitIcon[i][j] = ((-reelposY[i] / iconHeight) + j);
144				if (hitIcon[i][j] >= iconNum) {
145					hitIcon[i][j] -= iconNum;
146				}
147			}
148		}
149		if (iconArray[0][hitIcon[0][0]] == iconArray[1][hitIcon[1][0]] && 
150			iconArray[1][hitIcon[1][0]] == iconArray[2][hitIcon[2][0]]) {
151			$("#result").html("上段が揃いました");
152		} else if (iconArray[0][hitIcon[0][1]] == iconArray[1][hitIcon[1][1]] &&
153			iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][1]]) {
154			$("#result").html("中段が揃いました");
155		} else if (iconArray[0][hitIcon[0][2]] == iconArray[1][hitIcon[1][2]] &&
156			iconArray[1][hitIcon[1][2]] == iconArray[2][hitIcon[2][2]]) {
157			$("#result").html("下段が揃いました");
158		} else if (iconArray[0][hitIcon[0][2]] == iconArray[1][hitIcon[1][1]] &&
159			iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][0]]) {
160			$("#result").html("左斜めが揃いました");
161		} else if (iconArray[0][hitIcon[0][0]] == iconArray[1][hitIcon[1][1]] &&
162			iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][2]]) {
163			$("#result").html("右斜めが揃いました");
164		} else {
165			$("#result").html("残念！！");
166		}
167	}
168

html
1<html>
2	<body>
3		<div id="result"></div>
4		<div id="slotmachinebox">
5			<div id="reelbox">
6				<div class="reel reel0">
7					<ul class="wrapper">
8					</ul>
9				</div>
10				<div class="reel reel1">
11					<ul class="wrapper">
12					</ul>
13				</div>
14				<div class="reel reel2">
15					<ul class="wrapper">
16					</ul>
17				</div>
18			</div>
19		</div>
20	</body>
21</html>

【追記】
リールの移動速度を遅くしたらどうなるのかと思い、
reelMoveSpeedY = Math.floor(iconHeight / 10)
と変更して試して見たのですが、それでも1つだけ止まらない事がありました。
恐らくストップボタンを押すタイミングが関係しているのではないかと思います。

sousuke

2018/03/06 06:57

自分で考えたことや試してみたこと等はないのですか？回答者も読む気になりにくい質問だと思います。

Lhankor_Mhy

2018/03/06 07:20

「ストップボタン」とはどれのことですか？　ご提示のコードにてお示しください。

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

回答2件

なぜ「リールが止まらない」という問題に「リールの速度を遅くする」というアプローチをとったのですか？
「リールを止める部分のコードを見直す」のが普通だと思います。
「どこがわからないのかわからない」のでは「回答をもらってもわからない」
と思います。

おかしそうなところだけサクッと。

javascript
1    //リール作成
2    function addSlots() {
3        reelStopFlg[i] = false;
4        for (var i = 0; i < reelNum; i++) {

この部分ですがいきなり変数iを使っていますがこのfalseはどこに入るとお考えですか？
Stopの関数は引数にiをちゃんと持っています。

javascript
1    function slotStop(i) {
2            reelStopFlg[i] = true;
3        }

投稿2018/03/06 07:26

sousuke

総合スコア3828

自己解決

iArray[0] = Math.floor(Math.random()*configTable[configId].length-1);
iArray[1] = Math.floor(Math.random()*configTable[configId].length-1);
iArray[2] = Math.floor(Math.random()*configTable[configId].length-1);
このように変更したところすべてのリールが止まるようになりました。

投稿2018/03/06 08:00

nosonosolife

総合スコア42