CSS Spriteとjavascriptで回してみた

CSS javascript

先日、いつもの様にWebを彷徨ってたところ、
http://gihyo.jp/design/serial/01/ss-design/0010
でCSS Spriteなるテクニックが紹介されてた。
このテクニックを使う方法で自分が思いついたのは、スロットマシンのリール。
早速試してみた。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body { font-family: verdana; }
#LR, #CR, #RR {
	border: solid 1px #696969;
	width: 105px; height: 165px;
	float: left;
}
#LR { background-image: url('./aodon_reel_left.jpg'); }
#CR { background-image: url('./aodon_reel_center.jpg'); }
#RR { background-image: url('./aodon_reel_right.jpg'); }

input  { width: 105px; font: normal 1em Verdana; }
select { width: 80px; font: normal 1em Verdana; }
</style>
<script type="text/javascript">
var fL, fC, fR; //リール状態フラグ false:回転中 true:停止
var iL, iC, iR; //setInterval用
var yL, yC, yR; //リールの停止位置
fL = true; fC = true; fR = true;

function rotate() {
	if (fL && fC && fR) {
		fL = false; fC = false; fR = false;
		var sp = document.getElementById('speed').value;
		yL = -990; yC = -990; yR = -990;
		iL = setInterval("rotateLeft()", sp);
		iC = setInterval("rotateCenter()", sp);
		iR = setInterval("rotateRight()", sp);
	}
}

function rotateLeft() {
	if (yL > 165 ) { yL = -990; }
	if (fL) { clearInterval(iL); yL = adjust(yL);
	} else { yL = yL + 11; }
	var posL = '0px ' + yL + 'px';
	document.getElementById('LR').style.backgroundPosition = posL;
}
function rotateCenter() {
	if (yC > 165 ) { yC = -990; }
	if (fC) { clearInterval(iC); yC = adjust(yC);
	} else { yC = yC + 11; }
	var posC = '0px ' + yC + 'px';
	document.getElementById('CR').style.backgroundPosition = posC;
}
function rotateRight() {
	if (yR > 165 ) { yR = -990; }
	if (fR) { clearInterval(iR); yR = adjust(yR);
	} else { yR = yR + 11; }
	var posR = '0px ' + yR + 'px';
	document.getElementById('RR').style.backgroundPosition = posR;
}

//リールがズレた時の位置補正
function adjust(ss) {
	if (ss == 0) { return ss; }
	var mod = ss % 55
	if (mod == 0) { return ss; }
	if (ss < 0) {
		if (mod == -44) { return (ss + (-11)); }
		return (ss + mod * -1);
	} else {
		if (mod == 11) { return (ss - 11); }
		return (ss + (55 - mod));
	}
}	

function stopLeft() { fL = true; }
function stopCenter() { fC = true; }
function stopRight() { fR = true; }

</script>
<title>CSS Sprite で Slot Machine</title>
</head>
<body>
<h1>CSS SpriteでSLOT</h1>
<div id="box">
	<div id="LR"></div>
	<div id="CR"></div>
	<div id="RR"></div>
</div>
<br style="clear: both;">
<div id="box">
	<input type="button" value="stop" onclick="stopLeft();">
	<input type="button" value="stop" onclick="stopCenter();">
	<input type="button" value="stop" onclick="stopRight();">
</div>
<br style="clear: both;">
<div>
	<select id="speed">
		<option value=1>1
		<option value=5>5
		<option value=10 selected>10
		<option value=50>50
		<option value=100>100
	</select>
	<input type="button" value="GO" onclick="rotate();">
</div>
</body>
</html>

感想

最初は1pxづつ背景画像をずらしてたんだけど、これだと、setIntervalの間隔が1ミリ秒でも
リールの回転速度が全然遅い。この辺りはPCの性能によってだいぶ違ったりするのだろうか？
で、ソース。色々共通化出来るんだろうけど、なんかうまくいかなかった。そのうちまた弄ってみる。
とりあえずエラーは出てない。
よければここで遊んで見て下さい(；^ω^)