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つが、諦めずにぶつかり続けることです。
諦め悪く、意味を理解しようとし続ける人が習得できます。