みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

じゃんけんゲームをつくってみよう。

昨日のFizzBuzz につづいて、思考力の向上のためにじゃんけんゲームをつくってみました。
UIはつくってないのでコンソールにひっそり結果が出力されます。

仕様

  • プレイヤーが手を選択すると、相手の出した手と勝敗が出力される。

実装してみて気づいたこと

  • じゃんけんは場に2種類の手があるときのみ勝敗がつく。(1種類、3種類はあいこ)
  • 自分の手と誰も出していない手が解れば勝敗の判定ができる。

HTML

<ul id="btns">
    <li id="btnG" data-index="0">ぐー</li>
    <li id="btnC" data-index="1">ちょき</li>
    <li id="btnP" data-index="2">ぱー</li>
</ul>

JavaScript

(function(win, doc) {

    "use strict";

    var G = "ぐー",
        C = "ちょき",
        P = "ぱー",
        ENEMY_NUM   = 1, // 敵の人数
        gcpNameList = [G, C, P],
        resultNames = {
                           draw : "【ひきわけ】", 
                           win  : "【かち】", 
                           lose : "【まけ】"
                      },
        gIndex = gcpNameList.indexOf(G),
        cIndex = gcpNameList.indexOf(C),
        pIndex = gcpNameList.indexOf(P);

    main();

    function main() {
        var game = new Game(ENEMY_NUM), // 引数は敵の数
            btns = doc.querySelector("#btns"),
            btnG = doc.querySelector("#btnG"), // ぐー
            btnC = doc.querySelector("#btnC"), // ちょき
            btnP = doc.querySelector("#btnP"); // ぱー

        btns.addEventListener("click", handleClickBtns, false);

        function handleClickBtns(evt) {
            var index = evt.target.getAttribute("data-index") - 0;

            console.log(gcpNameList[index] + "->");
            console.log(game.pom(index));
            console.log("________________________");
        }

    }

    function Game(opt_enemyNum) {
        var gcpLists       = {},
            gcpListsLength = 0,
            enemyNum       = opt_enemyNum || 1;

        function _init() {
            gcpLists = [
                [], // ぐー
                [], // ちょき
                []  // ぱー
            ];
            gcpListsLength = Object.keys(gcpLists).length;
        }

        function _pomEnemy() {
            var index = Math.random() * gcpListsLength | 0;

            gcpLists[index].push("e");
            console.log("<-" + gcpNameList[index]);
        }

        function _getResult(index) {
            var glength = gcpLists[gIndex].length,
                clength = gcpLists[cIndex].length,
                plength = gcpLists[pIndex].length;

            if (_isDraw()) {
                return resultNames.draw;
            } else if (_isWin()) {
                return resultNames.win;
            } else {
                return resultNames.lose;
            }

            function _isDraw() {
                if (glength && clength && plength) {
                    // 111
                    return true;
                }

                if ((glength || -1) * (clength || -1) * (plength || -1) > 0) {
                    // 200 020 002
                    return true;
                }

                return false;
            }

            function _isWin() {
                // 右隣のキューのlengthが0じゃなかったら勝利
                if (gcpLists[(index + 1) % 3].length) {
                    return true;
                }
            }
        }

        function pom(gcpIndex) {
            var i   = 0,
                max = enemyNum;

            _init();

            while (max--) {
                _pomEnemy();
            }

            gcpLists[gcpIndex].push("P");

            return _getResult(gcpIndex);
        }

        return {
            pom : pom
        };
    }

})(this, document);

動作サンプル

ざっと読み返して、変数名とコメントがわかりにくいことに気が付きました。
ロジックに関しても良いアプローチがあると思いますが、今回のところは動いたのでOKとしておきます。

今回は以上です。