Webでスロットゲームをつくろう！（1/4）

Web上で動くスロットゲームの作り方を紹介します。
Webで動くゲームと言えば、一昔前ならばFlashを想像しますが、今回はHTML/CSSとJavaScriptのみで動くゲーム作成を目指します。

スロットのリール画像を準備しましょう。
今回、サンプルとしてフリー画像から用意しました。
出典：GATAG｜フリー素材集 壱　http://01.gatag.net/

スロットの枠をHTMLとCSSを使って作成します。
とりあえず、シンプルにこんな感じ。

<style>
.slots {
  width: 48px;
  height: 94px;
  border: 2px solid;
  float: left;
}
.slots .wrapper {
  width: 46px;
}
</style>

<div class="slots" id="slots_a">
  <div class="wrapper"></div>
</div>
<div class="slots" id="slots_b">
  <div class="wrapper"></div>
</div>
<div class="slots" id="slots_c">
  <div class="wrapper"></div>
</div>

"slots"のクラス名をつけた枠用のdivタグの中に、"wrapper"のクラス名をつけた「かぶせもの」用のdivタグが入っている状態です。

スロットいえば、円盤のリールがぐるぐる回るのが本物の機械の仕組みですが、ぐるぐる回るイメージをHTMLでどのように表現すればよいでしょうか。

円盤をHTMLで表現するのは難しそう・・・
いや、ここは発想の転換で乗り切りましょう。
ながーく縦に連続して並ぶ画像を準備して、下方向に移動させればよいのです！

そう。こんな風にながーい画像を準備して・・・
上から下に動かす！