スライムがあらわれた!

　少し間が空いてしまいましたが、二週間ほどで新たに気付いたことが幾つかあります。

　気づいたというより『理解』ですね。

　その一つがjavascript＝『代入』である、ということです。

　前回軽く触れている気がします。

　全てが全て代入ではない(コンソール画面に出力するconsole.logとか)ですが、基本的には全て代入によって成り立っているという気づきです。

　数値を変数や定数の入れ物に入れ(代入)、入れ物同士を足すなり引くなりして計算する。

　文字列を用意して連結したり、HTMLを書き換えたる。

　計算式だけでなく関数も全て変数や定数に代入することも可能。

　この『javascriptは代入で成り立っている』という理解が出来たのは大きな前進となったと思います。

　というより、スッキリして難しいというイメージが払拭できた、という感覚でしょうか。

　他にもHTMLの話になりますが、floatやpositionによって潰れてしまう高さの対処法、横幅や高さの指定はどんな時にするのか、内側の余白や全体のレイアウト等は基本的に似たようなことになるのでクラスやidの名称を同じにしてCSSも混乱しないようにテンプレ化する、等。

　一から構想を考えWebページを作るのはまだ難しいというか、まあデザイン力がないのでそっちが難しいのですが、javascriptによる動きのあるデザインが少ないサイトは何とか模倣して作れるようにはなりました。

　こちらも大きく進んでいる気がするのでこの調子でいきたいですね。

　何度も言いますが、私は『理解』出来ないと覚えられません。

　間違った理解をしている時も多いですが、誰かに教えるわけでもありませんし、自分なりの理解で飲み込めて覚えられるのならそれでいいという考えになりました。

　正しい知識と技術を覚えられたらそれに越したことはないですが。

　というわけで、今回はjavascriptで超簡単な戦闘モドキを作ってみたのでそれを書いていこうと思います。

　内容を言うと、『ランダムで一体のモンスターと戦い、HPが0になるまで戦闘する』というプログラムとなります。

　本当ならちゃんとした戦闘のコードを作りたかったです。

　難し過ぎたので、まずはおみくじを作ったり、計算機を作ったりしてから作っていこうと思います。

　本当ならHTMLも使い画面に表示したいところですが、まだ難しいのでコンソール画面のみで行います。

　javascriptだけでもできるらしいですが。

　まず基本、【出力の確認】

　HTMLファイルにjavascriptが読み込まれるように書きます。

　最初は『head』の最後に書いていたのですが、何度か正しく出力されない時があったので『body』の最後に書くようにしています。

　jQuery等のライブラリは『head』の最後に書くようですね。

　出力の確認は

　　　console.log(“スライムがあらわれた!”);

　これですね。

　まあ、『Hello, World』が圧倒的に多いですが。

　で、今回の超簡単な戦闘モドキには上記のコードを基礎に書き換え、書き加えながら作っていきました。

　というより、ほぼどこかのサイトに載っていたのを参考にしているので自力とは言えません。(どこのサイトかは忘れました)

　出力の確認が出来たら、次に【モンスター名の『スライム』を変数の入れ物に代入して出力】

　　　var monster = “スライム”;

　　　console.log(monster + “があらわれた!”);

　　　変数にはletではなくvarを使っています。

　出力結果は最初のコードと変わりありません。

　注意は変数名の綴りの間違い、文字列の連結の仕方ですね。

　次は【スライムにHPを付ける】、【1～10をランダムで出力する】

　HPを付けるにはプロパティとなるので『オブジェクト』

　ランダムを行うには『Math.random』というものを使います。

　オブジェクトは『プロパティ名：値』でした。

　　　var monster = {name: “スライム”, hp: 50};

　複数モンスターで行う時は少し手を加えますが基本同じなので難しくはありません。

　ランダム関数に関して。

　このランダム関数というのは、文字通りランダムで数値を出力するものです。

　ただし、Math.randomだけでは『0～0.9999……(1は含まない)』となるので、頭に『Math.floor』という小数点以下を切り捨てるものを使います。

　この『Math.floor』も癖があるようですが、今回は関係ないので無視します。

　書き方の形は

　　　Math.floor(Math.random() * ○○);

　となります。

　今回はダメージソースが1～10までなので、○○の部分に最大値の10を代入……なのですが、よく見ると0～0.9999……までで『1を含まない』部分がネックとなるので注意が必要です。

　では、どのようにするかというと、

　　　Math.floor(Math.random() * 10) + 1;

　1を足せばいいというだけの話ですね。

　ランダムに出た値を10倍し、小数点以下を切り捨て、最後に1を足す。

　言葉にするとこんな感じとなり、数学と同じく()から計算して掛け算、足し算という順番になっています。

　これでランダムに数値が出力されるようになったかというとそうでもなく、最後に出力出来る様に『代入』をしなければなりません。

　ダメージソースなので『damage』という変数に代入します。

　　　var damage = Math.floor(Math.random() * 10) + 1;

　そして、次に【monsterのhpが0になるまで攻撃する】

　for文ではなくwhile文を使い書きます。

　理由は、ランダムでダメージを与える為何回繰り返すか不確定だからですね。

　確定している場合はfor文を使うということです。

　　　//monsterのhpが0より大きい間繰り返す

　　　while (monser.hp > 0) {

　　　　//処理内容

　　　}

　こんな感じになります。

　最後に、処理内容を書きます。

　処理内容は

