JavaScriptのMath.floorメソッドとMath.randomメソッドを用いて、配列からランダムにお題を取得し表示するページを作りました。
今回は「山手線ゲーム」のお題をランダムに1つ取得して表示します。
コロナ禍でなかなかリアルでの飲み会は難しい世の中ではありますが、忘年会の季節なので飲み会鉄板ゲームとして「山手線ゲーム」がありますね。
山手線の駅名を言っていく単純なゲームではありますが、お題を変えて楽しむこともできます。
なかなかパッと良いお題が思い付かないことが多かったので、配列操作の学習も兼ねて作ってみました。
ページ作成
Clickボタンを押下することでグレーの枠線内にお題がランダムで表示されます。
まずはHTMLでページを作成していきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>山手線ゲーム</title>
</head>
<body>
<div class="container">
<h2>山手線ゲームお題生成</h2>
<button id="button">Click</button>
<div class="output" id="subject">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
簡易的なページではありますが、必要な要素は全て揃えてあります。
CSSに関しては今回は説明は省略させていただきます。
<button id="button">をクリックすることで<div class="output" id="subject"></div>内にランダムでお題を表示させます。
<script type="text/javascript" src="script.js"></script>で処理を記載したJavaScriptファイルと'づけています。
処理作成
続いて実際にJavaScriptを用いて処理を書いていきましょう。
コードは以下の通りです。
//ボタンクリックでイベント発火
document.getElementById("button").addEventListener('click',
function(){
//対象の配列
const subjectArray = [
"山手線","中央線","京浜東北線","丸いもの","〇色のもの（色シリーズ）","冷たいもの","楽器の名前","漫画タイトル","俳優の名前","AKBメンバー",
"ハロプロメンバー","仮面ライダーの名前","ジブリ映画タイトル","ディズニーアトラクション","ユニバアトラクション","お寿司のネタ","スタバメニュー",
"国民の祝日","四字熟語","オリンポス12神","Youtuberの名前","世界遺産","ジャニーズの曲名","動物の名前","動物の鳴き声","花の名前",
"セーラー戦士の名前","小説のタイトル","サッカー選手の名前"
];
//ランダムに1つ取得
const subject = subjectArray[Math.floor(Math.random() * subjectArray.length)];
//取得したお題を書き出す
document.getElementById("subject").innerText = subject;
}
);
コメントでも処理について記しておりますが、1つずつ追っていきましょう。
ボタンクリックで処理開始
まず、HTML内の<button id="button">をgetElementByIdを用いて取得します。addEventListenerでクリック時に対してどのような処理が行われるかを{}内に記載していきます。
//ボタンクリックでイベント発火
document.getElementById("button").addEventListener('click',
function(){
//処理
}
実行したい処理を{}内に記載していきましょう。
ざっくりで構わないのでコメントでどのような処理なのかを書いておくとコーディング時にわかりやすいです。
お題の配列要素へアクセス
//対象の配列
const subjectArray = [
"山手線","中央線","京浜東北線","丸いもの","〇色のもの（色シリーズ）","冷たいもの","楽器の名前","漫画タイトル","俳優の名前","AKBメンバー",
"ハロプロメンバー","仮面ライダーの名前","ジブリ映画タイトル","ディズニーアトラクション","ユニバアトラクション","お寿司のネタ","スタバメニュー",
"国民の祝日","四字熟語","オリンポス12神","Youtuberの名前","世界遺産","ジャニーズの曲名","動物の名前","動物の鳴き声","花の名前",
"セーラー戦士の名前","小説のタイトル","サッカー選手の名前"
];
取得元の配列をsubjectArrayと命名して作成します。配列なので[]内に、カンマ区切りで記載します。すべて文字列なので””で囲うことも忘れないようにしましょう。お題はこちらを参考にさせていただきました。（山手線ゲームのお題一覧）
subjectArrayの中からランダムで取得する処理を書いていきます。= 以降に処理を記載することで、変数subjectに処理の結果が格納されます。
//ランダムに1つ取得
const subject = subjectArray[Math.floor(Math.random() * subjectArray.length)];
配列の中から1つの要素にアクセスしたいため、subjectArray[]として、[]内にランダムに整数が入る必要があります。（配列要素へのアクセス）
console.logを用いて、要素へのアクセスを確認しましょう。以下のように表示されるはずです。
console.log(subjectArray[0]) //ログ：山手線（配列subjectArrayの最初の要素）
console.log(subjectArray[1]) //ログ：中央線（配列subjectArrayの2番目の要素）
console.log(subjectArray[2]) //ログ：京浜東北線（配列subjectArrayの3番目の要素）
0～お題の数だけの整数をランダムで表示する処理が[]内の
Math.floor(Math.random() * subjectArray.length)です。
Math.random()は 0 以上 1 未満の範囲で浮動小数点の乱数を生成して返すメソッドです。Math.random() * 10とすると0～10の範囲内でランダムな浮動小数点数を作成して返します。今回は0
～お題の配列subjectArrayの要素数の範囲内で乱数を生成したいため、 Math.random() * subjectArray.lengthと記します。
返された浮動小数点数に大して、小数点以下の切り捨てをMath.floor()で行います。
これで[]内には整数が入るため、配列要素にアクセスすることができます。
結果の表示
変数subjectに格納されている処理の結果を.innerTextを用いてid="subject"内に表示させることで完成です！！
//取得したお題を書き出す
document.getElementById("subject").innerText = subject;
■■GitHub Pages
https://mymy3910.github.io/traingame