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

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

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

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

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

ルーレットが回転するアニメーションの制御処理とルーレットのパネル表示位置を調整する処理がポイントです。

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

Youtubeへ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;
			}
			.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="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/roulette/img/panel.png" class="panel">
				<img src="/ut/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>

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

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

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

HTML

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

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

<div>タグの中へルーレットのパネル画像を20個用意します。
※ルーレットのパネル画像は、JavaScriptで円状に整列させます。

ボタンを用意

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

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

  • class="btn-start
    • ルーレットの回転をスタートするボタン
  • class="btn-stop
    • ルーレットの回転をストップするボタン

※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: absolute;

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

JavaScript

パネルを表示する位置を調整


/**
 * 初期化処理
 */
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;
},

このJavaScriptでルーレットのパネルを円状へ表示位置を調整しています。

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

/**
 * ルーレットの回転アニメーション
 */
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でルーレットを回転させています。

ポイントとしては

  • パネル画像の1つ1つの位置を調整するのではなく、ルーレット全体を回転させる。

ことです。

プログラミング解説講座

UT
UTの日常

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

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

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

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

Posted by UT