(4)/「名前」ウィンドウ

「Ajaxでエロゲーを作るブログ」[DHTML

 ねこみみか第4話。


へんなのー


 メッセージウィンドウに「名前」を追加しました。
 まず、メッセージウィンドウ全体をdivで囲みました。
 ほんで「名前」まわりの枠を追加。


index.html

<DIV id="message_window" class="message_window">
    <DIV id="message_window_name_background" class="message_window_name_background"> </DIV>
    <DIV id="message_window_name_frame"  class="message_window_name_frame">
        <DIV ID="name" class="name"> </DIV><BR>
    </DIV>
    <DIV id="message_window_background" class="message_window_background"> </DIV>
    <DIV id="message_window_frame"  class="message_window_frame">
        <DIV ID="maintext" class="maintext">(このへんをクリックするか、スペースキーを押してください)</DIV><BR>
    </DIV>
 </DIV>


 XMLには<name>タグを追加。

00000000.xml

    <page>
        <character>Renca01.gif</character>
        <name>恋歌</name>
        <text>おはよー!</text>
    </page>


 JavaScriptでの非表示は、全体のdivに行うように変更。


main.js

var message_windowId = "message_window";

var isMessageScreenExist = true;

/**
    メッセージウィンドウの表示・非表示を切り替えます。
*/
function toggleMessageWindow()
{
    var windowObj = document.getElementById( message_windowId );

    if( isMessageScreenExist )
    {
        // 表示しているので非表示にします。
        windowObj.style.visibility = "hidden";
        isMessageScreenExist = false;
    }
    else
    {
        windowObj.style.visibility = "visible";
        isMessageScreenExist = true;
    }
}


 また、テキストと同じような感じで名前の設定もするように変更。
 現状では単に名前を出すだけだけど、できればキャラごとに文字色を変えたいな。