JavaScriptでルーレットゲームのプログラムを解説【JQuery】

2020年2月9日プログラムJavaScript,プログラムサンプル

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

JavaScriptのJQueryでルーレットゲームをプログラミングしたサンプルコードの解説です。
参考：WebGL開発に役立つ重要な三角関数の数式・概念まとめ （Three.js編）

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

JavaScriptでルーレットゲームをプログラミング

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

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

ルーレットは円状にパネルをJavaScriptで整列するのがポイントです。

ルーレットゲームのサンプル画面

ぜひチャレンジしてみてください。

※今回はHTMLタグの追加などを簡単に行えるように「JQuery」も使っています。

サンプル

JavaScriptのJQueryでプログラミングしたルーレットゲームのサンプルコードを紹介します。
(基本的に画像以外はコピペで動くと思います)

<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScriptでルーレットゲームを作成</title>
		<style>
			body {
				text-align: center;
				padding: 0;
				margin: 0;
			}
			ul {
				list-style: none;
			}
			.roulette {
				width: 90%;
				height: 500px;
				margin: auto;
				position: relative;
				border : solid 1px #333 ;
			}

			.panels {
				position: relative;
				margin: 0 auto;
				width: 400px;
				height: 400px;
			}

			.panel {
				width: 200px;
				position: absolute;
			}

			.panel img {
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<h1>JavaScriptでルーレットゲームを作成</h1>
		<div class="roulette">
			<div class="panels">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
				<img src="/roulette/img/panel.png" class="panel">
			</div>
		</div>
		<div>
			<button type="button" class="btn-start">start</button>
			<button type="button" class="btn-stop" disabled="true">stop</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;

				/*
				 * ルーレットの停止フラグ
				 */
				var stopFlag = false;

				/*
				 * ・ルーレットのパネル数
				 * ・ルーレットの回転数
				 */
				var panelNum  = 0,
					loopCount = 0;

				/**
				 * ルーレット
				 */
				var Roulette = {
					/**
					 * 初期化処理
					 */
					init: function () {
						// ルーレットのパネル配置を調整
						var $panels = $('.panel');
						var deg = 360.0 / $panels.length;
						var red = (deg * Math.PI / 180.0);
						var r   = $panels.width() / 2;
						var adjustY = ($panels.width() / 2) - ($panels.height() / 2);

						$panels.each(function (i, elem) {
							var tmp = i - ($panels.length / 4);

							var x = Math.cos(red * tmp) * r + r;
							var y = Math.sin(red * tmp) * r + r + adjustY;
							var t = tmp * deg;

							$(elem).css({
								'left': x,
								'top' : y,
								'transform': 'rotate(' + t + 'deg)'
							});

						});

						// ルーレットのパネル数を代入
						panelNum = $panels.length;
					},
					/**
					 * ルーレットの回転開始
					 */
					start: function () {
						stopFlag = false;
						Roulette.animation();
					},
					/**
					 * ルーレットの回転停止
					 */
					stop: function () {
						stopFlag = true;
					},
					/**
					 * ルーレットの回転アニメーション
					 */
					animation: function () {
						$('.panels').animate({
							deg: -((360 / panelNum) * loopCount)
						},{
							duration: sec,
							step: function (now) {
								$('.panels').css({
									transform: 'rotate(' + now + 'deg)'
								});
							},
							complete: function () {
								if (stopFlag) {
									return ;
								}
								loopCount++;
								Roulette.animation();
							}
						});
					}
				};

				global.Roulette = Roulette;

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

			$(document).ready(function () {

				// 初期化処理を実行
				Roulette.init();

				/**
				 * スタートボタンのクリックイベント
				 */
				$('.btn-start').click(function () {
					$(this).attr('disabled', true);
					Roulette.start();
					$('.btn-stop').attr('disabled', false);
				});

				/**
				 * ストップボタンのクリックイベント
				 */
				$('.btn-stop').click(function () {
					$(this).attr('disabled', true);
					Roulette.stop();
					$('.btn-start').attr('disabled', false);
				});

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

CODEPEN

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

HTML部分 の解説

JavaScriptのJQueryでプログラミングしたルーレットゲームのサンプルコードのHTML部分から解説します。

細かく解説していきます！

文字コードを指定

HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。

<meta charset="UTF-8">
metaタグでcharsetを指定する理由

metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。

ルーレットのパネルを作成

<div>タグの中へルーレットのパネル画像を20個用意します。

<div class="roulette">
	<div class="panels">
		<img src="/ut/roulette/img/panel.png" class="panel">

※ルーレットのパネル画像は、JavaScriptで円状に整列させます。

ボタンを用意

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

<button type="button" class="btn-start">start</button>
<button type="button" class="btn-stop" disabled="true">stop</button>
  • class="btn-start"
    • ルーレットの回転をスタートするボタン
  • class="btn-stop"
    • ルーレットの回転をストップするボタン

JQueryをCDNで読み込む

JavaScriptでHTMLタグの追加を簡単に行えるようにJQueryをCDNで読み込みます。

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

Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。

CSS部分の解説

JavaScriptのJQueryでプログラミングしたルーレットゲームのサンプルコードのCSS部分を解説します。

ルーレットのスタイルを調整

ルーレット枠のスタイル

.roulette {
	width: 90%;
	height: 500px;
	margin: auto;
	position: relative;
	border : solid 1px #333 ;
}

パネル枠のスタイル

.panels {
	position: relative;
	margin: 0 auto;
	width: 400px;
	height: 400px;
}

パネルのスタイル

.panel {
	width: 200px;
	position: absolute;
}

JavaScript部分の解説

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

ルーレットのパネル画像を円状に整列させます。

パネルの表示位置を調整

画面ロード時にルーレット パネルの表示位置をJavaScriptで調整します。
参考：WebGL開発に役立つ重要な三角関数の数式・概念まとめ （Three.js編）

/**
 * 初期化処理
 */
init: function () {
	// ルーレットのパネル配置を調整
	var $panels = $('.panel');
	var deg = 360.0 / $panels.length;
	var red = (deg * Math.PI / 180.0);
	var r   = $panels.width() / 2;
	var adjustY = ($panels.width() / 2) - ($panels.height() / 2);
	$panels.each(function (i, elem) {
		var tmp = i - ($panels.length / 4);
		var x = Math.cos(red * tmp) * r + r;
		var y = Math.sin(red * tmp) * r + r + adjustY;
		var t = tmp * deg;

		$(elem).css({
			'left': x,
			'top' : y,
			'transform': 'rotate(' + t + 'deg)'
		});
	});

	// ルーレットのパネル数を代入
	panelNum = $panels.length;
},

上記コードを細かく解説します。

ルーレットのパネルを円状に整列
ルーレットのパネルを円状に整列

ルーレットの表示位置を調整する関数を定義

init: function () {
},

ルーレットのパネルを取得

var $panels = $('.panel');

ルーレットのパネルの角度(degree)を計算

var deg = 360.0 / $panels.length;

ラジアン(radian)を計算

var red = (deg * Math.PI / 180.0);

※JavaScript関数のMath.PIで円周と角の比を計算。

円の半径を計算

var r   = $panels.width() / 2;

調整値を計算

var adjustY = ($panels.width() / 2) - ($panels.height() / 2);

ルーレットの各パネルを円状に整列

$panels.each(function (i, elem) {
	var tmp = i - ($panels.length / 4);
	var x = Math.cos(red * tmp) * r + r;
	var y = Math.sin(red * tmp) * r + r + adjustY;
	var t = tmp * deg;

	$(elem).css({
		'left': x,
		'top' : y,
		'transform': 'rotate(' + t + 'deg)'
	});
});

X座標 = 半径 x Cosθ

var x = Math.cos(red * tmp) * r + r;

Y座標 = 半径 x Sinθ

var y = Math.sin(red * tmp) * r + r + adjustY;

ルーレットの回転アニメーション

ルーレットを回転させるアニメーション処理を実装します。

ポイントはルーレットのパネルを回転させないでルーレットを回転させるようにします。

/**
 * ルーレットの回転アニメーション
 */
animation: function () {
	$('.panels').animate({
		deg: -((360 / panelNum) * loopCount)
	},{
		duration: sec,
		step: function (now) {
			$('.panels').css({
				transform: 'rotate(' + now + 'deg)'
			});
		},
		complete: function () {
			if (stopFlag) {
				return ;
			}
			loopCount++;
			Roulette.animation();
		}
	});
}

まとめ：JavaScriptでルーレットゲームをプログラム解説

今回はJavaScriptのJQueryでルーレットゲームをプログラムしたサンプルコードを解説しました。

JavaScriptを使ったゲームを作る上ではアニメーションの制御が重要になってきます。

ルーレットゲームのサンプル画面
読んで欲しい記事

他にもコピペで動くサンプルコードをいくつかあるので、ぜひチャレンジしてみてください。

最後まで見ていただきありがとうございました。

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2020年2月9日プログラムJavaScript,プログラムサンプル

Posted by ユート