jQueryプログラミング『しょぼいスロットゲームをつくってみた』

当ページはアフィリエイト広告を利用しています

記事内に広告が含まれています。
jQueryプログラミング『しょぼいスロットゲームをつくってみた』
提供:photoAC「ぽせ〜どん様」

学生の頃、ゲームプログラマーに憧れている時期がありまして、その反動でしょうかね……。

スロットゲーム(およびパチスロ)で遊んだことなんて数える程度ですが、jQueryでそれっぽいのをつくってみました。

目も当てられないような出来栄えで、誠に恐縮です。

とはいえ、プログラマー初心者の方(もしくは目指している方)はとりあえず「何かをつくってみる」のが、個人的には一番身につくと思います。

目指している方は、兎にも角にもレッツ!(^^)!プログラミング

あ…これがスロットゲームっぽいのです… もはや新感覚で羞恥の極み\(^o^)/

HTMLとCSS

<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.container_slot{
	display:flex;
	margin-top:0;
    margin-bottom:0;
	align-items:center;
	width:90%;
}
.container_slot table{
	height:100%;
	border:none;
	background-color:white;
	margin-top:0;
    margin-bottom:0;
	table-layout: fixed;
}
.container_slot table tr{
	background-color:white;
	height:40%;
}
.container_slot table td{
	border:1px solid #949495;

}
.container_slot .stop_slot_tr td div{
	border-radius:70%;
	padding:5px;
	margin:5px;
}
.container_slot table input{
	font-size:4vh;
	width:100%;
	border:none;
}
.display_slot_tr,.stop_slot_tr{	
	height:40%;	
}
.display_slot_td{	
	vertical-align:top; 
	position:relative;
	height: 45vh;
	padding:0;
}
.display_slot1,.display_slot2,.display_slot3{
	position: absolute;	
	background-color:transparent;
	text-align:center; 
	font-weight:bold;
	border:none;
}
.stop_slot_btn_1,.stop_slot_btn_2,.stop_slot_btn_3{
	height:100%;
	background-color:transparent;
	border:none;
}
.score_text_tr{
	height:10%;
}
.score_text_td{
	padding:0;
    margin:0;
}
.scoer_text_1,.scoer_text_2{
	height:100%;
	font-size:1.5vh;
}
.lever_btn{
	border-radius:50%;
    font-size:1.8vh;
	height:6em;
	border:none;
	font-weight:bold;
	background-color:#00000054;
}

</style>
</head>
<body>
	<div class="container_slot">
		<table>
			<tr class="display_slot_tr">
				<td class="display_slot_td"><input class="display_slot1" type="text"  value="" disabled></td>
				<td class="display_slot_td"><input class="display_slot2" type="text"  value="" disabled></td>
				<td class="display_slot_td"><input class="display_slot3" type="text"  value="" disabled></td>
			</tr>
			<tr class="stop_slot_tr">	
				<td>
					<div style="background-color:red;">
						<input class="stop_slot_btn_1" type="button" value="stop">
					</div>
				</td>
				<td>
					<div style="background-color:red;">
						<input class="stop_slot_btn_2" type="button" value="stop">
					</div>
				</td>
				<td>
					<div style="background-color:red;">
						<input class="stop_slot_btn_3" type="button" value="stop">
					</div>
				</td>
			</tr>
			<tr class="score_text_tr">
				<td class="score_text_td" colspan="2" >
					<input class="scoer_text_1" style="font-size:1.5vh;" type="text" value="" disabled>
				</td>
				<td class="score_text_td" colspan="1" >
					<input class="scoer_text_2" style="font-size:1.5vh;"  type="text" value="" disabled>
				</td>
			</tr>	
		</table>
		<button class="lever_btn" type="button">GO!!</button>
	</div>
</body>
</html>	

スタイルシート(css)はゴチャゴチャしていますが、あんまり気にしないでください。wordpressのcssと競合しちゃってるもんだから割と力技でコーディングしています。本来ならもっとシンプルに書けるはずです。
あと命名規則とか結構、無視していますので……m(__)m

jQuery

