只要用 KO 的 observable 可簡單實作出簡單的猜拳互動介面，
再透過 observableArray 來做過程的歷史記錄。
只想玩game不想看文者，請連：
無歷史版：http://jsfiddle.net/twtw/ffKWa/
有歷史版：http://jsfiddle.net/twtw/hr8hX/
用一個個功能介紹 knockout.js 是單調了些，
在此實作一個 KO 版的猜拳遊戲，
就會發現用到的功能和觀念是蠻簡單的。

人 vs JS 的猜拳
先設定剪刀、石頭、布的代碼，
並利用hash的方式來設定三者會贏的規則：

var ssp = {"0":"剪刀","1":"石頭","2":"布"};
var rules = {"2":"1","1":"0","0":"2"};

電腦出拳，就用random來產生每次的選擇：

var pc = Math.floor(Math.random() * 3);

輸、贏、平手，就靠人和電腦出的拳，
若相同就平手，
若符合規則的hash的值 spp[人出拳] == 電腦出拳 的值為真，
就是人贏，其他就是電腦贏：

        if (self.myChoice() == pc) {
            self.result('平手，別學我出拳！');
        } else if (rules[self.myChoice()] == pc) {
            self.result('恭禧你贏了！擱來呀！');
        } else {
            self.result('你失手了，再來吧！');
        };

剩下的都只是需要在頁面上顯示所變動的變數。
rounds 是第幾回合，每猜一次累加1，
亂數產生 pc 這哪一種拳，然後顯示在 pcThrow 這變數，
人出哪種拳顯示在 youThrow 這變數。
在 Model View 裡，主要用 ko.observable 來測控變數，
而「出拳」這個按鍵是在有選擇哪種拳時才會出現，
透過 myChoice 的值非空來判斷。
完整的這個 基本的文字版猜拳在：
http://jsfiddle.net/twtw/ffKWa/

加上有簡單歷史及統計功能
變數的累加很單純，
而為了秀出每次的歷史，
做個 Record 的物件，裡面有 次數 及 結果 的屬性，

var Record = function(nth, status){
    this.nth = nth;
    this.status = status;
};

每猜一次就推入 records 陣列裡，
而用這個語法，得以在頁面即時反應陣列的狀態：

self.records = ko.observableArray();

而秀出這各歷史記錄的屬性的HTML語法是：

<ul data-bind="foreach:records">
    <li><span data-bind="text:nth"></span>：<span data-bind="text:status"></span></li>
</ul>​

完整的有勝負歷史版的猜拳遊戲在此：
http://jsfiddle.net/twtw/hr8hX/

在此只實作文字版，
圖形版只是換成圖形網址，
就待有興趣的邦友來改良。

系列文章列表