JavaScriptでおみくじを作ろう！

JavaScript

今回はフロントエンドで使用するJavaScriptを使っておみくじを作っていきます。

JavaScriptのフレームワークとして、Vue.js、Reactが最近だと使われる

ことが多いのですが、今回は素のJavaScriptを使って簡単な

おみくじゲームを作っていこうと思います。

以下の動画は完成版のイメージです。

今回解説しないこと

HTML、CSSの書き方については解説しません。

JavaScript部分のみ解説をします。

まずは以下のソースコードをお手持ちの

テキストエディタに貼り付けてください。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>簡単おみくじ</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="btn">クリック</div>
  <script src=main.js></script>
</body>

</html>

@charset "utf-8";

body {
  background-color: #efefef;
}

#btn {
  margin: 30px auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #ef454a;
  text-align: center;
  line-height: 200px;
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.9;
  box-shadow: 0 10px 0 #d1483e;
  border: 3px solid #d1483e;
  user-select: none;
}

#btn:hover {
  opacity: 1;
}

#btn.pushed {
  margin-top: 36px;
  box-shadow: 0 4px 0 #d1483e;
}

(function(){
  'use strict';

  var btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    var n = Math.random()
    if(n < 0.3){
      this.textContent = '大吉'; // 30%
    }else if (n < 0.45){
      this.textContent = '吉';  // 15%
    }else if (n < 0.60){
      this.textContent = '中吉';  // 15%
    }else if (n < 0.85){
      this.textContent = '小吉';  // 15%
    }else{
      this.textContent = '凶';  // 15%
    }

  });
  btn.addEventListener('mousedown', function(){
    this.className = 'pushed';
  });
  btn.addEventListener('mouseup', function(){
    this.className = '';
  });
})();

解説

<div id="btn">クリック</div>
var btn = document.getElementById('btn');

HTMLのボタンの要素を取得するために

main.js側でdocumentオブジェクトの

getElementByIdメソッドを用いて引数に

HTMLで記述したid名を記述しています。

そしてその結果をbtnという変数に格納しています。

・getElementByIdの使い方は以下の公式ドキュメントに

記載があります。

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

 btn.addEventListener('click', function(){
    var n = Math.random()
    if(n < 0.3){
      this.textContent = '大吉'; // 30%
    }else if (n < 0.45){
      this.textContent = '吉';  // 15%
    }else if (n < 0.60){
      this.textContent = '中吉';  // 15%
    }else if (n < 0.85){
      this.textContent = '小吉';  // 15%
    }else{
      this.textContent = '凶';  // 15%
    }

  });

先ほど変数btnに取得したものを用いて、

btnをクリックした時の動きを記載しています。

その後 var nという変数にMath.random()という結果を

代入しています。

Math.random()関数は、 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します。その範囲ではほぼ均一な分布で、ユーザーは範囲の拡大をすることができます。実装側で乱数生成アルゴリズムの初期シードを選択します。ユーザーが初期シードを選択、またはリセットすることは出来ません。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random

以降の処理ではランダムで生成された値がif文の

中の値より小さい時にテキストの文字を変えている

だけというシンプルな処理になっています。

最後に

JavaScriptで簡単なおみくじゲームを作ってみました。

リッチなサイトを作るのには必須の知識なので

自分でも色々作ってみましょう！