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

2022.10.042022.10.27

プログラミング

提供：photoAC「ぽせ〜どん様」

記事内に広告が含まれています。

jQueryプログラミング『しょぼいスロットゲームをつくってみた』 — 提供：photoAC「ぽせ〜どん様」

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

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

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

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

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

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

HTMLとCSS
jQuery

HTMLとCSS

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<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>