■[ゲーム][DHTML][CSS][ねこみみか](4)/「名前」ウィンドウ

　ねこみみか第4話。

• サンプル：ねこみみか(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;
    }
}

　また、テキストと同じような感じで名前の設定もするように変更。

　現状では単に名前を出すだけだけど、できればキャラごとに文字色を変えたいな。

Permalink | コメント(0) | トラックバック(0) | 03:02