　　　・ランダムダメージソース

　　　　・いくつのダメージを与えたか

　　　　・hpからダメージソースを引く

　この三つとなり、組み込んで一から書くと

　　　var monster = {

　　name: "スライム",

　　hp: 50

　　　};

　　　var damage;

　　　while(monster.hp > 0) {

　　 damage = Math.floor(Math.random() * 10) + 1;

　　console.log(monster.name + "に" + damage + "のダメージを与えた!");

　　monster.hp -= damage;

　　　}

　多くとも十数回でスライムは倒されます。

　倒された後に『スライムをたおした!』と出力させるなら、

　　　console.log(monster.name + "をたおした!");

　と、while文の{}の後に書けば繰り返し処理が終わった為読み込まれて出力されます。

　仕上げに、今回の目的である【数体のモンスターからランダムで一体決める】というコードを作ります。

　なので、配列の中にオブジェクト(モンスター名とhp)を入れ、さらにランダムで一体出力出来る様にしないといけません。

　真似て作るのならそのまま流用すればいいのですが、此処の部分は自分で考えた所も多いので難しかったですね。

　まず、始めたのは複数のモンスターをオブジェクトとして配列の中に入れること、です。

　　　var monsterTable = [

　　{name: "スライム", hp: 50},

　　{name: "ゴーレム", hp: 200},

　　{name: "ドラゴン", hp: 800}

　　　];

　変数名にも悩み、モンスターテーブルというのを採用しました。

　経験値テーブルとか、ドロップテーブル、タイムテーブルとかいろいろありますからね。所謂、一覧の様なものですか。

　出力するには

　　　変数名.[インデックス番号]

　　　変数名.[インデックス番号].name

　こんな形になります。

　これをランダムで行いたいので、ダメージソースのランダムと同じく『Math.floor(Math.random())』を使います。

　普通に『Math.floor(Math.random() * 3) + 1』としてしまうと、これは間違いとなるので注意が必要です。

　理由は、インデックス番号は『0から始まる』からです。

　まあ、オブジェクトを使えばそれでいい話ではあるのですが、今回は配列を使うので

　　　Math.floor(Math.random() * 3)

　　　若しくはMath.floor(Math.random() * monsterTable.length)

　変数monsterTableに代入されている3(配列数)を掛ければいいです。

　それを使いモンスターをランダムで出力させるには

　　　var monsterTable = [

　　{name: "スライム", hp: 50},

　　{name: "ゴーレム", hp: 200},

　　{name: "ドラゴン", hp: 800}

　　　];

　　　var num = Math.floor(Math.random() * monsterTable.length);

　　　var monster = monsterTable[num];

　　　console.log(monster);

　変数『num』にインデックス番号の値を代入し、

　変数『monster』に『num』を使った配列の値を代入し、

　配列の値を出力する

　これでモンスターを一体ランダムで出力するコードが作れました。

　仕上げに、ランダムダメージでスライムを倒すプログラムと組み合わせます。

　　　var monsterTable = [

　　 {name: "スライム", hp: 50},

　　 {name: "ゴーレム", hp: 200},

　　 {name: "ドラゴン", hp: 800}

　　　];

　　　var damage;

　　　var count = 0;

　　　var num = Math.floor(Math.random() * monsterTable.length);

　　　var monster = monsterTable[num];

　　　console.log(monster.name + “があらわれた!”);

　　　while(monster.hp > 0) {

　　 //攻撃力＝ダメージ量の変数attackをランダム関数

　　 damage = Math.floor(Math.random() * 10) + 1;

　　 //出たダメージをhpから引いて残り体力を変数hpに代入

　　 console.log(monster.name + "に" + damage + "のダメージを与えた!");

　　monster.hp -= damage;

　　//一回の攻撃の回数をカウント

　　count += 1;

　　　}

　　　console.log(“攻撃回数は” + count + "回!!");

　　　console.log(monster.name + "をたおした!");

　これで三体のモンスターをランダムで一体出現させ、hpが0になるまでダメージを与え続ける超簡単な戦闘モドキのプログラムが出来ました。

　このコードの始まりが

　　　console.log(“スライムがあらわれた!”);

　これとは思えませんね。

　因みに、変数『count』は攻撃の回数を示しています。

　処理が繰り返されるたびに1を足し続ければ攻撃回数が分かるということですね。

　外に変数を宣言しているのは外で使う為です。

　今回は此処までとなります。

　一応報告として、

　・配列ではなくオブジェクトの中にオブジェクトを使い同じ結果を出す

　・ブラックドラゴンのhpが0になるまで戦い、11だった場合会心の一撃として十倍のダメージを与えてCritical回数を数え、更に確率を計算出力する

　・配列とif文を使い80%スライム、15%ゴーレム、5%ドラゴンが出現する

　こんな感じのプログラムも考えていました。

　ただ書くと長くなるので、結果も殆ど同じですし、今後も別の内容で似たようなプログラムを書くと思うのでその時はこちらを使い投稿しようと思います。

　最後に、配列の中にオブジェクト、オブジェクトの中にオブジェクト、と同じ結果が出てもやり方が異なる場合というのが幾つもあります。

　どれが正しいとか、どれを使うとか素人の私には分かりっこありません。

　結局のところ、今の私には望んだ結果が出る、これに尽きるということで、よりよいゲームが作れるように精進する所存です。

　次回はjavascriptの続きを勉強します。