jquery スロットマシンを作ってみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

スロットマシンを作ってみよう

jQuery|2018年11月04日

2018年11月04日
  • このエントリーをはてなブックマークに追加

jQueryやJavaScriptの最低限は把握できましたか?
今度は、実際に簡単なプロダクトを作ってみましょう。
スロットマシンはJavaScriptを練習する上でも、良いアウトプットです。

基本的な技術ばかり練習しても作れるようにはなりません。
まずは実際に作って見たほうが、習得のスピードはあがります。

技術はインプットだけだと、どうにもなりません。
結局いつ、何にその技術を使えばいいのかはわからないからです。

実際、同じような感想を抱いていた方も多いのではないでしょうか。

ここからは、プロダクトを作りアウトプットしましょう。
アウトプットを軸に、新しい技術習得を進めていきます。

とはいっても、どう作ればいいかわからないとは思います。
まず、全体を把握することから始めましょう。

最初にページ下部にあるソースコードの解説を確認しましょう。
その後、ミッションに取り掛かってみてください。

ミッションの内容

スロットマシンも色々ありますが、今回は、キーボードで操作をします。
1〜9の数字が高速でカウントされ、スペースキーを押すと停止します。

それを3回繰り返し、同じ数字が重なったら「あたり」になります。
777が揃った時には「超あたり」になるようにしましょう。

もし、どうしても再現できない場合は、下記のファイルを参考にしてください。

今回から、一気に難易度があがります。
難しくて、悩むこともあるでしょう。

ただ、諦めずにソースコードに向き合い続けてください。
じっくりソースコードの意味を読み解きましょう。
時間がかかっても、挑戦してみてください。

今回のミッションをクリアするのに1ヶ月かかっても仕方ないと思います。
それでも、出来るまで向き合い続けてみてください。
何度も悩んでいるうちに、少しずつ、わかるようになってきます。

ソースコードの解説

<!--スロットの数字をくるくる表示させるエリアです。-->
<!--各スパンの中で順番にスロットの数字が回転します。-->
<span id="aSlot"></span>
<span id="bSlot"></span>
<span id="cSlot"></span>

まず、htmlは難しいことはありません。
すべてJavaScriptとjQueryで制御するので、上記だけでOKです。

JavaScriptについてはこれまで学んだことを全て活かす必要があります。
下記のコードをじっくり読んで、解読してみましょう。

<script>
         
    //最初に回転させるスロットを指定
    var slotno = "a";
         
    //スロットを回転させる関数を実行します。
    slotFunction(slotno);
         
    //Aスロット
    function slotFunction(slotno){
        //初期値を指定
        let count = 0;
        //0.1秒(100ミリ秒)ごとに数字を回転
        testTimer = setInterval(function(){
            //もし10まで数字が到達していなければ、、
            if(count !== 10){   
                //#aSlotにcountをプラスして表示。
                $("#"+slotno+"Slot").html(count++);
            //もし10まで数字が到達していれば、、
            }else{
                //countを0に戻して表示。
                count = 0;
                $("#"+slotno+"Slot").html(count++); 
            };
        } , 100);
    };
         
    //キーボードのキーを押してストップさせます。
    $(window).keydown(function(e){
        //e.keyCodeの32はスペースキーです。
        //スペースキーが押されると、、
        if(e.keyCode == 32){
                 
            //スロットの回転を停止させます。
            clearInterval(testTimer);
                 
            //もしslotnoがaだったら、、
            if(slotno == "a"){
                //次のslotnoのbを指定し、
                slotno = "b";
                //bのスロットを回転させます。
                slotFunction(slotno);
            //もしslotnoがbだったら、、
            }else if(slotno == "b"){
                //次のslotnoのcを指定し、
                slotno = "c";
                //cのスロットを回転させます。
                slotFunction(slotno);
            //もしslotnoがcだったら、、
            }else{
                //全てのスロットのテキストを取得し、
                var dataAslot = $("#aSlot").text();
                var dataBslot = $("#bSlot").text();
                var dataCslot = $("#cSlot").text();
                //当たり外れ判定をする関数にデータを投げます。
                allClearFunction(dataAslot,dataBslot,dataCslot);
            };
          };
           
    return false;
         
    });
         
    //当たり外れ判定をする関数
    function allClearFunction(dataAslot,dataBslot,dataCslot){
        //もし全てのデータが一致していて、、
        if(dataAslot == dataBslot && dataBslot == dataCslot){
            //その数字が7だったら、、
            if(dataCslot == 7){
                //超あたりを出力
                alert("超あたり");
            //7以外だったら、、
            }else{
                //あたりを出力
                alert("あたり");
            };
        //もし全てのデータが一致していなかったら、、
        }else{
            //はずれを出力
            alert("はずれ");
            //スロットをaに戻し、、
            slotno = "a";
            //スロットを全て空にし、、
            $("span").empty();
            //最初からスロット再開。
            slotFunction(slotno);
        };  
    };
</script>

進出のポイントとなるソースコードは下記の4つ。

まず、n秒ごとに処理を実行するsetInterval。
下記だと0.1秒ごとに中の処理を実行するという意味です。
100はミリ秒と言い、1000分の1秒で表されます。
1000が1秒を意味します。

testTimer = setInterval(function(){
//処理をここに書きます。
},100);

次が、変数の中の数字を1ずつ加算する処理。
繰り返しの度に1ずつ変数内の数字が追加されていきます。

count++

そして、キーボードを押した時の処理。
キーボードにはそれぞれ数字が割り当てられていて32がスペースキーです。
e.keyCode == 32 で何のキーが押されたか判別しています。

$(window).keydown(function(e){
    if(e.keyCode == 32){
        //処理をここに書きます。
    };
};

要素の中身を空にします。

$("span").empty();

最初は再現するのも一苦労で、なかなか難しいかもしれません。
しかし、何度も挑戦し続けるうちに、次第に理解できるようになってきます。

諦めずに、分からなくても何度も挑戦し続けましょう。
向き合い続けることが出来るなら、もう習得できたようなものです。

プログラミングで大事なのは、まず「調べれば出来る」ということ。
すべての書き方を記憶している必要はありません。

もう1つが、諦めずにぶつかり続けることです。
諦め悪く、意味を理解しようとし続ける人が習得できます。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら