スロットゲームのリール回転部分をcss transformアニメーションに変更したい

Question

javascriptでスロットゲームを制作しています。リールの回転部分をcss transformを使用したアニメーションに変更しようとしているのですが、リールが上へ下へ不規則に動いたり、リールが画面上から消えてしまったりと上手くいきません。
具体的にどこに問題があるのか、解決方法をご教授よろしくお願いいたします。
【変更前のソースコード】※質問内容と関係のない部分は省いています

#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 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 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); //リール移動スピード
	
	//FPS
	var fps = 60;
	var interval = 1 / fps * 1000;
	
	var reelStopFlg = [null, null, null];
	var reelposY = [0, 0, 0];//リールの移動量
	var stopNum = [0, 0, 0];
	var stopposY = [0, 0, 0];
	var slipposY = [0, 0, 0];
	var hitIcon = [
		[0, 0, 0],
		[0, 0, 0],
		[0, 0, 0]
	];
	
	// リール回転用
	var reelmoveAnime;

	addSlots();

	function slotStart() {
		reelStopFlg = [false, false, false];
		slipposY = [0, 0, 0];
		reelStopNum = 0;
		reelmoveAnime = setInterval(slotMove, interval);
	}

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

	//リール作成
	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) {
				reelposY[i] += reelMoveSpeedY;
				if (reelposY[i] > 0) reelposY[i] -= reelHeight;
				$('.wrapper').eq(i).css("top", reelposY[i] + "px");
			} else {
				stopCount++;
			}
			if (stopCount == reelNum) {
				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("残念！！");
		}
	}

【変更部分】

#slotmachinebox #reelbox .wrapper{
	list-style:none outside;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 120px;
	margin: 0;
	padding: 0;
	-webkit-transition-property: -webkit-transform;
}

	//リール回転
	function slotMove() {
		for (var i = 0, stopCount = 0; i < reelNum; i++) {
			if (!reelStopFlg[i] || reelposY[i] % iconHeight) {
				reelposY[i] += reelMoveSpeedY;
				if (reelposY[i] > 0) reelposY[i] -= reelHeight;
				//$('.wrapper').eq(i).css("top", reelposY[i] + "px");
				$('.wrapper').eq(i).css({'-webkit-transform':'translate3d(0px, '+(-reelposY[i])+'px, 0px)', 
										'-webkit-transition':'-webkit-transform 400ms cubic-bezier(0,0,0.25,1)',
										'-webkit-animation-iteration-count':'infinite;'});
			} else {
				stopCount++;
			}
			if (stopCount == reelNum) {
				clearInterval(reelmoveAnime);
				slotHits();
			}
		}
	}

<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>

Comments

[Lhankor_Mhy]

HTMLもご提示ください。また、「うまくいきません」とは具体的には何が起きていますか？

[Lhankor_Mhy]

interval は16.666msですが、transition-durationは400msなので、アニメーションが終わる前にCSS書き換えられてそうな気がします。

[nosonosolife]

「-webkit-transform 400ms」の部分を「-webkit-transform '+interval+'ms」に、addSlots関数の「$('.wrapper').eq(i).css("top", "-" + (iconHeight * Math.floor(Math.random()*iconNum)) + "px");」を「$('.wrapper').eq(i).css({'-webkit-transform':'translate3d(0px, '+(-(iconHeight * Math.floor(Math.random()*iconNum)))+'px, 0px)'});」に変更したところ上手く動きましたが、どうも「if (reelposY[i] > 0){ reelposY[i] -= reelHeight;」の部分でリールが一瞬だけ上方向に動いてしまうようです。

[Lhankor_Mhy]

あー、なるほど、それは解消難しそうですねえ......　ループしたときにアニメーションなしのスタイルでつなげばいいのかもしれませんが、自然につながるかどうかはちょっとなんとも。

[nosonosolife]

返信遅れましたが、リールを高速で回している分には違和感はなかったので大丈夫そうです。ご回答ありがとうございました。

Answer 1

$('.wrapper').eq(i).css("top", "-" + (iconHeight * Math.floor(Math.random()*iconNum)) + "px");

$('.wrapper').eq(i).css({'-webkit-transform':'translate3d(0px, '+(-reelposY[i])+'px, 0px)', 
                         '-webkit-transition':'-webkit-transform 400ms cubic-bezier(0,0,0.25,1)',
                         '-webkit-animation-iteration-count':'infinite;'});

を

$('.wrapper').eq(i).css({'-webkit-transform':'translate3d(0px, '+(-(iconHeight * Math.floor(Math.random()*iconNum)))+'px, 0px)'});

$('.wrapper').eq(i).css({'-webkit-transform':'translate3d(0px, '+(-reelposY[i])+'px, 0px)', 
                         '-webkit-transition':'-webkit-transform 400ms cubic-bezier(0,0,0.25,1)',
                         '-webkit-animation-iteration-count':'infinite;'});

に変更したところ上手く動きました。