最近、ビンゴアプリを作った件

最近ビンゴを作った。

言語：Javascript

初期状態こんな感じで。

ランダムに数字を発生させる

→数字が表の中の数字にあったら、印をつける

5個揃ったら、ウィンドウが降りてくる

（デザインが切り替わるよりも、ウィンドウがあまりにも早くですぎている）

 <Javascriptのコード>

window.onload = function() {
// 数字格納 一時配列
var arr = [];

for (var i = 0; i < 100; i++) {
arr.push(i);
}

//arr == [0,1,2,3,4,5.................,99]

// シャッフル
shuffle(arr);

var panel = document.getElementById('panel');

// div要素作成
for (i = 0; i < 25; i++) {
var div = document.createElement('div');
div.className = 'card';
div.index = i;
div.number = arr[i];
div.innerHTML = div.number;
panel.appendChild(div);
// cards.push(div);
}

//arr2配列の中身のデータは表示されているカードの中身と一緒
var arr2 = [];

for (i = 0; i< 25; i++) {
arr2.push(arr[i]);
}

var arr3 = [];

var btnstart = document.getElementById('btn-start');

btnstart.onclick = function() {

var random = Math.floor( Math.random() * ( 99 - 0 ) + 0);
var re = document.getElementById('result');
re.innerHTML = random;
deleatnumber(random, arr2, arr3);

console.log(arr3.length);

if (arr3.length >= 5){

var num1 = [0, 1, 2, 3, 4];
var num2 = [0, 5, 10, 15, 20];
var num3 = [0, 6, 12, 18, 24];
var num4 = [5, 6, 7, 8, 9];
var num5 = [10, 11, 12, 13, 14];
var num6 = [15, 16, 17, 18, 19];
var num7 = [20, 21, 22, 23, 24];
var num8 = [1, 6, 11, 16, 21];
var num9 = [2, 7, 12, 17, 22];
var num10 = [3, 8, 13, 18, 23];
var num11 = [4, 9, 14, 19, 24];
var num12 = [4, 8, 12, 16, 20];

var nums = [num1, num2, num3, num4, num5, num6, num7, num8, num9, num10, num11, num12];

diffArray(nums, arr3); 

function diffArray(nums, arr3) {

for(var a = 0 ; a < nums.length; a++){
for (var j = 0; j < 5; j++){
var cap = nums[a].every(v => arr3.includes(v));
console.log(cap);
}
if (cap == true){
break;
}
}
if (cap == true){
window.alert("終了です！");
}
}
}
}
}

function shuffle(arr) {
var n = arr.length;
var temp, i;

while (n) {
i = Math.floor(Math.random() * n--);
temp = arr[n];
arr[n] = arr[i];
arr[i] = temp;
}
return arr;
}


//表示された数とカードの数字を整合し、消す関数
function deleatnumber(random, arr2, arr3) {
var deleatnflg = arr2.includes(random);

const results = arr2.find(item => item === random)
console.log(results);

//カードに表示された数がある場合
if(results != undefined){

var findnumber = arr2.indexOf( random );
console.log( findnumber );
//配列の中で、x番目にカードが存在するかがわかった

var cards = document.getElementById('panel');
var children = cards.children[findnumber];
console.log( children); 
//x番目のdiv要素を取得

var backTimer = setTimeout(function(){
children.className = 'card finish';
backTimer = NaN;
}, 1200)

arr3.push(findnumber);
console.log(arr3);
}
return arr3;
}

ビンゴアプリ設計の際に書いたメモ

必要な要素（HTML的な）

・数字をランダムに出すやつ（1から100）

・数字が書いてある表

アルゴリズム（流れ）

最初に、ランダムに選ばれた5x5マスの数字の表が出てくる

上にランダムに選ばれた数字が出てくるボックス、ストップボタン、スタートボタンがある

1 スタートボタンを押して、数字をランダムに出していく

2 ストップボタンを押して、数字を止める

3 止まった数字と同じ数字であれば表の中の数字に印がつく

1から3の流れを数回やり、縦か横に揃った時点でビンゴ終了

①まずHTMLを作る

②javascriptでcssをHTML内に当てはめていく

< javascript内のアルゴリズム >

乱数を発生させて、1~100までのうちの25枚のカードを5x5で並べる

シャッフルとは？？

配列の中の要素の順番を入れ替える

シャッフル関数処理＝結構有名

var n = arr.length;

    var temp, i;

    while (n) {

        i = Math.floor(Math.random() * n--);

        temp = arr[n];

        arr[n] = arr[i];

        arr[i] = temp;

    }

    return arr;

スタートボタンで0～99までの数字をランダムに表示する

クリックする

乱数を発生させる

数字を表示する

表示された数が、

表上の数字（ランダムに選ばれた0～99の中のうちの25個）にある場合

=配列の中に特定の数字が存在する

=findメソッドで検索、

もし、findメソッドで得られた値が普通の数値の場合、それはビンゴ内に存在する

undefindの場合、存在しない

もし、undefind出ないとき、存在する

・card内のHTML要素がresults（=random)のカードを消す処理

Cardは、arr2配列順に並んでいる

同じ数値のカードをjavascript内でどう認識させるか？

Aプラン

→探索メソッド的なので探してもらって配列の順番を返してもらう？

→返り値はカードの順番の値だから、arr[num]とすればその数値を特定できる

→配列の中で、x番目にカードが存在するかがわかった

→要素のx番目を所得するメソッド（処理）

→x番目のカードにクラス名を追加する

5マス場合、クリア！と表示させる処理

カードの親のdiv要素を取得

→A：カードの中に”card finish”っとなっているdiv要素がどれだけあるか判別するメソッド？？

B：cardfinishとなったカードに印をつける。（childrenを保持）

childrenの5つの組み合わせが満たしているかどうかを判断させる

( 0, 1, 2, 3, 4 )

( 0, 5, 10, 15, 20 )

( 0, 6 12, 18, 24 )

( 5, 6, 7, 8, 9 )

( 10, 11, 12, 13, 14 )

( 15, 16, 17, 18, 19 )

( 20, 21, 22, 23, 24 )

( 1, 6, 11, 16, 21 )

( 2, 7, 12, 17, 22 )

( 3, 8, 13, 18, 23 )

( 4, 9, 14, 19, 24 )

( 4, 8, 12, 16, 20 )

この12の組み合わせの配列を作った

for文でループさせてnum[x]がarr3に含まれるかどうか調べる

nums[x]の中で一つでも含まれていたらOK

arr3とnumsをそれぞれ比べて比較する

→nums[x]の中身ごとに比べていき、nums[x]の中身が全て満たされている場合、true

（＝arr3の中の数で、一つでもnums[x]を満たしている）

True or falseで出力させる

ではnums[x]の中身がarr3内にあることをどのようにどのように表現するか

Arr3とnums[x]を比べて共通要素を新しい配列に入れる

その新しい配列はnum[i]ごとに生成される。つまり12個。

そのうち、新しい配列の長さが5以上になったら、OK

childrenを保持する行為：

新しい配列を作り、配列の中に入れる