JavaScriptでゲーム作成に初心者が挑戦してみる（簡単作成）！

2022年5月29日2024年2月19日

URLをコピーしました！

JavaScript初心者でも簡単に作れるゲームってないかな？
ゲーム作りにチャレンジしてみたいんだけど・・・

初心者でも簡単に作れる
「おみくじゲーム」がおすすめだよ！

今回の記事では、JavaScript初心者でも簡単に作ることができるおみくじゲームをご紹介します。

JavaScriptを学ぼうか悩んでいる初心者の方も是非読んで、実際にコーディングして試してみてくださいね。

おみくじゲームを作ろう！

HTMLで、作成する画面イメージは、こちらです。

画面におみくじを引くためのボタンを配置します。

ボタンを押すと、おみくじの結果を画面に表示するプログラムを作ってみます。

では、早速おみくじを引いてみましょう！
画面にあるボタンを押してみます。
すると・・・

ボタンを押すと、おみくじの結果を画面に表示するプログラムです。
作成してみて大吉が表示されなかったら、表示されるまで引いてみましょう（笑）

開発環境の準備その１（フォルダの作成）

では、JavaScriptでおみくじゲームを作っていきましょう。

まず最初に作業用のフォルダを作成しましょう。

フォルダ名は任意の名前で大丈夫です。

この記事では、Windowsのエクスプローラーで「おみくじ」のフォルダ名でフォルダを作成しています。

開発環境の準備その２（ファイルの作成）

さきほど作成した「おみくじ」フォルダの中に
以下の3つのファイルを用意しましょう。
この３つのファイルを手順通りに作成すれば、おもくじゲームは完成します。

omikuji.html
style.css
omikuji.js

次の章から、わかりやすく説明していきます。

順番に①omokuji.html、②style.css、③omikuji.js　のファイルの中身を見ていきましょう。

① omikuji.htmlファイルを作ろう

omikuji.htmlの内容

では、以下のhtmlをテキストエディタ上で入力しましょう。

初めての方は、コピペでも大丈夫ですよ。
ソースコードの右上の端にあるボタンをクリックするとコピーできます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>JavaScriptの勉強</title>
    <meta name=description contents="初心者のためのJavaScript勉強法">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <p>JavaScriptはとても楽しいプログラム言語！</p>
    
    <form><input type="button" value="おみくじを引こう！" onClick="getOmi()"><script src="omikuji.js"></script></form>
    <br>
    <span style="color:red" id="show_omi"></span>
    
  </body>
</html>

専用のテキストエディタをインストールしていない方は、こちらの記事も参考にみてくださいね。

omikuji.htmlの解説

ここがポイント（その１）

7行目： <link rel="stylesheet" href="style.css">

ここがポイント（その２）

13行目： <form><input type="button" value="おみくじを引こう！" onClick="getOmi()"><script src="omikuji.js"></script></form>

<form>タグでは、いろいろな要素を組み込んでいますので、順番に説明していきます。<form>タグは、名前やプロフィール、性別などブラウザで入力された値（内容）をサーバーへ送ることが可能です。

<input> 要素の button 型を指定して、画面にボタンを描画しています。ボタン名は、valueで指定することができます。

onclick属性でクリックした時、どのような処理を行うかを指定しています。今回は、クリックすると JavaScriptの ”getOmi()” 関数を呼び出しています。

omikuji.htmlの実行

”omikuji.html” を実行してみましょう。エクスプローラーから、”omikuji.html” をダブルクリックしてみてください。

下の画面が表示されましたね。cssを適用していないため、まだ画面の色は未設定です。

またJavaScriptのファイルも作成していないため、ボタンを押しても何も反応しません。

② style.cssファイルを作ろう

style.cssの内容

では、以下のcssをテキストエディタ上で入力しましょう。

ソースコードの右上の端にあるボタンをクリックするとコピーできます。

@charset "UTF-8";
body {
  background-color: Pink;
}

p{
  color: Blue;
  text-align: center;
  font-size: 20px;
  margin-top: 100px;
}

style.cssの解説

