Help us understand the problem. What is going on with this article?

【初心者】JavaScriptで「おみくじゲーム」を作ってみた

最近、JavaScriptを勉強しています。
練習として、簡単すぎる「おみくじゲーム」を作ってみました。
ちなみに、10分くらいで完成しました。笑
JSでおみくじゲーム.png

HTMLを記述する

index.html
<input type="button" value="今日のあなたの運勢は?" id="btn">
<p id="fortune"></p>

<script src="main.js"></script>

一番上にボタンを配置して、
その下に運勢を表示するための要素を記述しています。
JavaScriptを読み込むことも忘れずに。

JavaScriptを記述する

main.js
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const fortunes = ['大吉', '', '中吉', '小吉', '末吉', '', '大凶'];
  const randomNumber = Math.floor(Math.random() * fortunes.length);
  fortune.textContent = fortunes[randomNumber] + '';
});

クリックされるボタンを定数 btn に代入します。
idbtn の要素を getElementById で取ってきています。

そのボタンがクリックされたときのイベントを、その下に記述しています。
運勢のうちのいずれかを、運勢を表示する要素の文字列として格納しています。

7つの運勢を配列として、定数 fortunes に格納し、
いずれかを取ってくるようにしています。

運勢について

運勢の良さは、fortunes に記述してある順番の通りみたいです。
大吉の次が吉なのは知りませんでした。
僕はてっきり、小吉、吉、末吉の順番かと思ってました。(世界で一番どうでもいい余談)

addEventListener について

addEventListener(種類, 関数, false) という形で使います。
種類とは、イベントの種類のことで、clickload などがあります。
アロー関数の形であれば、先述したようにコードを書くことができます。

Math.random() について

Math.random() は、0以上1未満 の数を返します。
今回の場合、fortunes.length7 であるため、
Math.random() * fortunes.length は、0以上7未満 の数を返します。

Math.floor について

Math.random だと小数も返すことになるので、都合が悪いです。
できれば整数が返ってきてほしいところです。
そこで Math.floor を使うことで、小数点を切り捨ててくれます。

そのため、Math.floor(Math.random * fortunes.length)
0以上7未満の整数 すなわち 0から6のいずれかの整数 を返してくれます。

おわりに

すごく簡単に「おみくじゲーム」を作ることができました。
JavaScriptの一番最初の練習としては良かったです。
これはあまりにも簡単だったので、他にもミニゲームを作ってみたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした