JavaScript：簡単なビンゴゲーム作ったのでまとめてみた

はじめに

タイトル通りJavaScriptでビンゴゲームを作ったので簡単にまとめてみます。
JSでアウトプットしたの初めてだったんで結構時間かかったから思い出補完的な感じで。。。
指摘あればコメントしてくれたら喜びます。

目標物の動作

・任意の範囲（今回は1～50)の数字からランダムに数字をピックアップ
・ピックアップされた数字が常に分かるようにする。
・一度ピックアップされた数字がピックアップされてはならない。
・全てピックアップされたら終わりの合図

HTML

bingo.html

<div id="result"></div>                                                  //ここにランダムに選ばれた数が表示される。
<ul>
  <li>1</li>                                                             //  当選番号の範囲番号を表で見えるようにする。
  <li>2</li>                                                             //  たぶんもっと短くかける？様な気がするけどスルー
　　　・
　　　・
　<li>50<li>
</ul>
<div class="btn-wrapper">
  <button class="button" id="button-start">                              //classは見た目のため。idはjsで要素取得のため
    START!
  </button>
</div>

JavaScript

bingo.js

var result = document.getElementById("result");                          //IDがresultのdocumentを取得して変数resultに代入。
var forStart = document.getElementById("button-start");                  //IDがbutton-startを...
var list = document.getElementsByTagName("li");                          //liタグを配列風オブジェクトとして変数listに代入。
var arraylist = Array.prototype.slice.call(list);                        //配列風オブジェクトlistを配列に変換し変数arraylistに代入

forStart.onclick = ()=>{                                                 //forStartに代入された要素がクリックされたときの処理↓
  var random = arraylist[Math.floor(Math.random()*arraylist.length)];    //arraylistからランダムに要素を取得し変数randomに代入
  result.innerHTML = random.innerHTML;                                   //innerHTMLメソッドを使ってhtmlを書き込み。
  random.classList.add("hit");                                           //ピックアップされた数字に色付け用にclassを追加
  var index_num = arraylist.indexOf(random);                             //ランダムにピックアップされた要素のIndex番号を取得し変数index_numに代入
  arraylist.splice(index_num,1);                                         //arraylistから取得したindex番号を引数としspliceメソッドで削除                                              
  if (arraylist[0]) {                                                    
  }
  else{                                                                  //arraylist[0]が無い時"finished!"と表示する。
    alert("finished!");
  }
}

補足:

1. getElementsByTagName等で取得したものは配列ではなく、配列風オブジェクトである。
2. 配列風オブジェクトとは.lengthメソッドをもったオブジェクトである。
3. 配列風オブジェクトから配列に変換するには Array.prototype.slice.call(変換したいもの);を使用する。
   　 ※[].protype.call();でも可能
4. 変換しなければならない理由はそのままだとindex番号がないため？（ここが不明

##さいごに
全然説明できている気がしないです。人にわかるように説明するには3倍理解しないといけないですね。
かなり雑ですがこれにて