JavaScriptで3連ガチャを作成

index.html

<button id="start" onclick="gacha();">ガチャを引く</button>
<div id="img-box"></div>

<script>
function gacha(){
//配列を使ってランク別に画像を保存
let star3 = ['01.png','02.png'];
let star2 = ['03.png','04.png','05.png','06.png'];
let star1 = ['07.png','08.png','09.png','10.png','11.png','12.png'];

//console.log(star1);

//排出率を設定
let star1Ratio = 65;//★1キャラの排出率
let star2Ratio = 95;//★2キャラの排出率は30%、★1キャラの排出率65%との合計値

//ランク毎のキャラ数を設定
let star3Total = 2;
let star2Total = 4;
let star1Total = 6;

//結果を入れる空の配列を作成
let character = [];

//for文を使って3回ガチャを回す
for(let i=1;i<=3;i++){
//1~100までのランダムを作成し引く
let num = Math.ceil(Math.random()*100);
//console.log(num);

if(num <= star1Ratio){
//1~65は★1キャラ、★1キャラの中で抽選、0~5の中でランダム
let star1Num = Math.floor(Math.random()*star1Total);
character.push(star1[star1Num]);
}else if(num <= star2Ratio){
//0~3の中でランダム
let star2Num = Math.floor(Math.random()*star2Total);
character.push(star2[star2Num]);
}else{
let star3Num = Math.floor(Math.random()*star3Total);
character.push(star3[star3Num]);
}

}
console.log(character);

let result = '<img src="img/'+character[0]+'" alt=""><img src="img/'+character[1]+'" alt=""><img src="img/'+character[2]+'" alt="">';

document.querySelector('#img-box').innerHTML = result;
}
</script>