JavaScriptでゲーム作成に初心者が挑戦してみる(簡単作成)!

  • URLをコピーしました!

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

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

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

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

目次

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

JavaScriptでおみくじゲームを作る

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

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

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

おみくじの画面(引く前)

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

おみくじの画面(引いた後)

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

開発環境の準備その1(フォルダの作成)

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

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

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

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

作業用のフォルダ作成

開発環境の準備その2(ファイルの作成)

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

  1. omikuji.html
  2. style.css
  3. 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の解説

ここがポイント(その1)

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

<link>要素によって、現在の文書(html)と外部リソース(cssファイル)を関連付けしています。これにより、cssファイル(”style.css”)を読み込むことが出来ます。

ここがポイント(その2)

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

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

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

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

<script>タグにより、JavaScriptやVBScriptなどのスクリプトを文書内に埋め込んだり、外部スクリプトを読み込んだりすることができます。今回は、src属性を指定することで、外部スクリプトとして、JavaScriptを読み込む方法を採用しています。

omikuji.htmlの実行

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

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

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

おみくじの画面(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の解説

ここがポイント(その1)

3行目: background-color: Pink;

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

ここがポイント(その2)

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が画面に適用されて、画面やフォントの色が変わりました。

おみくじの画面(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の解説

ここがポイント(その1)

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

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

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

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

ここがポイント(その2)

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 と7種類の数値をランダムで求めることが可能になります。

ここがポイント(その3)

2行目:  kujimoji[kujinum]

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

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

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

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

omikuji.htmlの実行(JavaScript適用後)

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

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

ボタンを押してみましょう。JavaScriptファイルが動作して、おみくじを引くことが出来ました!

おみくじの画面(JavaScriptを適用した後の状態)

まとめ

JavaScriptで作るゲームのまとめ

今回は、JavaScriptの基礎知識を応用して簡単なゲームを作りました。

実際に手を動かしてやってみると、本で学んだことについて自分の頭の中で整理ができて、復習ができます。

理解できているつもりでもあまりよく理解できていなかったことが明確になります。

是非、見ながらでもいいので自分の頭の中で考えながら実践してみてくださいね。

次回も初心者にできるゲーム、アプリなどを紹介したいと思います。

最後までお読みいただきありがとうございました。

プログラミングに行き詰った時 UDEMYを使う3つのメリット

【2022年】プログラミング言語・おすすめ人気ランキング

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次