ifとforを使って3連ガチャを作る

JavaScript

今まで習ったjavascriptで3連ガチャを作りましょう。

使う機能

  • function関数
  • 配列
  • for文
  • if文

配列に値を追加する

fruits = ['apple', 'orange', 'banana'];
fruits.push('strawberry');
  1. ガチャのカテゴリー、本数、確率を決め、変数に代入
  2. 画像をダウンロードして、カテゴリーごとに配列に登録
  3. 0〜99まで出るランダムを作成し、確立によってカテゴリーを確定させる
  4. カテゴリーが確定したら、もう1度ランダムで各カテゴリー内でキャラの抽選をする
  5. domでimg要素を表示させる
function randamChara(){

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 = 80;//★1が出る確率
let star2Ratio = 96;//★2の確率は★１＋★2の確率
let star1Total = 6;//★1キャラの総数
let star2Total = 4;//★2キャラの総数
let star3Total = 2;//★3キャラの総数

let character = [];

for(let i=1;i<4;i++){
let randomNum = Math.floor(Math.random()*100);
console.log(randomNum);

if(randomNum < star1Ratio){
let star1Num = Math.floor(Math.random()*star1Total);
character.push(star1[star1Num]);
}else if(randomNum < star2Ratio){
let star2Num = Math.floor(Math.random()*star2Total);
character.push(star2[star2Num]);
}else{
let star3Num = Math.floor(Math.random()*star3Total);
character.push(star3[star3Num]);
}
}


document.querySelector('#box').innerHTML = '<img src="img/'+character[0]+   '" alt=""><img src="img/'+character[1]+'" alt=""><img src="img/'+character[2]+'" alt="">';

}

 




さらにスニペット集の中から自身でボタンを選んで実装してみましょう。

pote-chil.com