JavaScript - ページの部品をかき集める(HTMLを組み立てて履歴を表示する)

Head First JavaScript
頭とからだで覚えるJavaScriptの基本
(オライリージャパン)
Michael Morrison (著) 豊福 剛 (翻訳)

開発環境

• OS X Mavericks - Apple(OS)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• Safari、Firefox + Firebug (Webプラウザ、プラグイン)
• JavaScript (プログラミング言語)
• jQuery (JavaScript Library)

Head First JavaScript ―頭とからだで覚えるJavaScriptの基本( Michael Morrison (著), 豊福 剛 (翻訳)、オライリージャパン)の8章(ページの部品をかき集める)、自分で考えてみよう(p.385)を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• JavaScriptクックブック
• jQueryクックブック

自分で考えてみよう(p.385)

コード(BBEdit)

sample.js

var scenetext = $('#scenetext'),
    decision1 = $('#decision1'),
    decision2 = $('#decision2'),
    history = $('#history_figure_adventure'),
    start = $('#start0'),
    decisions = [decision1, decision2],
    cur_scene = 0,
    changeScene = function (decision) {
        var message = '',
            p;
        switch (cur_scene) {
            case 0:
                cur_scene = 1;
                message = '旅は分かれ道から始まります。';
                decision2.css('visibility', 'visible');
                replaceNodeText('decision1', '決定1');
                start.css('visibility', 'visible');
                break;
            case 1:
                if (decision === 1) {
                    cur_scene = 2;
                    message = '林の中でかわいい小さな家を見つけました。';
                } else {
                    cur_scene = 3;
                    message = '橋にたち、穏やかな流れを眺めます。';
                }
                break;
            case 2:
                if (decision === 1) {
                    cur_scene = 4;
                    message = '窓に魔女';
                } else {
                    cur_scene = 5;
                    message = '魔女に食われる';
                   endAdventure();
                }
                break;
            case 3:
                if (decision === 1) {
                    cur_scene = 6;
                    message = '巨人に食われる';
                   endAdventure();
                } else {
                    cur_scene = 7;
                    message = '橋の上に巨人';
                }
                break;
            case 4:
                if (decision === 1) {
                    cur_scene = 8;
                    message = '続く…';
                   endAdventure();
                } else {
                    cur_scene = 5;
                    message = '魔女に食われる';
                   endAdventure();
                }
                break;
            case 7:
                if (decision === 1) {
                    cur_scene = 6;
                    message = '巨人に食われる';
                    for (i = 0, max = decisions.length; i < max; i += 1) {
                        (function () {
                            decisions[i].css('visibility', 'hidden');
                        })();
                    }
                } else {
                    cur_scene = 9;
                    message = '続く';
                   endAdventure();
                }
                break;
        }
        replaceNodeText('scenetext', message);
        if (cur_scene !== 0) {
            p = $('<p>').text(
                '決定 ' + decision + ' -> シーン ' + cur_scene + ' : '+  message);
            history.append(p);
        } else {
            history.children().remove();
        }
    },
    replaceNodeText = function (id, new_text) {
        var node = document.getElementById(id),
            text_node = document.createTextNode(new_text);
        while (node.firstChild) {
            node.removeChild(node.firstChild);
        }
        node.appendChild(text_node);
    },
    endAdventure = function () {
        for (i = 0, max = decisions.length; i < max; i += 1) {
            (function () {
                decisions[i].css('visibility', 'hidden');
            })();
        }
        start.css('visibility', 'visible');
    },
    resetAdventure = function () {
        cur_scene = 0;
        replaceNodeText('scenetext', 'シーン説明');
        replaceNodeText('decision1', 'ゲームスタート');
        decision1.css('visibility', 'visible');
        decision2.css('visibility', 'hidden');
        start.css('visibility', 'hidden');
        history.children().remove();
    },
    i,
    max;
start.css('visibility', 'visible');
decision2.css('visibility', 'hidden');
for (n = 0, max = decisions.length; n < max; n += 1) {
    (function () {
        var decision = decisions[n],
            id = 'decision' + (n + 1);
        decision.mouseover(function (event) {
            document.getElementById(id).className = 'decisionhover';
        });
        decision.mouseout(function (event) {
            document.getElementById(id).className = 'decision';
        });
    })();
}

for (i = 0, max = decisions.length; i < max; i += 1) {
    (function () {
        var decision = i + 1;
        decisions[i].click(function (event) {
            changeScene(decision);
        });
    })();
}
start.click(function (event) {
    resetAdventure();
});
start.mouseover(function(event) {
    document.getElementById('start0').className = 'decisionhover';
});
start.mouseout(function (event) {
    document.getElementById('start0').className = 'decision';
});
start.css('visibility', 'hidden');

シーン説明

ゲームスタート 決定2 始めから