[JQuery] 井字遊戲

2013-07-10

3591
0
2014-02-25

[JQuery] 井字遊戲

把井字遊戲轉換成 Web 版，用 JQery 來操作，順便練習一下 JQery 首先先建立一個 HTML 網頁，頁面設計如下


<body>
    <div>
        <span> 井字遊戲 </span><input type="button" id="btnStart" value="開始遊戲"  />
    </div>
    <hr />
    <div id="dvTTT">
    </div>
</body>

再來開始撰寫 JavaScript


        $(function () {
            var isGameOver = false;     //有連線成功則結束
            var isO = true;     //點選是 O 還是 X
            var WinGroup = [[0, 1, 2],
                                        [3, 4, 5],
                                        [6, 7, 8],
                                        [0, 3, 6],
                                        [1, 4, 7],
                                        [2, 5, 8],
                                        [0, 4, 8],
                                        [2, 4, 6]];

            for (var i = 0; i < 9; i++) {
                $("#dvTTT").append("<div class='TTTCell' id='TCell" + i + "' ><span id='TCtxt" + i + "'>Test</span></div>");
            }

            //設定遊戲開始的按鍵文字、顏色、字型
            function initButtons() {
                isGameOver = false;
                isO = true;
                $(".TTTCell").children().text("").css({ "background-color": "#e57f7f", "font-size": "35px", "font-weight": "bold", "font-family": "Arial" });
            }

            $("#btnStart").click(function () {
                initButtons();
            });

            $(".TTTCell").click(function () {
                var thisid = "#" + this.id;
                if (isGameOver) {
                    alert("遊戲結束....請重新開始遊戲!");
                    return;
                }
                if ($(thisid).text() != "") {
                    alert("這個按鍵已經選擇了，請點選其他位置！");
                    return;
                }
                if (isO)
                    $(thisid).children().text("O").css({ "background-color": "#90ee90" });
                else
                    $(thisid).children().text("X").css({ "background-color": "#cfcf11" });
                isO = !isO;

                var GameStatus = CheckWinGroup();
                isGameOver = GameStatus[1];

                //有人獲勝
                if (GameStatus[0]) {
                    alert("遊戲結束....\r\n" + $(thisid).children().text() + " 獲勝\r\n是否重新開始遊戲");
                    return;
                }
                //和局
                if (GameStatus[1]) {
                    alert("遊戲結束....\r\n和局\r\n是否重新開始遊戲", "遊戲結束");
                }
            });

            function CheckWinGroup() {
                //gameWinOver {是否有人獲勝, 是否遊戲結束(或是平局)}
                var gameWinOver = [false, false];
                var btnIsUse = 1;
                for (var i = 0; i < 8; i++) {
                    var a = WinGroup[i][0];
                    var b = WinGroup[i][1];
                    var c = WinGroup[i][2];
                    var b1 = "#" +$(".TTTCell").eq(a).children()[0].id ;
                    var b2 = "#" + $(".TTTCell").eq(b).children()[0].id;
                    var b3 = "#" + $(".TTTCell").eq(c).children()[0].id;

                    //沒有連線就繼續
                    if ($(b1).text() == "" || $(b2).text() == "" || $(b3).text() == "")
                        continue;

                    //連線成功，遊戲結束
                    if ($(b1).text() == $(b2).text() && $(b2).text() == $(b3).text()) {
                        $(b1 + ", " + b2+ ", " + b3).css({ "background-color": "#1b9580", "font-size": "65px", "font-weight": "bold", "font-family": "Arial" });
                        gameWinOver = [true, true];
                        break;
                    }

                    //九格填完，顯示結束
                    if ($(".TTTCell").eq(i).children().text() != "") {
                        btnIsUse++;
                        gameWinOver[1] = (btnIsUse == 9) ? true : false;
                    }
                }
                return gameWinOver;
            }

            initButtons();
        });

然後設定 CSS


    <style type="text/css">
        #dvTTT 
        {
            width: 360px; height: 360px;
            border: solid 5px black;
            padding: 0px;
        }
        .TTTCell 
        {
            float: left;
            width: 106px; 
            height: 106px;
            border-top: solid 2px white;
            border-left: solid 2px white;
            border-right: solid 2px gray;
            border-bottom: solid 2px gray;
            margin:5px 5px 5px 5px;
            cursor:pointer;
        }
        .TTTCell span
        {
            display:table-cell;
            width: 106px; 
            height: 106px;
            vertical-align:middle;
            text-align:center;
        }
    </style>

呈現畫面：

JQuery 版本：1.10.2

範例檔案下載

JQuery

回首頁