「JavaScriptで、アイテムの取得と消費、表示更新」の編集履歴（バックアップ）一覧はこちら

「JavaScriptで、アイテムの取得と消費、表示更新」(2012/04/03 (火) 17:07:22) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

所持品の取得と消費による数の増減を扱う関数を作る。event、equip、magicの3つとも関数の構造はそっくりなので、eventだけを紹介する。

イベントアイテムを取得する get_event()関数では、まず手に入れたイベントアイテムが既に所有しているかどうかを調べる。Pip_event[i].id_numを手がかりにして所有しているイベントアイテム名data_event[Pip_event[i].id_num].nameを全部調べる。イベントアイテム名に対応するデータベース該当しなければ、新規アイテムとしてPip_eventの中でid番号が0で連番が最小のところに居場所を作る。該当すれば、該当id番号の数量event[i].numを増加させる。

 function get_event(event_name, event_num) {
     var i, j;
     var new_event = true;
     // add_msg("get_eventに入った。");  // デバッグ表示用
 
     for (i=0; i<Pip_event.length; i++) {
         // add_msg("iの値は" + i); // デバッグ表示用
         if (event_name === data_event[Pip_event[i].id_num].name && new_event === true) {
             Pip_event[i].num += event_num;
             add_msg(event_name + "の数が" + event_num + "個増えた。");
             new_event = false;
         }
     }
 
     if (new_event === true) {
         j = 0;
         while (data_event[j].name !== event_name) {
             j++;
         }
 
         i = 0;
         while (Pip_event[i].id_num !== 0) {
         i++;
         }
 
         Pip_event[i].id_num = j;
         Pip_event[i].num = event_num;
         add_msg(event_name + "を新たに入手した。");
     }
     update_status();
 }

イベントアイテムを消費するlose_event()関数では、Pip_event[i].id_numを手がかりにして所有しているイベントアイテム名data_event[Pip_event[i].id_num].nameを全部調べる。見つけたら、Pip_event[i].num -= num;で個数をnum個減らす。
 function lose_event(name, num) {
     var i,j;
     for (i=0; i<Pip_event.length; i++) {
         if (data_event[Pip_event[i].id_num].name === name) {
             Pip_event[i].num -= num;
             add_msg(name + "の数が" + num + "個減った。");
         }
     }
     update_status();
 }

イベントアイテムをすべて失うclear_event()関数では、特別扱いのE・Jを除きPip_eventを0で埋め尽くす。
冒険進行に必要なアイテムは、再度入手可能と言うことにして、特別扱いはE・Jのみにしてみた。

 function clear_event() {
     var i;
     for (i=0; i<Pip_event.length; i++) {
         //add_msg(data_event[Pip_event[i].id_num].name + "の数は" + Pip_event[i].num + "個");
         if (data_event[Pip_event[i].id_num].name === "E・J") {
         // } else if (data_event[Pip_event[i].id_num].name === "首に刺さったボルト") {
         // } else if (data_event[Pip_event[i].id_num].name === "羊皮紙") {
         // } else if (data_event[Pip_event[i].id_num].name === "金貨") {
         // } else if (data_event[Pip_event[i].id_num].name === "通行許可硬貨") {
         // } else if (data_event[Pip_event[i].id_num].name === "サクラの花") {
         // } else if (data_event[Pip_event[i].id_num].name === "楕円のメダル") {
         // } else if (data_event[Pip_event[i].id_num].name === "警告球") {
         // } else if (data_event[Pip_event[i].id_num].name === "八角形の銅貨") {
         // } else if (data_event[Pip_event[i].id_num].name === "八角形の合金の硬貨") {
         // } else if (data_event[Pip_event[i].id_num].name === "エクスカリバー") {
         } else {
             Pip_event[i].id_num = 0;
             Pip_event[i].num = 0;
         }
         //add_msg(data_event[Pip_event[i].id_num].name + "の数は" + Pip_event[i].num + "個");
     }
 }

