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

2020年2月9日システムJavaScript,プログラムコード

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

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

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

プログラミング歴

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

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を使ったゲームを作る上ではアニメーションの制御が重要になってきます。

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

プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

UT
UTの日常
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年2月9日システムJavaScript,プログラムコード

Posted by UT