【サンプルコード】JavaScriptでスロットゲームをプログラミング

2020年2月7日システムJavaScript,プログラミング初心者

【サンプルコード】JavaScriptでスロットゲームをプログラミング
【サンプルコード】JavaScriptでスロットゲームをプログラミング

どうも、UT(@ut_1029)です。

JavaScriptでスロットゲームをプログラミングしたサンプルコードを紹介します。スロットゲームは、JavaScriptのアニメーション勉強に最適でした。

サンプルコードのポイント

スロットのリールの表示位置をJavaScriptで制御して、回転のアニメーション制御処理がポイントです。

[作業用]JavaScriptでスロット作成〜プログラミング動画〜[Study With Me] #1

Youtubeで実際にJavaScriptでスロットをプログラミングしているライブコーディングの様子を投稿しました。ぜひ一緒にプログラミングをしましょう。
※ 本記事で紹介しているJavaScriptのスロットと違います。

JavaScriptで作成したスロットゲームのサンプルコード

JavaScriptで作成したスロットゲームのサンプルコード
JavaScriptで作成したスロットゲームのサンプルコード

JavaScriptプログラミングしたスロットゲームのサンプルコードを紹介します。
※HTML + CSS + JavaScriptを1つのファイルに記述しています。

<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScriptでスロットゲームを作成</title>
		<style>
			body {
				text-align: center;
				padding: 0;
				margin: 0;
			}
			ul {
				list-style: none;
			}
			.slot {
				width: 90%;
				height: 500px;
				overflow: hidden;
				margin: auto;
				border : solid 1px #333 ;
			}
			.slot-frame {
				height: 500px;
				position: relative;
				overflow: hidden;
				border : solid 1px #333 ;
			}
			.reels {
				width: 31%;
				position: absolute;
			}
			.reels:nth-child(1) {
				left: 0;
			}
			.reels:nth-child(2) {
				left: 33%;
			}
			.reels:nth-child(3) {
				right: 0;
			}
			.reel {
				height: 270px;
			}
			.reel img {
				display: block;
				width: 89%;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<h1>JavaScriptでスロットゲームを作成</h1>
		<div class="slot">
			<div class="slot-frame">
				<ul class="reels">
					<li class="reel"><img src="/youtube/slot/img/slot1.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot2.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot1.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot3.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot4.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot5.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot1.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot2.jpg"></li>
				</ul>
				<ul class="reels">
					<li class="reel"><img src="/youtube/slot/img/slot5.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot2.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot4.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot1.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot3.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot4.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot5.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot2.jpg"></li>
				</ul>
				<ul class="reels">
					<li class="reel"><img src="/youtube/slot/img/slot3.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot2.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot5.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot1.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot4.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot5.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot3.jpg"></li>
					<li class="reel"><img src="/youtube/slot/img/slot2.jpg"></li>
				</ul>
			</div>
		</div>
		<div>
			<button type="button" class="btn-start">start</button>
			<button type="button" class="btn-reset" disabled="true">reset</button>
		</div>
		<div>
			<button type="button" class="btn-stop" data-val="0" disabled="true">stop 0</button>
			<button type="button" class="btn-stop" data-val="1" disabled="true">stop 1</button>
			<button type="button" class="btn-stop" data-val="2" disabled="true">stop 2</button>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script>
			(function (global) {
				"use strict";

				/*
				 * スロットのリール回転速度(実行毎秒数)
				 */
				var sec = 100;

				/*
				 * スロットのリール情報
				 * ・スロットのリールelement
				 * ・スロットのリール停止フラグ
				 * ・スロットのリール回転数
				 */
				var $reels       = [],
					stopReelFlag = [],
					reelCounts   = [];

				/*
				 * 位置情報
				 */
				var slotFrameHeight     = 0,
					slotReelsHeight     = 0,
					slotReelItemHeight  = 0,
					slotReelStart       = 0,
					slotReelStartHeight = 0;

				/**
				 * スロット
				 */
				var Slot = {
					/**
					 * 初期化処理
					 */
					init: function init() {
						$reels[0] = $reels[1] = $reels[2] = null;
						stopReelFlag[0] = stopReelFlag[1] = stopReelFlag[2] = false;
						reelCounts[0] = reelCounts[1] = reelCounts[2] = 0;
					},
					/**
					 * スタートボタンのクリックイベント
					 */
					start: function () {
						for (var index = 0; index<3; index++) {
							Slot.animation(index);
						}
					},
					/**
					 * ストップボタンのクリックイベント
					 */
					stop: function (index) {
						stopReelFlag[index] = true;
						if (stopReelFlag[0] && stopReelFlag[1] && stopReelFlag[2]) {
							// 全リール停止したらリセットボタンを押下できるようにする
							$('.btn-reset').attr('disabled', false);
						}
					},
					/**
					 * 位置情報の初期化処理
					 */
					resetLocationInfo: function () {
						slotFrameHeight    = $('.slot-frame').outerHeight();
						slotReelsHeight    = $('.reels').eq(0).outerHeight();
						slotReelItemHeight = $('.reel').eq(0).outerHeight();
						slotReelStart      = 5 - 2;
						// リールの上下は、半分だけ表示させるための位置調整
						slotReelStartHeight = -slotReelsHeight;
						slotReelStartHeight = slotReelStartHeight + slotFrameHeight + ((slotReelItemHeight * 3 / 2) - (slotFrameHeight / 2));

						$('.reels').css({
							'top':slotReelStartHeight 
						});
					},
					/**
					 * スロットの回転アニメーション
					 */
					animation: function (index) {
						console.log('アニメーション', '開始', index);
						if (reelCounts[index] >= 5) {
							reelCounts[index] = 0;
						}

						console.log('slotReelStartHeight', slotReelStartHeight);
						console.log('reelCounts[index]', reelCounts[index]);
						console.log('slotReelsHeight', slotReelsHeight);
						console.log('top', slotReelStartHeight + (reelCounts[index] * slotReelItemHeight));

						$('.reels').eq(index).animate({
							'top': slotReelStartHeight + (reelCounts[index] * slotReelItemHeight)
						}, {
							duration: sec,
							easing: 'linear',
							complete: function () {
								console.log('アニメーション', '完了', index, reelCounts[index]);
								if (stopReelFlag[index]) {
									console.log('アニメーション', 'ストップ', index, reelCounts[index]);
									return ;
								}
								// 移動階数をカウント
								reelCounts[index]++;
								// スロット回転のアニメーションを実行する
								Slot.animation(index);
							}
						});
					},
				};

				global.Slot = Slot;

			})((this || 0).self || global);

			/**
			 * 読み込み後
			 */
			$(document).ready(function () {

				/*
				 * スロットの初期化処理を実行
				 */
				Slot.init();
				Slot.resetLocationInfo();

				/**
				 * スタートボタンのクリックイベント
				 */
				$('.btn-start').click(function () {
					// スタートボタンを押せないようにする
					$(this).attr('disabled', true);
					// スロットの回転を開始
					Slot.start();
					// ストップボタンを押せるようにする
					$('.btn-stop').attr('disabled', false);
				});

				/**
				 * リセットボタンのクリックイベント
				 */
				$('.btn-reset').click(function () {
					// リセットボタンを押せないようにする
					$(this).attr('disabled', true);
					// スタートボタンを押せるようにする
					$('.btn-start').attr('disabled', false);
					// ストップボタンを押せないようにする
					$('.btn-stop').attr('disabled', true);
					// スロットのリール情報を初期化
					Slot.init();
				});

				/**
				 * ストップボタンのクリックイベント
				 */
				$('.btn-stop').click(function () {
					// ストップボタンを押せないようにする
					$(this).attr('disabled', true);
					// レールの回転を停止
					Slot.stop($(this).attr('data-val'));
				});

			});
		</script>
	</body>
</html>

CODEPEN

See the Pen [sample code]javascript slot by UTのCodePen (@ut_1029) on CodePen.

JavaScriptで作成したスロットゲームのサンプルコード の解説

JavaScriptプログラミングしたスロットゲームのサンプルコードを解説します。

HTML

スロットのリールを作成

<div class="slot">
	<div class="slot-frame">
		<ul class="reels">
			<li class="reel"><img src="/youtube/slot/img/slot1.jpg"></li>

<ul>タグでリールを3列用意して、<li>タグでリールの1マスを作成します。

各種ボタンを用意

<button type="button" class="btn-start">start</button>
<button type="button" class="btn-reset" disabled="true">reset</button>

<button type="button" class="btn-stop" data-val="0" disabled="true">stop 0</button>
<button type="button" class="btn-stop" data-val="1" disabled="true">stop 1</button>
<button type="button" class="btn-stop" data-val="2" disabled="true">stop 2</button>

<button>タグで各種ボタンを用意します。

  • class="btn-start
    • スロットの回転をスタートするボタン
  • class="btn-stop
    • 回転したスロットのリールをストップするボタン
  • class="btn-reset
    • スロットのリールの3列ストップした時にリセットするボタン

※JavaScriptでクリックイベントを定義するために<button>タグに付けているclass名を使用します。

JQueryを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JavaScriptライブラリのJQueryを読み込んでいます。

CSS

CSSについてはポイントだけ補足します。

スロットのリールの表示位置を調整

position: relative;

positionでリールの表示位置を調整しています。

overflow: hidden;

overflowでスロットの枠からはみ出したリールを表示しないようにしています。

JavaScript

リールの開始位置を調整

/**
 * 位置情報の初期化処理
 */
resetLocationInfo: function () {
	slotFrameHeight    = $('.slot-frame').outerHeight();
	slotReelsHeight    = $('.reels').eq(0).outerHeight();
	slotReelItemHeight = $('.reel').eq(0).outerHeight();
	slotReelStart      = 5 - 2;
	// リールの上下は、半分だけ表示させるための位置調整
	slotReelStartHeight = -slotReelsHeight;
	slotReelStartHeight = slotReelStartHeight + slotFrameHeight + ((slotReelItemHeight * 3 / 2) - (slotFrameHeight / 2));

	$('.reels').css({
		'top':slotReelStartHeight 
	});
},

このコードでスロットのリール開始位置を上下に1マス半だけ表示するなどを制御しています。

スロットの回転アニメーション

/**
 * スロットの回転アニメーション
 */
animation: function (index) {
	console.log('アニメーション', '開始', index);
	if (reelCounts[index] >= 5) {
		reelCounts[index] = 0;
	}

	console.log('slotReelStartHeight', slotReelStartHeight);
	console.log('reelCounts[index]', reelCounts[index]);
	console.log('slotReelsHeight', slotReelsHeight);
	console.log('top', slotReelStartHeight + (reelCounts[index] * slotReelItemHeight));

	$('.reels').eq(index).animate({
		'top': slotReelStartHeight + (reelCounts[index] * slotReelItemHeight)
	}, {
		duration: sec,
		easing: 'linear',
		complete: function () {
			console.log('アニメーション', '完了', index, reelCounts[index]);
			if (stopReelFlag[index]) {
				console.log('アニメーション', 'ストップ', index, reelCounts[index]);
				return ;
			}
			// 移動階数をカウント
			reelCounts[index]++;
			// スロット回転のアニメーションを実行する
			Slot.animation(index);
		}
	});
},

このコードが、スロットの回転アニメーション部分です。

ポイントとしては

  • リールのタグを下方向へアニメーションして移動させている。
  • 最終地点に到達したら開始位置へ戻している。

といった処理に注意が必要です。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年2月7日システムJavaScript,プログラミング初心者

Posted by UT