cre8cre8
AskMe♥

cre8cre8なJavaScript入門
~if文(条件分岐)を使って簡単なDQ風ゲームを作ってみよう~


タイトルは若干誇張してます。

前置きはこれくらいで、
それでは!前回の変数のJavaScript講座に引き続き
退屈をクリエイティブに変える講座第二弾、条件分岐編です。
今回はとっても重要かつ表現が広がる if (条件分岐) を教えようと思います。
今回の最終サンプルは、ゲームを作ろうと思いますのでがんばってくださいね!
(ゲームと言っても、グラフィカルではなく、テキストばかりですが…)

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6
7  <body>
8    <input type="text" placeholder="greenと入力してください" id="color">
9    <button id="judge">条件分岐!!</button>
10    <h1 id="output"></h1>
11
12    <script>
13
14      document.getElementById("judge").addEventListener("click", function() {
15
16        // さりげなく、前講座の変数もやります。
17        var color = document.getElementById("color").value;
18        var output = document.getElementById("output");
19
20        // ここで条件分岐!
21        if (color == "green") {
22          output.style.color = "green";
23          output.innerText = "(・∀・)イイ!";
24        } else {
25          output.style.color = "red";
26          output.innerText = "(・A・)イクナイ...";
27        }
28
29      });
30
31    </script>
32  </body>
33</html>

テキストボックスに green と入力して条件分岐ボタンを押すと、緑色で (・∀・)イイ! の顔文字が、
それ以外を入力すると、 (・A・)イクナイ... と表示されます。
入力によって、変わりましたね。
なんかええ感じでええものできそうな気がしませんか?

では、次に、 greenyellow の場合に分岐するJavaScriptを追加してみましょう。

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6
7  <body>
8    <input type="text" placeholder="greenかyellowと入力してください" id="color">
9    <button id="judge">条件分岐!!</button>
10    <h1 id="output"></h1>
11
12    <script>
13
14      document.getElementById("judge").addEventListener("click", function() {
15
16        // さりげなく、前講座の変数もやります。
17        var color = document.getElementById("color").value;
18        var output = document.getElementById("output");
19
20        // ここで条件分岐!
21        if (color == "green") {
22          output.style.color = "green";
23          output.innerText = "(・∀・)イイ!";
24        } else if(color == "yellow") {
25          output.style.color = "yellow";
26          output.innerText = "てへぺろ(・ω<)";
27        } else {
28          output.style.color = "red";
29          output.innerText = "(・A・)イクナイ...";
30        }
31
32      });
33
34    </script>
35  </body>
36</html>

どうですか?黄色で てへぺろ(・ω<) が表示されたら成功です。
なんか、夢がひろがりんぐしませんか?
なんか、ゲーム作れる気がしませんか?
なんか、スタバでドヤ顔したくなりませんか?
さぁ!その気持を抱いてレッツ・トライ♪

DQ風戦闘っぽいゲームっぽいなにかを作ってみましょう!! (グラフィカル?なにそれおいしいの?)

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6
7  <body>
8    <style>
9      h1 {
10        font-size: 1.25rem;
11      }
12      h2 {
13        font-size: 1rem;
14        color: #cc0000;
15      }
16
17    </style>
18    <dl>
19      <dt>あなた</dt>
20      <dd>(こころの)HP: <span id="hp">120</span></dd>
21    </dl>
22
23
24    <h1 id="message">ふと見ると、公園のベンチに若い(・∀・)イイ!!男が座っていました<br>(メニューから行動を選んで、数値で入力してください。)</h1>
25
26    <h2 id="damage"></h2>
27
28    <ul>
29      <li>1: 戦う</li>
30      <li>2: 闘う</li>
31      <li>3: にげる</li>
32    </ul>
33
34    <input type="text" id="selection">
35    <button id="run">アクション!!</button>
36
37
38    <script>
39
40      document.getElementById("run").addEventListener("click", function() {
41
42        // 選択肢の入力値を取得
43        var action = document.getElementById("selection").value;
44
45        // DOM選択
46        var messageElement = document.getElementById("message");
47        var hpElement = document.getElementById("hp");
48        var damageElement = document.getElementById("damage");
49
50        // 表示するメッセージ
51        var message = "";
52        // 現在のHP(足し引きするために数値に変換する)
53        var hp = parseInt(hpElement.innerText);
54
55        // 選択した行動で表示されるメッセージが変わる
56        if (action == "1") {
57          message = "僕が考えるさいきょうのパンチを繰り出したところ、腰が抜けた";
58          damageElement.innerText = "40のダメージをうけた。";
59          hp = hp - 40; // 40ダメージ受けた
60        } else if (action == "2") {
61          message = "イオナズンを となえた! しかし MPが たりない!";
62          damageElement.innerText = "80のダメージをうけた。";
63          hp = hp - 80; // 80ダメージ受けた
64        } else if (action == "3") {
65          message = "にげるなんて とんでもない!!";
66          damageElement.innerText = "20のダメージをうけた。";
67          hp = hp - 20; // 20ダメージ受けた
68        } else {
69          message = "1から3しか入力できないんっすよ。これ...(´・ω・`)"
70        }
71
72
73        // もしHPが0より少なくなったら王様のありがたいメッセージがでて復活する(オーバーキルのとき)
74        // 0でもありがたいメッセージが出る(ぴったり死んだ時)
75        if (hp <= 0) {
76          message = "おお... しんでしまうとは なさけない...。 そなたに もういちど きかいを あたえよう。 ふたたび このようなことが ないようにな。"
77          hp = 120;
78        }
79
80        messageElement.innerText = message;
81        hpElement.innerText = hp;
82
83      });
84
85    </script>
86  </body>
87</html>

無限に復活して遊べます。
無限ループって怖くね?

選択地の入力では、コメント通り、ユーザが入力した値をとって、変数 action に保存しています。
次のDOM選択では、メッセージ、HP、ダメージの値の取得や表示のための処理です。

var message = ""; はゲームメッセージの表示用変数です。
ユーザの入力値によって表示する内容を変更するために用意された変数です。

var hp = parseInt(hpElement.innerText); は表示しているHPを取得しているのですが
そのまま取得すると文字列として取得して、足し算引き算などの計算ができないため、
取得と同時に数値に変換しています。 parseInt(...) で数値に変換できます。

あとは if 文でユーザの入力値によって処理を切り替えてゲームっぽくしています。
HPが0以下になったときの復活の処理も入れています。

次回の記事は
さらにおもしろいことができるようになる、繰り返しの構文を教えていきたいと思います。

また、今回のサンプルを改造して、HPが40切ったら文字が赤色になるとか、
ちょっと改造して楽しんでもらえると、JavaScriptがさらに詳しくなると思いますよ。
でわでわ、読んで頂きありがとうございます!

≪ 前の記事
cre8cre8なJavaScript入門
~変数を使っていろいろなことができるようになろう~
次の記事 ≫
cre8なJavaScript入門
~for文(繰り返し)を使ってDQ風ゲームを改造してみよう~

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事