目的

・JavaScriptを使っておみくじを作って飲み会における確率操作をしたい

ゴール

・JavaScriptでの文法超基礎を理解する
・ランダムな数値を出して、それをもとに表示を変える

こんな感じの超簡易的おみくじ

コード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>おみくじ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id = "btn">push!</div>
  <script src=main.js></script>
</body>
</html>

style.css

@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;
}

main.js

(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 = '';
  });
})();

カンタンな解説

index.html

  <div id = "btn">push!</div>

main.js

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

htmlのbtnに対して、main.jsでbtnという変数を設定する。

main.js

  btn.addEventListener('click', function(){
   //この中にボタンをクリックした時の動きを記述する
  }

btnをクリックした時の動きを記述する。
動きとしては、0-1の間でランダムに生成される数のうち偏りを表示の基準とする。
つまり、
(前提)
・0~1までのランダムな数値が入る
(条件)
・0-0.3の間：「大吉」 →30%
・0.3-0.45の間：「吉」 →15%
・0.45-0.6の間：「中吉」 →15%
・0.6-0.75の間：「小吉」 →15%
・0.75-1の間：「凶」 →約25%(※)

(※)約としたのは、Math.random()の場合0から1を含まない間の数がランダムに生成されるため。よって厳密にはぴったり25%ではない。

これを記述すると以下のようになる。

main.js

  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.75){
      this.textContent = '小吉';  // 15%
    }else{
      this.textContent = '凶';  // 25%
    }

JavaScript でカンタンおみくじを作ってみる

目的

ゴール

コード

カンタンな解説