<script type="text/javascript">
/*
☆スロットゲーム
・スタートレバーで3つのリールが回転
・3つ揃えたらポイント獲得
*/
jQuery(document).ready(function ($) {

	let id_slot_1 = 0;//リール1のsetTimeoutを止めるためのIDを格納する変数
	let id_slot_2 = 0;//リール2のsetTimeoutを止めるためのIDを格納する変数
	let id_slot_3 = 0;//リール3のsetTimeoutを止めるためのIDを格納する変数
	let score_point = 0;//スコアを格納する変数
	let reel_1 = '☆';//リール1のパターン(絵柄)
	let reel_2 = '◇';//リール2のパターン(絵柄)
	let reel_3 = '◎';//リール3のパターン(絵柄)
	let pattern_data = '';//パターン(絵柄)を一時的に格納する変数
	let stop_flag_reel_1 = true;//ストップボタン_1の押下判定
	let stop_flag_reel_2 = true;//ストップボタン_2の押下判定	
	let stop_flag_reel_3 = true;//ストップボタン_3の押下判定
	let position_pattern_1 = 0;//パターン1(絵柄)の位置(topの余白)
	let position_pattern_2 = 0;//パターン2(絵柄)の位置(topの余白)
	let position_pattern_3 = 0;//パターン3(絵柄)の位置(topの余白)
	const message_1 = ['おしい!(>_<)', 'あぁ!!(+_+)', 'あとちょっと!(*_*)'];
	const message_2 = ['う~~ん、残念m(__)m', '次があるさ(p_-)', 'タイミングが難しいよね…(ーー゛)'];

	/*
	■初期化
	・ストップボタンを無効にする
	・スコアを表示する
	*/
	$(".stop_slot_btn_1").prop('disabled', true);
	$(".stop_slot_btn_2").prop('disabled', true);
	$(".stop_slot_btn_3").prop('disabled', true);
	$(".scoer_text_2").val('計' + score_point + '点');

	/*
	■(スタート)レバーボタン
	・ストップボタンを有効にする
	・各リールのストップボタン押下判定をfalse
	・レバーのアニメーション
	・各slotRotationで各リールを回す
	*/
	$(".lever_btn").on('click',function(){
		$(".lever_btn").prop('disabled', true);
		$(".stop_slot_btn_1").prop('disabled', false);
		$(".stop_slot_btn_2").prop('disabled', false);
		$(".stop_slot_btn_3").prop('disabled', false);
		stop_flag_reel_1 = false;
		stop_flag_reel_2 = false;	
		stop_flag_reel_3 = false;		
		$(".lever_btn").animate({marginTop:'50%'},300,'swing',function(){
			$('.lever_btn').css('marginTop', '0%');
		});
		slotRotation_1();
		slotRotation_2();
		slotRotation_3();
	});
	
	/*
	■ストップボタン
	・押下されたらストップボタンを無効にする
	・リールを止める【clearTimeout(id)でsetTimeoutを止める】
	・押下されたらリールの【ストップボタン押下判定】をtrueにする
	・【ストップボタン押下判定】が全てtrueになったら絵柄(パターン)が3つ揃ったかどうかをgotAllThree()でチェックする
	*/
	$(".stop_slot_btn_1").on('click',function(){
		$(".stop_slot_btn_1").prop('disabled', true);
		clearTimeout(id_slot_1);
		stop_flag_reel_1 = true;
		if(stop_flag_reel_1 && stop_flag_reel_2 && stop_flag_reel_3 )gotAllThree();
	});
	$(".stop_slot_btn_2").on('click',function(){
		$(".stop_slot_btn_2").prop('disabled', true);
		clearTimeout(id_slot_2);
		$(".display_slot2").stop(false, false);		
		stop_flag_reel_2 = true;
		if(stop_flag_reel_1 && stop_flag_reel_2 && stop_flag_reel_3 )gotAllThree();		
	});
	$(".stop_slot_btn_3").on('click',function(){
		$(".stop_slot_btn_3").prop('disabled', true);
		clearTimeout(id_slot_3);
		$(".display_slot3").stop(false, false);		
		stop_flag_reel_3 = true;
		if(stop_flag_reel_1 && stop_flag_reel_2 && stop_flag_reel_3 )gotAllThree();		
		
	
	});	
	/*
	■gotAllThree()【3つ揃ったかどうか】
	・☆は20点
	・◎は15点
	・◇は10点
	・△は5点
	・2つしか揃わなかった場合のメッセージ
	・まったく揃わなかった場合のメッセージ
	*/
	function gotAllThree(){
		if(reel_1 == reel_2 && reel_2 == reel_3 && reel_3 == reel_1){
			switch (reel_1){
				case '☆':
					$(".scoer_text_1").val('すごい!!(*_*)  20点獲得!');
					score_point += 20;
					$(".scoer_text_2").val('合計' + score_point + '点');
					break;
				case '◎':
					$(".scoer_text_1").val('おぉ!(*^_^*) 15点獲得');
					score_point += 15;
					$(".scoer_text_2").val('合計' + score_point + '点');				
					break;
				case '◇':
					$(".scoer_text_1").val('よっしゃー(^o^)  10点獲得!');
					score_point += 10;
					$(".scoer_text_2").val('合計' + score_point + '点');				
					break;	
				case '△':
					$(".scoer_text_1").val('いい感じ(^^)  5点獲得!');
					score_point += 5;
					$(".scoer_text_2").val('合計' + score_point + '点');				
					break;					
				default:
					break;
			}
		}else if(reel_1 == reel_2 || reel_1 == reel_3 || reel_2 == reel_3){
			$(".scoer_text_1").val(message_1[Math.ceil(Math.random()*3)-1]);

		}else{
			$(".scoer_text_1").val(message_2[Math.ceil(Math.random()*3)-1]);
		}
		$(".lever_btn").prop('disabled', false);	
	}
	
	/*
	■slotRotation_1,2,3()
	【setTimeoutで下記内容をミリ秒毎に繰り返し、リールが回っているかのように表示】
	・setTimeoutを止める時に必要となるIDも取得しておく
	・【却下】→×アニメーションを効かせながら表示する【上から下に移動】
	・moveDown_を使ってsetTimeoutで経過した時間だけ【上から下に移動】
	*/
	function slotRotation_1(){
		id_slot_1 = setTimeout(() => {
			slotRotation_1();
		},5);
		$('.display_slot1').css('top', moveDown_1()+'%');
		//$('.display_slot1').css('top', '0');
		//$(".display_slot1").animate({top:'80%'},350,'swing');			
	}
	function slotRotation_2(){
		id_slot_2 = setTimeout(() => {
			slotRotation_2();
		},6);
		$('.display_slot2').css('top', moveDown_2()+'%');
		//$('.display_slot2').css('top', '0');		
		//$(".display_slot2").animate({top:'80%'},350,'swing');	
	}
	function slotRotation_3(){
		id_slot_3 = setTimeout(() => {
			slotRotation_3();
		},5);
		$('.display_slot3').css('top', moveDown_3()+'%');
		//$('.display_slot3').css('top', '0');
		//$(".display_slot3").animate({top:'80%'},380,'swing');	
	}	
	/*
	■パターン(絵柄)選択
	・次に表示するパターンを選択する
	*/
	function reelPattern_1(pattern_data){
		switch (pattern_data){
			case '☆':
				reel_1 ='◇';
				break;
			case '◇':
				reel_1 = '△';
				break;
			case '△':
				reel_1 = '◎';
				break;	
			case '◎':
				reel_1 = '☆';
				break;					
			default:
				break;
		}
		return reel_1;
    }
	/*
	■リール2のパターン選択
	*/	
	function reelPattern_2(pattern_data){
		switch (pattern_data){
			case '◇':
				reel_2 ='◎';
				break;
			case '◎':
				reel_2 = '☆';
				break;
			case '☆':
				reel_2 = '△';
				break;	
			case '△':
				reel_2 = '◇';
				break;					
			default:
				break;
		}
		return reel_2;
    }
	/*
	■リール3のパターン選択
	*/		
	function reelPattern_3(pattern_data){
		switch (pattern_data){
			case '◎':
				reel_3 ='☆';
				break;
			case '☆':
				reel_3 = '△';
				break;
			case '△':
				reel_3 = '◇';
				break;	
			case '◇':
				reel_3 = '◎';
				break;					
			default:
				break;
		}
		return reel_3;
    }
	/*
	■上から下へのパターンの移動
	・タグの余白をミリ秒ごとに増加させることで、移動しているように見せる
	・起点からの余白が80%確保できた時点で0%に戻す(一番上に戻す)
	・一番上に戻ったら次のパターンを選択(reelPattern)
	*/	
	function moveDown_1(){
		position_pattern_1 += 1;
		if(position_pattern_1 > 80){
			position_pattern_1 = 0;
			$(".display_slot1").val(reelPattern_1(reel_1));
		}
		return position_pattern_1;
	}
	/*
	■上から下へのパターンの移動【リール2】
	*/	
	function moveDown_2(){
		position_pattern_2 += 1;
		if(position_pattern_2 > 80){
			position_pattern_2 = 0;
			$(".display_slot2").val(reelPattern_2(reel_2));
		}
		return position_pattern_2;
	}
	/*
	■上から下へのパターンの移動【リール3】
	*/		
	function moveDown_3(){
		position_pattern_3 += 1;
		if(position_pattern_3 > 80){
			position_pattern_3 = 0;
			$(".display_slot3").val(reelPattern_3(reel_3));
		}
		return position_pattern_3;
	}
	
});
</script>

スロットを回すところは当初、jQueryのanimate関数を使って動かしていましたが、動きに違和感がありましたのでやめました(笑)。結局、setTimeoutでミリ秒ごとにタグの余白を増加させて動かしています。あ、でもレバーのところはアニメーションでやってますよ(^^)

とりあえず、今回も特筆すべき点はありませんが、強いて言うなら……

setTimeout(実行したい関数,何ミリ秒後に実行したいか)

この部分でしょうか。setTimeou関数はスロットゲームの心臓部分ですが、この関数については前回の記事を参考にしてください。

プログラマーを目指している方、まずは簡単なゲームづくりからやってみましょう!^o^わりと楽しいですよ~

どこでも食っていけるWeb人間になれる【Web食いオンラインスクール】