ravenz weblog: [web関連] おみくじ作ってみた [JavaScript]

おみくじ作ってみました〜。

暇つぶしにどうぞ〜

おみくじをする

JavaScriptで作ったのですが、scriptのコードを確認したいかたは以下参照。

ちなみにCODEPREPの記事を参照させて頂きました。
(色々と追記したり変更はしております。)

---以下 HTMLの一部---

<div id="omikujiInner">
    <h1><img src="omikujilogo.jpg" alt="おみくじ" /></h1>
    <p id="output">あなたの本日の運勢は…？<br />
    <a href="omikujien.html">YOU NEED ENGLISH ?</a></p>
    <input type="button" id="btn" value="占う">
</div>

---以下 JavaScript---

window.onload = function(){
    // まずは 変数luckに配列を代入。下の言葉は任意です。ピョン吉率を上げる為に、無駄にピョン吉が3匹います。
    var luck = ["大凶かも", "凶かも", "末吉", "小吉", "中吉", "吉", "大吉", "ピョン吉", "ピョン吉", "ピョン吉"];
    // そして 同じく変数itemに配列を代入。この部分が今日のラッキーアイテムになります。
    var item = ["にゃんこ", "あごげん", "フライドポテト(が食べたい)", "大阪王将の餃子", "エリートヤンキー三郎", "漫☆画太郎(先生)", "吉田戦車(先生)", "つのだ☆ひろ(さん)", "ピョン吉"];
    // 変数message, random_luck, random_item, cmntを後々の為に宣言。
    var message, random_luck, random_item, cmnt;
    // 変数btnにID btn (=#btnですね。)を代入。
    var btn = document.getElementById("btn");
    // var outputにID output (=#output)を代入。
    var output = document.getElementById("output");
    
    // btnをクリックすると
    btn.onclick = function(){
        // 変数random_luckにランダムに変数luckの配列の値が代入されます。
        random_luck =luck[ Math.floor( Math.random() * luck.length)];
        // そして・・・もし、random_luckが[7]と[8]と[9](つまり配列の8番目、9番目、10番目)の場合
        if (random_luck == luck[7] && random_luck == luck[8] && random_luck ==luck[9]){
        // 変数random_itemに変数itemの[8](つまり9番目) = ピョン吉　が代入される。
        random_item = item[8];
        // それ以外の場合は、
        } else {
        // 変数random_itemに変数itemの[0]から[8](つまり1番目から9番目) = ピョン吉以外　が代入される。
        random_item = item[ Math.floor( Math.random() * 7)];
        }

        // もし変数random_luckに変数luckの[0](1番目) = 大凶かも が代入されていたら、
        if (random_luck == luck[0]){
        // 変数cmntに以下を代入。
        cmnt = "うそうそ、きっと大丈夫！<br />(断言されたくないから「かも」付けておきますね。)";
        } else if (random_luck == luck[1]){
        cmnt = "大凶よりいいだろ！";
        } else if (random_luck == luck[2]){
        cmnt = "凶よりいいだろ！";
        } else if (random_luck == luck[3]){
        cmnt = "小さくても吉なだけいいじゃねーか！";
        } else if (random_luck == luck[4]){
        cmnt = "小吉よりよくて吉よりは駄目なパターンですね。<br />別にいいじゃねーか！";
        } else if (random_luck == luck[5]){
        cmnt = "下向いて歩いてたら財布拾うかもな！！";
        } else if (random_luck == luck[6]){
        cmnt = "幸せのお裾分け、お待ちしております。";
        } else if (random_luck == luck[7]){
        cmnt = "面白くなくてごめんなさい。";
        } else if (random_luck == luck[8]){
        cmnt = "面白くなくてごめんなさい。";
        } else if (random_luck == luck[9]){
        cmnt = "面白くなくてごめんなさい。";
        }
        
        // 変数メッセージにhtmlタグとrandom_luckを。
        message = "<h2>" + random_luck + "</h2>";
        // 更に追記でcmntも。
        message += "<p>" + cmnt + "</p>";
        // 更に追記でラッキーアイテムも。
        message += "<p>" + "ラッキーアイテムは</p><h3>" + random_item + "</h3><p>です。" + "</p>";
        
        // 上記の変数messageを表示する。
        output.innerHTML = message;
    }
}

以上です！

-- 2014 / 4月　補足 --
上記scriptコードですが、28行目から49行目はswitch文で記述した方が
美しくまとまりそうですね。

switch(random_luck){
    case luck[0]: cmnt = "うそうそ、きっと大丈夫！<br />(断言されたくないから「かも」付けておきますね。)"; break;
    case luck[1]: cmnt = "大凶よりいいだろ！"; break;
    case luck[2]: cmnt = "凶よりいいだろ！"; break;
    case luck[3]: cmnt = "小さくても吉なだけいいじゃねーか！"; break;
    case luck[4]: cmnt = "小吉よりよくて吉よりは駄目なパターンですね。<br />別にいいじゃねーか！"; break;
    case luck[5]: cmnt = "下向いて歩いてたら財布拾うかもな！！"; break;
    case luck[6]: cmnt = "幸せのお裾分け、お待ちしております。"; break;
    case luck[7]: cmnt = "面白くなくてごめんなさい。"; break;
    case luck[8]: cmnt = "面白くなくてごめんなさい。"; break;
    case luck[9]: cmnt = "面白くなくてごめんなさい。"; break;
}

(以上、覚えたてのswitch文でした。もっと簡潔に書けそうやけどな〜〜)

jQuery関連で試してみた記事をまとめました。
Tips付きのものだけ列挙してます。
(JavaScriptだけのものも含む)

2014年4月17日木曜日

[web関連] おみくじ作ってみた [JavaScript]

---以下 HTMLの一部---

---以下 JavaScript---

0 件のコメント:

コメントを投稿