前回インチキな方法でABCの三つの文字をシャッフルしましたが、今回は別の方法でやってみました。
「配列」というものを使います。今までの変数が一つの箱にひとつの数値や文字列を入れていたものだとすれば、配列は一つの箱の中が複数に分かれていて順番にモノを入れられる感じ。その箱に A、B、C を入れて、その順番をシャッフルするという事をこれからやろうとしています。
シャッフルをする場合に、Fisher–Yates shuffleというアルゴリズムを使うと、均等にシャッフルできるみたいです。簡単な手順をこちらのサイトから引用すると、
ざっくりした手順は以下の通りです．
https://chooblarin.github.io/post/array-shuffle
・長さが N の配列がある．
・ [0,m−1] の区間からランダムな要素番号を取得し， m 番目の要素と入れ替える．
・ m は N からスタートし，1 つずつ減らしていき，0 になるまで繰り返す．
実際に書かれたスクリプト的には、こちらのやつが分かりやすかった。
var array = [1,2,3,4,5,6,7,8,9,10];
for(i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = array[i];
array[i] = array[j];
array[j] = tmp;
}
console.log(array);配列のi番目の要素をj番目 （1～iまでのランダムな値） の要素と入れ替える、終わったら(i-1)番目の要素をランダムなj番目 （1～i-1までのランダムな値） の要素と入れ替える…というのをi回繰り返す、みたいな感じだと思います。
そしてこのアルゴリズムと今までの知識＋αを総動員して作ったのがこちらです。
やってみてください！
もちろんこれは練習用のゲームなので面白くはないですが、シャッフルするというところがうまく機能していることは確認できると思います。
書いたコードはこんな感じ。（1,2,3,4）の配列をシャッフルして、１なら「た」、２なら「す」…の画像が表示されるようにしています。そして「た」「す」「け」「て」の順に並んだ時だけ「！！」の画像と「助かりました 押した回数：○○」のメッセージが出るという仕組み。もっと効率的に書けるよ！的なアドバイスぜひ下さい。
<p id="goal"><font color="red">たすけてゲーム</font></p>
<div id="btn">
<input type="button" value="たすけて" onclick="onBtn()">
</div>
<br>
<div id="gazo1"><img width="100" height="100" src="http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete0.png"></div>
<div id="gazo2"><img width="100" height="100" src="http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete0.png"></div>
<div id="gazo3"><img width="100" height="100" src="http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete0.png"></div>
<div id="gazo4"><img width="100" height="100" src="http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete0.png"></div>
<div id="gazo5"><img width="100" height="100" src="http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete0.png"></div>
<script>
var kaisu = 0;
var g0 = document.getElementById("btn");
var g1 = document.getElementById("gazo1");
var g2 = document.getElementById("gazo2");
var g3 = document.getElementById("gazo3");
var g4 = document.getElementById("gazo4");
var g5 = document.getElementById("gazo5");
var g6 = document.getElementById("goal");
var moji1 = 0;
var moji2 = 0;
var moji3 = 0;
var moji4 = 0;
function onBtn(){
kaisu = kaisu + 1;
g5.innerHTML ='<img width="100" height="100" src= "http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete0.png">';
var array = [1,2,3,4];
for(i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = array[i];
array[i] = array[j];
array[j] = tmp;
};
moji1 = array[0];
moji2 = array[1];
moji3 = array[2];
moji4 = array[3];
g1.innerHTML ='<img class="dot" width="100" height="100" src= "http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete' + moji1 + '.png">';
g2.innerHTML ='<img class="dot" width="100" height="100" src= "http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete' + moji2 + '.png">';
g3.innerHTML ='<img class="dot" width="100" height="100" src= "http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete' + moji3 + '.png">';
g4.innerHTML ='<img class="dot" width="100" height="100" src= "http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete' + moji4 + '.png">';
if(moji1 == 1 && moji2 == 2 && moji3 == 3 && moji4 ==4){
g5.innerHTML ='<img class="dot" width="100" height="100" src= "http://watanabesuguru.com/wp-content/uploads/2020/06/tasukete5.png">';
g0.innerHTML ='<input type="button" value="たすかった！">';
g6.innerHTML = "助かりました 押した回数：" + kaisu
kaisu = 0;
}
}
</script>次はもうちょっと見た目を整えるということを学びたいと思います。
