iT邦幫忙

DAY 22
3

建立API為中心的輕量級網站系列 第 22

以 knockout.js 實作猜拳遊戲 (有game喔…)

  • 分享至 

  • xImage
  •  

只要用 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/

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

系列文章列表


上一篇
為何採用 Knockout.js (KO)?
下一篇
以 sinatra + redis 改良實作夢幻筆名
系列文
建立API為中心的輕量級網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言