スロットゲームのリールを4つの絵柄分移動させてから停止させたい

Question

javascript、css、htmlでスロットゲームを制作しています。
このゲームは実際のスロットのように内部抽選の結果によって3つのリールの停止絵柄を決めるシステムです。

まず、関数winLotteryで65536以内の乱数を生成し配列configTableを参照して、乱数がconfigTableで決められた6ついずれかの範囲内に入っていれば当たり、
関数wIcArrayRewriteで配列iconArrayをチェック、配列winIconArrayの当たった絵柄部分の数値を「1」に書き換えます。
ストップボタンを押した際に、リールの位置からwinIconArrayの数値を参照し、1であればその絵柄に止まるという仕組みです。

今回はこれに以下の機能を追加したいと思っています。
・リールを4コマ滑らせてから止める
現在のコードでは画面内に当たった絵柄が表示されるまで止まりませんが、実際のスロットではボタンを押した瞬間の位置から4コマ(4つの絵柄)以内に滑らせてから停止させているようですので、
ボタンを押した瞬間の位置から4つの絵柄の内に当たった絵柄がない場合、強制的に停止させるようにしたいです。
・停止位置を横三つ斜め二つに対応させる
現在、当たり絵柄の停止位置は中央の横3つにしか対応していませんが、上下横・左右斜め3つにも対応させたいです。

上手く説明できていない部分がありましたら申し訳ございません。どうかご教授よろしくお願いいたします。
【ソースコード】※質問内容と関係のない部分は省いています

#slotmachinebox {
	position: absolute;
	top:50%;
	left:50%;
	display: block;
	width: 460px;
	height: 390px;
	margin:0px auto;
	padding: 0;
	background-image: url(img/slotmainbg.png);
}

#slotmachinebox #reelbox {
	position: absolute;
	top: 64px;
	left: 30px;
	display: block;
	overflow: hidden;
	width: 430px;
	height: 194px;
	margin: 0;
	padding: 0;
}

#slotmachinebox #reelbox .reel {
	position: absolute;
	z-index: 1;
	display: block;
	overflow: hidden;
	width: 120px;
	height: 180px;
	margin-top: 5px;
	margin-left: 15px;
	padding: 0;
}

#slotmachinebox #reelbox .reel0{
	top: 0px;
	left: 10px;
}

#slotmachinebox #reelbox .reel1{
	top: 0px;
	left: 137px;
}

#slotmachinebox #reelbox .reel2{
	top: 0px;
	left: 274px;
}

#slotmachinebox #reelbox .wrapper{
	list-style:none outside;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 120px;
	margin: 0;
	padding: 0;
}
#slotmachinebox #reelbox .wrapper .icon0,
#slotmachinebox #reelbox .wrapper .icon1,
#slotmachinebox #reelbox .wrapper .icon2,
#slotmachinebox #reelbox .wrapper .icon3,
#slotmachinebox #reelbox .wrapper .icon4,
#slotmachinebox #reelbox .wrapper .icon5,
#slotmachinebox #reelbox .wrapper .icon6,
#slotmachinebox #reelbox .wrapper .icon7,
#slotmachinebox #reelbox .wrapper .icon8,
#slotmachinebox #reelbox .wrapper .icon9,
#slotmachinebox #reelbox .wrapper .icon10,
#slotmachinebox #reelbox .wrapper .icon11,
#slotmachinebox #reelbox .wrapper .icon12,
#slotmachinebox #reelbox .wrapper .icon13,
#slotmachinebox #reelbox .wrapper .icon14 {
	display: block;
	width: 120px;
	height: 60px;
	margin: 0;
	padding: 0;
	//text-indent: -10000px;
	background-image: url(img/sloticons.png);
}

#slotmachinebox #reelbox .wrapper .icon0{
	background-position: 0 0px;
}

#slotmachinebox #reelbox .wrapper .icon1{
	background-position: 0 -60px;
}

#slotmachinebox #reelbox .wrapper .icon2{
	background-position: 0 -120px;
}

#slotmachinebox #reelbox .wrapper .icon3{
	background-position: 0 -180px;
}

#slotmachinebox #reelbox .wrapper .icon4{
	background-position: 0 -240px;
}

#slotmachinebox #reelbox .wrapper .icon5{
	background-position: 0 -300px;
}

