学生の頃、ゲームプログラマーに憧れている時期がありまして、その反動でしょうかね……。
スロットゲーム（およびパチスロ）で遊んだことなんて数える程度ですが、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">
/*
☆スロットゲーム
・スタートレバーで３つのリールが回転
・３つ揃えたらポイント獲得
*/
jQuery(document).ready(function ($) {
let id_slot_1 = 0;//リール１のsetTimeoutを止めるためのIDを格納する変数
let id_slot_2 = 0;//リール２のsetTimeoutを止めるためのIDを格納する変数
let id_slot_3 = 0;//リール３のsetTimeoutを止めるためのIDを格納する変数
let score_point = 0;//スコアを格納する変数
let reel_1 = '☆';//リール１のパターン（絵柄）
let reel_2 = '◇';//リール２のパターン（絵柄）
let reel_3 = '◎';//リール３のパターン（絵柄）
let pattern_data = '';//パターン（絵柄）を一時的に格納する変数
let stop_flag_reel_1 = true;//ストップボタン＿１の押下判定
let stop_flag_reel_2 = true;//ストップボタン＿２の押下判定
let stop_flag_reel_3 = true;//ストップボタン＿３の押下判定
let position_pattern_1 = 0;//パターン１（絵柄）の位置（topの余白）
let position_pattern_2 = 0;//パターン２（絵柄）の位置（topの余白）
let position_pattern_3 = 0;//パターン３（絵柄）の位置（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になったら絵柄（パターン）が３つ揃ったかどうかを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()【３つ揃ったかどうか】
・☆は20点
・◎は15点
・◇は１０点
・△は5点
・２つしか揃わなかった場合のメッセージ
・まったく揃わなかった場合のメッセージ
*/
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;
}
/*
■リール２のパターン選択
*/
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;
}
/*
■リール３のパターン選択
*/
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％確保できた時点で０％に戻す（一番上に戻す）
・一番上に戻ったら次のパターンを選択（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;
}
/*
■上から下へのパターンの移動【リール２】
*/
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;
}
/*
■上から下へのパターンの移動【リール３】
*/
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食いオンラインスクール】