update_status()関数で、表示されている所持品を全部更新しよう。これもeventだけ示す。equip、magicも同様。htmlはこれ。

 <div>戦利品</div>
            <div id="event0_line"><INPUT TYPE="button" id="event0_button" value="click_event0_label"
                                         onClick="click_event(0)">
                <span id="event0_exist"></span><span id="event0_name">戦利品0</span><span id="event0_num">0</span> <span
                        id="event0_comment">コメント0</span></div>
            <div id="event1_line"><INPUT TYPE="button" id="event1_button" value="click_event1_label"
                                         onClick="click_event(1)">
                <span id="event1_exist"></span><span id="event1_name">戦利品1</span><span id="event1_num">1</span> <span
                        id="event1_comment">コメント1</span></div>
            <div id="event2_line"><INPUT TYPE="button" id="event2_button" value="click_event2_label"
                                         onClick="click_event(2)">
                <span id="event2_exist"></span><span id="event2_name">戦利品2</span><span id="event2_num">2</span> <span
                        id="event2_comment">コメント2</span></div>
            <div id="event3_line"><INPUT TYPE="button" id="event3_button" value="click_event3_label"
                                         onClick="click_event(3)">
                <span id="event3_exist"></span><span id="event3_name">戦利品3</span><span id="event3_num">3</span> <span
                        id="event3_comment">コメント3</span></div>
            <div id="event4_line"><INPUT TYPE="button" id="event4_button" value="click_event4_label"
                                         onClick="click_event(4)">
                <span id="event4_exist"></span><span id="event4_name">戦利品4</span><span id="event4_num">4</span> <span
                        id="event4_comment">コメント4</span></div>
            <div id="event5_line"><INPUT TYPE="button" id="event5_button" value="click_event5_label"
                                         onClick="click_event(5)">
                <span id="event5_exist"></span><span id="event5_name">戦利品5</span><span id="event5_num">5</span> <span
                        id="event5_comment">コメント5</span></div>
            <div id="event6_line"><INPUT TYPE="button" id="event6_button" value="click_event6_label"
                                         onClick="click_event(6)">
                <span id="event6_exist"></span><span id="event6_name">戦利品6</span><span id="event6_num">6</span> <span
                        id="event6_comment">コメント6</span></div>
            <div id="event7_line"><INPUT TYPE="button" id="event7_button" value="click_event7_label"
                                         onClick="click_event(7)">
                <span id="event7_exist"></span><span id="event7_name">戦利品7</span><span id="event7_num">7</span> <span
                        id="event7_comment">コメント7</span></div>
            <div id="event8_line"><INPUT TYPE="button" id="event8_button" value="click_event8_label"
                                         onClick="click_event(8)">
                <span id="event8_exist"></span><span id="event8_name">戦利品8</span><span id="event8_num">8</span> <span
                        id="event8_comment">コメント8</span></div>
            <div id="event9_line"><INPUT TYPE="button" id="event9_button" value="click_event9_label"
                                         onClick="click_event(9)">
                <span id="event9_exist"></span><span id="event9_name">戦利品9</span><span id="event9_num">9</span> <span
                        id="event9_comment">コメント9</span></div>
            <div id="event10_line"><INPUT TYPE="button" id="event10_button" value="click_event10_label"
                                          onClick="click_event(10)">
                <span id="event10_exist"></span><span id="event10_name">戦利品10</span><span id="event10_num">10</span> <span
                        id="event10_comment">コメント10</span></div>
            <div id="event11_line"><INPUT TYPE="button" id="event11_button" value="click_event11_label"
                                          onClick="click_event(11)">
                <span id="event11_exist"></span><span id="event11_name">戦利品11</span><span id="event11_num">11</span> <span
                        id="event11_comment">コメント11</span></div>
            <div id="event12_line"><INPUT TYPE="button" id="event12_button" value="click_event12_label"
                                          onClick="click_event(12)">
                <span id="event12_exist"></span><span id="event12_name">戦利品12</span><span id="event12_num">12</span> <span
                        id="event12_comment">コメント12</span></div>
            <div id="event13_line"><INPUT TYPE="button" id="event13_button" value="click_event13_label"
                                          onClick="click_event(13)">
                <span id="event13_exist"></span><span id="event13_name">戦利品13</span><span id="event13_num">13</span> <span
                        id="event13_comment">コメント13</span></div>
            <div id="event14_line"><INPUT TYPE="button" id="event14_button" value="click_event14_label"
                                          onClick="click_event(14)">
                <span id="event14_exist"></span><span id="event14_name">戦利品14</span><span id="event14_num">14</span> <span
                        id="event14_comment">コメント14</span></div>
            <div id="event15_line"><INPUT TYPE="button" id="event15_button" value="click_event15_label"
                                          onClick="click_event(15)">
                <span id="event15_exist"></span><span id="event15_name">戦利品15</span><span id="event15_num">15</span> <span
                        id="event15_comment">コメント15</span></div>
            <div id="event16_line"><INPUT TYPE="button" id="event16_button" value="click_event16_label"
                                          onClick="click_event(16)">
                <span id="event16_exist"></span><span id="event16_name">戦利品16</span><span id="event16_num">16</span> <span
                        id="event16_comment">コメント16</span></div>
            <div id="event17_line"><INPUT TYPE="button" id="event17_button" value="click_event17_label"
                                          onClick="click_event(17)">
                <span id="event17_exist"></span><span id="event17_name">戦利品17</span><span id="event17_num">17</span> <span
                        id="event17_comment">コメント17</span></div>
            <div id="event18_line"><INPUT TYPE="button" id="event18_button" value="click_event18_label"
                                          onClick="click_event(18)">
                <span id="event18_exist"></span><span id="event18_name">戦利品18</span><span id="event18_num">18</span> <span
                        id="event18_comment">コメント18</span></div>
            <div id="event19_line"><INPUT TYPE="button" id="event19_button" value="click_event19_label"
                                          onClick="click_event(19)">
                <span id="event19_exist"></span><span id="event19_name">戦利品19</span><span id="event19_num">19</span> <span
                        id="event19_comment">コメント19</span></div>
            <div id="event20_line"><INPUT TYPE="button" id="event20_button" value="click_event20_label"
                                          onClick="click_event(20)">
                <span id="event20_exist"></span><span id="event20_name">戦利品20</span><span id="event20_num">20</span> <span
                        id="event20_comment">コメント20</span></div>
            <div id="event21_line"><INPUT TYPE="button" id="event21_button" value="click_event21_label"
                                          onClick="click_event(21)">
                <span id="event21_exist"></span><span id="event21_name">戦利品21</span><span id="event21_num">21</span> <span
                        id="event21_comment">コメント21</span></div>
            <div id="event22_line"><INPUT TYPE="button" id="event22_button" value="click_event22_label"
                                          onClick="click_event(22)">
                <span id="event22_exist"></span><span id="event22_name">戦利品22</span><span id="event22_num">22</span> <span
                        id="event22_comment">コメント22</span></div>

