我們這次來實作井字遊戲(人對電腦)。
我們需要兩個畫面，分別用來做選擇OX的畫面和遊戲畫面。

基本刻版

先來做選擇畫面，很簡單，只有一個div裡放兩個button。

    <div id="select">
        玩家選擇OX
        <br>
        <button id="o" @click="o">O</button>
        <button id="x" @click="x">X</button>
    </div>

再來做遊戲畫面，先創一個div做九個格子的底部，再做一個重新遊戲的按鈕。

    <div id="all">
    </div>
    <button id="exit" @click="re">重新遊戲</button>

    #all {
        width: 456px;
        height: 456px;
        background-color: black;
        position: absolute;
        left: 30%;
    }
    #exit{
        position: absolute;
        left: 30%;
        top:540px
    }

剩下的九個格子在mounted裡用for迴圈生成，並用jq語法替他們生成css和id。

    for(var i = 0;i<9;i++){
        var div = document.createElement("div")
        $(div).attr('id','div'+(i+1));
        $(div).css({
            margin: '1px',
            position: 'relative',
            float: 'left',
            width: '150px',
            height: '150px',
            'background-color': 'rgb(71, 5, 255)',
            'font-size': '100px',
            'text-align': 'center',
            'line-height': '150px',
        });
        $("#all").append(div);
    }

畫面切換

我們一開始進入畫面，只能先顯示選擇畫面，選擇OX之後才能切換到遊戲畫面。

在mounted裡放jq語法，讓遊戲畫面和重新遊戲按鈕不會在一開始就出現。

    $("#all").css('display','none');
    $("#exit").css('display','none'); 

接著要在選擇ox之後要切換到遊戲畫面，所以要在ox的button讓他觸發function。

    x() {
        $("#all").css('display','block');
        $("#select").css('display','none'); 
        $("#exit").css('display','block'); 
    },

    o() {
        $("#all").css('display','block');
        $("#select").css('display','none'); 
        $("#exit").css('display','block'); 
    },

這樣我們大致上已經把所有畫面都刻好了。

輸入OX

我們需要在選擇OX時，決定玩家和電腦所屬OX，且點擊區塊時，在該區塊加入OX。

先修改選擇畫面的OX function，用到localStorage來存所選擇的OX。

存入語法:
localStorage.setItem("名稱", 存入的值);

    x() {
        $("#all").css('display','block');
        $("#select").css('display','none'); 
        $("#exit").css('display','block'); 
        localStorage.setItem("player", "x")
        localStorage.setItem("ai", "o")
    },

    o() {
        $("#all").css('display','block');
        $("#select").css('display','none'); 
        $("#exit").css('display','block'); 
        localStorage.setItem("player", "o")
        localStorage.setItem("ai", "x")
    },

到了遊戲介面後，要來監聽九個區塊，並且用一個陣列來記錄已選的區塊，用來防止重覆選取。

先在data裡新增一個空陣列

  data:()=>({
      selected:[],
  }),

接著要做九個區塊的監聽事件。

監聽區塊，用點擊事件觸發，that.selected.indexOf(1)用來判斷該區塊是否被點擊過，若未被點擊就會在該區塊輸入你所選擇的OX，並在陣列新增區塊代號1，其他8個區塊也是用同樣的方法做的。

localStorage取出語法:
localStorage.getItem("存入的名稱")

    $("#div1").on( "click", function() {
        if ((that.selected.indexOf(1) == -1)) {
            $("#div1").text(localStorage.getItem("player"))
            that.selected.push(1)
        }
    });

重玩按鈕

重玩按鈕很簡單，在該按鈕觸發function，清空localStorage再重整網頁，就可以重玩遊戲了。

    re() {
        localStorage.clear()
        window.location.reload()
    },

做完了這些就能做到選擇、輸入OX和重新遊戲的功能，還剩下電腦對手、先手問題和勝負判斷的功能，我們會在下一篇再來做這三個部分。