#slotmachinebox #reelbox .wrapper .icon6{
	background-position: 0 -360px;
}

	// 定数定義
	var fps = 60; //FPS
	var interval = 1 / fps * 1000;
	
	var maxRand = 65536; //最大乱数
	//11070
	var configNum = 6; //設定数
	var configTable = [
		// 0:BIG 1:REG 2:コイン 3:スイカ 4:ベル 5:チェリー 6:リプレイ
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定1
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定2
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定3
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定4
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定5
		[[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]]  //設定6
	];

	var iconNum = 21; //リールに表示する絵柄絵柄数
	var iconWidth = 120; //絵柄の幅
	var iconHeight = 60; //絵柄の高さ
	
	var reelArray = new Array();
	var reelNum = 3; //リール数
	var reelMargin = 5;
	var reelBaseX = 18;
	var reelBaseY = 92;
	var reelHeight = (iconHeight * iconNum); //リールの高さ
	var reelMoveSpeedY = Math.floor(iconHeight / 3); //リール移動スピード

	var iconArray = [//絵柄配列
		[4, 5, 1, 3, 4, 6, 1, 3, 2, 6, 4, 3, 5, 6, 2, 5, 6, 4, 3, 0, 6],
		[6, 4, 1, 3, 6, 5, 4, 5, 6, 4, 2, 3, 6, 0, 4, 3, 6, 1, 4, 2, 5],
		[5, 3, 1, 4, 6, 3, 4, 0, 6, 3, 5, 6, 2, 3, 4, 6, 5, 0, 3, 4, 6]
	];

	//変数定義
	var configId = Math.floor(Math.random()*configNum); //設定を決める
	
	var reelStopFlg = [null, null, null];
	var reelposY = [0, 0, 0]; //リールの移動量
	
	var winIconArray = [ //当たり絵柄配列
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
	];
	var hitIcon = [
		[0, 0, 0],
		[0, 0, 0],
		[0, 0, 0]
	];
	
	// リール回転用
	var reelmoveAnime;

	addSlots();

	function slotStart() {
		reelStopFlg = [false, false, false];
		winLottery();
		reelmoveAnime = setInterval(slotMove, interval);
		$('[id^=stopbtn]').css("pointer-events", "auto");
	}

	function slotStop(i) {
			reelStopFlg[i] = true;
		}

	function winLottery() {
		var iArray = [0,0,0];
		var rand = Math.floor(Math.random()*maxRand);
		for (var i = 0; i < configTable[configId].length; i++) {
			if(configTable[configId][i][0] >= rand || rand <= configTable[configId][i][1]){
				console.log("あたり");
				iArray = [i,i,i];
				wIcArrayRewrite(iArray);
				break;
			}
			if(i == configTable[configId].length-1){
				console.log("はずれ");
				iArray[0] = Math.floor(Math.random()*configTable[configId].length);
				iArray[1] = Math.floor(Math.random()*configTable[configId].length);
				iArray[2] = Math.floor(Math.random()*configTable[configId].length);
				wIcArrayRewrite(iArray);
			}
		}
	}

	function wIcArrayRewrite(iArray) {
		for (var i = 0; i < reelNum; i++) {
			for (var j = 0; j < iconNum; j++) {
				if(iconArray[i][j] == iArray[i]){
					winIconArray[i][j] = 1;
				}else{
					winIconArray[i][j] = 0;
				}
			}
		}
	}

	//リール作成
	function addSlots() {
		reelStopFlg[i] = false;
		for (var i = 0; i < reelNum; i++) {
			$('.reel').eq(i).css("left", ((iconWidth + reelMargin) * i) + "px");
			$('.wrapper').eq(i).css("height", reelHeight + "px");
			$('.wrapper').eq(i).css("top", "-" + (iconHeight * Math.floor(Math.random()*iconNum)) + "px");
			for (var j = 0; j < 24; j++) {
				if (j < iconNum) {
					$('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j] +
						"'>" + iconArray[i][j] + "</li>");
				} else {
					$('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j - 21] +
						"'>" + iconArray[i][j - 21] + "</li>");
				}
			}
		}
	}

	//リール回転
	function slotMove() {
		for (var i = 0, stopCount = 0; i < reelNum; i++) {
			if (!reelStopFlg[i] || reelposY[i] % iconHeight || winIconArray[i][(-reelposY[i] / iconHeight)+1] != 1) {
				reelposY[i] += reelMoveSpeedY;
				if (reelposY[i] > 0) reelposY[i] -= reelHeight;
				$('.wrapper').eq(i).css("top", reelposY[i] + "px");
			} else {
				stopCount++;
			}
			if (stopCount == reelNum) {
				$('#startbtn').css("pointer-events", "auto");
				clearInterval(reelmoveAnime);
				slotHits();
			}
		}
	}

	function slotHits() {
		for (var i = 0; i < reelNum; i++) {
			for (var j = 0; j < reelNum; j++) {
				hitIcon[i][j] = ((-reelposY[i] / iconHeight) + j);
				if (hitIcon[i][j] >= iconNum) {
					hitIcon[i][j] -= iconNum;
				}
			}
		}
		if (iconArray[0][hitIcon[0][0]] == iconArray[1][hitIcon[1][0]] && 
			iconArray[1][hitIcon[1][0]] == iconArray[2][hitIcon[2][0]]) {
			$("#result").html("上段が揃いました");
		} else if (iconArray[0][hitIcon[0][1]] == iconArray[1][hitIcon[1][1]] &&
			iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][1]]) {
			$("#result").html("中段が揃いました");
		} else if (iconArray[0][hitIcon[0][2]] == iconArray[1][hitIcon[1][2]] &&
			iconArray[1][hitIcon[1][2]] == iconArray[2][hitIcon[2][2]]) {
			$("#result").html("下段が揃いました");
		} else if (iconArray[0][hitIcon[0][2]] == iconArray[1][hitIcon[1][1]] &&
			iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][0]]) {
			$("#result").html("左斜めが揃いました");
		} else if (iconArray[0][hitIcon[0][0]] == iconArray[1][hitIcon[1][1]] &&
			iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][2]]) {
			$("#result").html("右斜めが揃いました");
		} else {
			$("#result").html("残念！！");
		}
	}

<html>
	<body>
		<div id="result"></div>
		<div id="slotmachinebox">
			<div id="reelbox">
				<div class="reel reel0">
					<ul class="wrapper">
					</ul>
				</div>
				<div class="reel reel1">
					<ul class="wrapper">
					</ul>
				</div>
				<div class="reel reel2">
					<ul class="wrapper">
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

【追記】
「・停止位置を横三つ斜め二つに対応させる」は

var stopLineArray = [[1,1,1],[0,0,0],[2,2,2],[0,1,2],[2,1,0]]; //停止ライン配列
var stopLineId = 0;

このような変数を作って、

function winLottery() {
	//省略
	stopLineId = Math.floor(Math.random()*stopLineArray.length);
	//省略
}

function slotMove() {
	//省略
	if (!reelStopFlg[i] || reelposY[i] % iconHeight || winIconArray[i][(-reelposY[i] / iconHeight)+stopLineArray[stopLineId][i]] != 1) {
	//省略
}

こうしたところ上手くいきました。