ここがポイント（その１）

3行目： background-color: Pink;

background-colorプロパティに値を設定して、要素の背景色を設定することができます。今回は、ピンク色に設定しています。

ここがポイント（その２）

7行目： color: Blue;
8行目： text-align: center;
9行目： font-size: 20px;
10行目： margin-top: 100px;

colorプロパティに値を設定して、要素のテキストの色を設定することができます。今回は、ブルー色に設定しています。

text-alignプロパティに値を設定して、文字や画像に対し、水平方向の揃え方を指定することができます。テキストを中央に寄せています。

font-sizeプロパティに値を設定して、フォントのサイズを指定することができます。フォントサイズはpx（ピクセル）などの数値や％（パーセント）、キーワードで指定することができます。

margin-top プロパティで、要素の上側のマージン領域を設定します。

omikuji.htmlの実行（css適用後）

では、もういちど、”omikuji.html” を実行してみましょう。エクスプローラーから、”omikuji.html” をダブルクリックしてみてください。

下の画面が表示されましたね。

cssが画面に適用されて、画面やフォントの色が変わりました。

③ omikuji.jsファイルを作ろう

omikuji.jsの内容

では、以下のJavaScriptファイルをテキストエディタ上で入力しましょう。

初めての方は、コピペでも大丈夫ですよ。
ソースコードの右上の端にあるボタンをクリックするとコピーできます。

function getOmi() {
  document.getElementById("show_omi").innerHTML = getUnsei();
}

function getUnsei() {
   // 大吉・中吉・小吉・吉・末吉・凶・大凶
  let kujimoji = ['大吉','中吉','小吉','吉','末吉','凶','大凶'];
  let kujinum = Math.floor(Math.random() * kujimoji.length);

  //出力用
  var unsei = "今日のあなたの運勢は、" +  kujimoji[kujinum] + "です。" ; 
  return unsei;
}

omikuji.jsの解説

ここがポイント（その１）

2行目： document.getElementById("show_omi").innerHTML = getUnsei();

getElementByIdは、HTMLタグで指定したID(“show_omi”)にマッチするドキュメント要素を取得するメソッドです。

innerHTMLは、HTML要素の中身を変更するのに活躍するプロパティ（機能）です。

つまり、getUnsei()という「おみくじの結果を取得するJavaScript関数」の結果を実行し、取得したおみくじ結果を、左辺に代入することによって、HTMLの(“show_omi”)要素の中身をおみくじの結果に書き換えているわけです。

ここがポイント（その２）

8行目： let kujinum = Math.floor(Math.random() * kujimoji.length);

length は Array 型のオブジェクトのプロパティで、配列の要素の数を取得することができます。今回の例では、大吉から大凶まで要素数が7個ありますので、 7 の値が取得されますね。

Math.random()関数は、 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返してくれます。この関数でランダムな小数点の数字を取得することができるわけです。

Math.floor()関数は、対象の値の小数点以下を切り捨てた値を取得し、返してくれます。

Math.floor(Math.random() * kujimoji.length) により、
求められる結果のパターンは

　0.00000000 × 7 = 0.00000000 　⇒　小数点以下を切り捨てると、0になる。
　0.17856232 × 7 = 1.24993624 　⇒　小数点以下を切り捨てると、1になる。
　0.28989623 × 7 = 2.02927361 　⇒　小数点以下を切り捨てると、2になる。

　　～

　0.99999999 × 7 = 6.99999993 　⇒　小数点以下を切り捨てると、6になる。

つまり、
0、1、2、3、4、5、6　と７種類の数値をランダムで求めることが可能になります。

ここがポイント（その３）

2行目：  kujimoji[kujinum]

7行目で配列[kujiomi]に対して、値を7個分、大吉から大凶までセットしていますね。

JavaScriptのインデックス番号は、0から始まります。

kujinumの値が、0であれば”大吉”、1であれば”忠吉”といった感じで、要素の取得を行います。

そして、unsei変数に、”今日のあならの運勢は、＊＊です”　と文字列編集を行っています。