webサイト制作の勉強｜2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

ガチャをjavascriptで作る

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

使う機能

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

配列に値を追加する

fruits = ['apple', 'orange', 'banana'];
fruits.push('strawberry');
  1. ガチャのカテゴリー、本数、確率を決め、変数に代入
  2. 画像をダウンロードして、カテゴリーごとに配列に登録
  3. 0〜99まで出るランダムを作成し、確立によってカテゴリーを確定させる
  4. カテゴリーが確定したら、もう1度ランダムで各カテゴリー内でキャラの抽選をする
  5. domでimg要素を表示させる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ワンピースガチャを作る</title>
<style>
img{
width: 200px;
}
</style>
</head>
<body>
<button onclick="randamChara();">ワンピース3連ガチャ</button>
<div id="box"></div>


<footer>

</footer>

<script src="js/script.js"></script>
</body>
</html>

script.js

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 chara = [];

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);
chara.push(star1[star1Num]);
}else if(randomNum < star2Ratio){
let star2Num = Math.floor(Math.random()*star2Total);
chara.push(star2[star2Num]);
}else{
let star3Num = Math.floor(Math.random()*star3Total);
chara.push(star3[star3Num]);
}
}

document.getElementById('box').innerHTML = '<img src="img/'+chara[0]+   '" alt=""><img src="img/'+chara[1]+'" alt=""><img src="img/'+chara[2]+'" alt="">'

}