【再質問】jqueryのスロットゲームのリールをぴったり止めたい

Question

現在、jqueryでスロットゲームを製作しています。
今のところリールを動かしてストップボタンで停止する部分は出来たのですが、停止した際にリールの絵柄がピタッと中心に止まるようにするにはどうすればいいでしょうか。
また、下記のコードの中で直しておいたほうがいい部分があればできる限りご教授いただきたいと思っております。よろしくお願いいたします。

$(function() {
	//配列
	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 reelArray = new Array();
	var reelNum = 3;
	var iconNum = 21;
	var iconWidth = 120;
	var iconHeight = 60;
	var reelMargin = 5;
	var reelBaseX = 18;
	var reelBaseY = 92;
	var result = 1000;
	var stopNum;
	var slipNum;
	var stopposY = [0, 0, 0]
	
	var reelStopFlg = [null, null, null];

	var reelposY = [0, 0, 0];
	var reelmoveAnime;
	var reelHeight = (iconHeight*iconNum); //リールの高さ
	
	//FPS
	var fps = 60;
	var interval = 1/fps*1000;
	
	addSlots();
	setNum(result);
	
	//BGM
	SlotBGM.play();
	
	$('#startbtn').click(function() {
		$(this).css("pointer-events", "none");
		slotstart();
	});
	
	$('[id^=stopbtn]').each(function(i){
    	$(this).click(function() {
			$(this).css("pointer-events", "none");
			slotStop(i);
		});
	});
	
	function slotstart(){
	    reelStopFlg = [false, false, false];
	    reelslip = [0, 0, 0];
	    reelStopNum = 0;
	    var startSpeedcnt = 10;
		reelmoveAnime = setInterval(slotMove, interval);
		$('[id^=stopbtn]').css("pointer-events", "auto");
	}
	
	function slotStop(i){
		stopNum = getRndNum(1, iconNum);
		slipNum = getRndNum(1, 4);
		stopposY[i] = -Math.floor(iconHeight * stopNum);
		reelStopFlg[i] = true;
	    SeStopBtn.play();
	}
	
	//リール作成
	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");
			for (var j = 0; j < 24; j++) {
				if(j < 21){
					$('.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) {
				reelposY[i] += Math.floor(iconHeight/3);
				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);
			}
		}
	}
});

		<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 id="controllerbox">
				<div id="startbtn">
				</div>
				<div id="stopbtn" class="btn1">
				</div>
				<div id="stopbtn" class="btn2">
				</div>
				<div id="stopbtn" class="btn3">
				</div>
			</div>
		</div>

Comments

[unau]

html も提示していただくのは難しいでしょうか。