0から始めるJavaScriptの学習記録　その３　【ガチャと履歴】

こんにちは朱夏です。

JavaScriptの学習3日目やっていきます。
今回は、前2回の学習からガチャアプリを作ってみたいと思います。

ベースになるのは前回のおみくじアプリになります。

ドットインストール

JavaScriptでおみくじを作ろう (全9回)

https://dotinstall.com/lessons/omikuji_js_v5

JavaScriptで簡単なおみくじを実装する方法について学んでいきます。

それではやっていきます。

コード

今回も最初にコードを置いておきます。
先ずはHTMLです。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>ガチャ</title>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
      <!----- ヘッダー ----->
      <header>ガチャ</header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div id="btn">クリック！</div>
      <h2>排出結果</h2>
      <div id="inbox"></div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
      <script src="js/sample.js"></script>
   </body>
</html>

次にCSSファイルです。

body {
    background: grey;
}

#btn {
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 50%;
    margin: 30px;
    text-align: center;
    line-height: 200px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    cursor: pointer;
    box-shadow: 0 10px 0 #b34139;
    user-select: none;
}

#btn:hover {
    opacity: 0.9;
}

#btn:active {
    box-shadow: 0 5px 0 #b34139;
    margin-top: 35px;
    margin-bottom: 25px;
}

.ssr {
    background-color: yellow;
    margin: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    color: #cfcfcf;
    font-size: 25px;
    user-select: none;
    animation: ssr-anime 0.3s ease-in;
}

@keyframes ssr-anime {
    0% {
        transform: rotate(0) scale(0);
        opacity: 0;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
    
}

.sr {
    background-color: #cfcfcf;
    margin: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 25px;
    user-select: none;
    animation: sr-anime 0.2s ease-in;
}

@keyframes sr-anime {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
    
}

.rare {
    background-color: brown;
    margin: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 25px;
    user-select: none;
    animation: r-anime 0.2s ease-in;
}

@keyframes r-anime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
    
}

#inbox {
    display: flex;
    flex-wrap: wrap;
}

最後にJavaScriptファイルです。

'use strict'

{
    const btn = document.getElementById('btn')
    
    btn.addEventListener('click', () => {
        
        const n = Math.random();
        const gacha = document.createElement('div')

        if (n < 0.05) {
            btn.textContent = 'SSR';
            gacha.textContent = "SSR";
            gacha.classList.add('ssr');
        } else if (n < 0.2){
            btn.textContent = 'SR';
            gacha.textContent = "SR";
            gacha.classList.add('sr');
        } else {
            btn.textContent = 'R';
            gacha.textContent = "R";
            gacha.classList.add('rare');
        }
        
        document.getElementById('inbox').appendChild(gacha);

    })
}

解説

今回のガチャアプリは、おみくじの発展形として、以下2つの実装に挑戦しました。