update_staus()関数で、値の表示を更新し、id番号id_numが0のものは表示しないようにする。

 function update_status() {
     var i;
 
     // eventアイテムの更新
     for (i=0; i<Pip_event.length; i++) {
         document.getElementById("event" + i + "_exist").innerHTML   = "";
         document.getElementById("event" + i + "_name").innerHTML    = data_event[ Pip_event[i].id_num ].name;
         document.getElementById("event" + i + "_num").innerHTML     = Pip_event[i].num;
         document.getElementById("event" + i + "_button").value      = data_event[ Pip_event[i].id_num ].label;
         document.getElementById("event" + i + "_comment").innerHTML = data_event[ Pip_event[i].id_num ].comment;
     }
     for (i=Pip_event.length; i<data_event.length-1; i++) {
         document.getElementById("event" + i + "_exist").innerHTML   = "";
         document.getElementById("event" + i + "_name").innerHTML    = "なし";
         document.getElementById("event" + i + "_num").innerHTML     = 0;
         document.getElementById("event" + i + "_button").value      = "なし";
         document.getElementById("event" + i + "_comment").innerHTML = "";
     }
 
     // IDが0なら非表示、それ以外なら表示
     for (i=0; i<Pip_event.length; i++) {
         if (Pip_event[i].id_num === 0) {
             document.getElementById("event" + i +"_line").style.display = 'none';  //非表示
         } else {
             document.getElementById("event" + i +"_line").style.display = 'block';  //表示
         }
     }
 
     // マーリンの隠れ家から取ってきた装備品の更新
     for (i=0; i<Pip_equip.length; i++) {
         document.getElementById("equip" + i + "_exist").innerHTML   = "";
         document.getElementById("equip" + i + "_name").innerHTML    = data_equip[ Pip_equip[i].id_num ].name;
         document.getElementById("equip" + i + "_num").innerHTML     = Pip_equip[i].num;
         document.getElementById("equip" + i + "_button").value      = data_equip[ Pip_equip[i].id_num ].label;
         document.getElementById("equip" + i + "_comment").innerHTML = data_equip[ Pip_equip[i].id_num ].comment;
     }
     for (i=Pip_equip.length; i<data_equip.length-1; i++) {
         document.getElementById("equip" + i + "_exist").innerHTML   = "";
         document.getElementById("equip" + i + "_name").innerHTML    = "なし";
         document.getElementById("equip" + i + "_num").innerHTML     = 0;
         document.getElementById("equip" + i + "_button").value      = "なし";
         document.getElementById("equip" + i + "_comment").innerHTML = "";
     }
 
     // IDが0なら非表示、それ以外なら表示
     for (i=0; i<Pip_equip.length; i++) {
         if (Pip_equip[i].id_num === 0) {
             document.getElementById("equip" + i +"_line").style.display = 'none';  //非表示
         } else {
             document.getElementById("equip" + i +"_line").style.display = 'block';  //表示
         }
     }
 
     // マーリンの隠れ家から取ってきた魔法の品の更新
     for (i=0; i<Pip_magic.length; i++) {
         document.getElementById("magic" + i + "_exist").innerHTML   = "";
         document.getElementById("magic" + i + "_name").innerHTML    = data_magic[ Pip_magic[i].id_num ].name;
         document.getElementById("magic" + i + "_num").innerHTML     = Pip_magic[i].num;
         document.getElementById("magic" + i + "_button").value      = data_magic[ Pip_magic[i].id_num ].label;
         document.getElementById("magic" + i + "_comment").innerHTML = data_magic[ Pip_magic[i].id_num ].comment;
     }
 
     for (i=Pip_magic.length; i<data_magic.length-1; i++) {
         document.getElementById("magic" + i + "_exist").innerHTML   = "";
         document.getElementById("magic" + i + "_name").innerHTML    = "なし";
         document.getElementById("magic" + i + "_num").innerHTML     = 0;
         document.getElementById("magic" + i + "_button").value      = "なし";
         document.getElementById("magic" + i + "_comment").innerHTML = "";
     }
 
     // IDが0なら非表示、それ以外なら表示
     for (i=0; i<Pip_magic.length; i++) {
         if (Pip_magic[i].id_num === 0) {
             document.getElementById("magic" + i +"_line").style.display = 'none';  //非表示
         } else {
             document.getElementById("magic" + i +"_line").style.display = 'block';  //表示
         }
     }
 
     calc_defense(); // 防御力再計算
     update_LIFE_POINT(); // 生命点再表示
 }
 
 // 防御力再計算
 function calc_defense() {
     var i;
     Pip.defence = 0; // 今回の冒険で防御力を上下させるアイテムは無し
 }

本当なら、引数で指定されたアイテム名を持っているかどうか調べ、持っていれば何番目に持っているか（Pip_event[i].id_numのi）を返す小さな関数を書くべきだったが、書いてない。