デルタ システム ソリューションズ 株式会社

Webでスロットゲームをつくろう!(1/4)

技術情報 HTML/CSS JavaScript 作り方
更新日:2016/07/03

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

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

1

あなたへのおすすめ記事