【JavaScript】おみくじを作ってみた

こんにちは！セミマサです。

今回はJavaScriptを使っておみくじを作ってみました。

デモサイト
ソースコード
おわりに

デモサイト

今回のデモサイトです。

ソースコード

HTML

<section>
    <div class="fortune-container">
        <div id="fortune">ここに結果が表示されます</div>
        <button id="fortune-button">おみくじを引く！</button>
    </div>
</section>

今回のHTMLです。

CSS

.fortune-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding:16px 0;
}
#fortune{
  border:2px red solid;
  font-size: 1.5rem;
  text-align: center;
  width: 48%;
  padding: 8px;
}

#fortune-button{
  margin-top: 8px;
  background-color: cornsilk;
  border-color: rosybrown;
  border-width: 4px;
}

今回のCSSです。

JavaScript


const button = document.getElementById('fortune-button')
const fortune = result =>{
    document.getElementById('fortune').textContent = result;
};
const shuffle = array =>{
    for(let i = array.length -1; i > 0; i--){
        let j = Math.floor(Math.random() * (i + 1));
        let reserve = array[i];
        array[i] = array[j];
        array[j] = reserve;
    }
    fortune(array[0]);
};
button.onclick = ()=>{
    const fortuneArray = ['大吉','中吉','小吉','吉','末吉','凶','大凶'];
    shuffle(fortuneArray);
};

今回のスクリプトです。

ボタンが押されるとおみくじの中身が入った配列がシャッフルされます。シャッフルした配列の最初の要素をおみくじの結果として画面に表示しています。

配列のシャッフルにはフィッシャーとイェーツのアルゴリズムを使いました。ウィキペディアの記述が詳しくてよかったです。

外部サイト