JSFiddle - React, Tailwind, and code Playground

by twtw

HTML

<h1>文字版：剪刀、石頭、布</h1>
第<span data-bind="text:rounds"></span>次<br />
JS出拳：<span data-bind="text:pcThrow"></span><br />
你出拳：<span data-bind="text:youThrow"></span><br />
結果：<span data-bind="text:result"></span><br />
<hr />
<input type="radio" value="0" data-bind="checked: myChoice" />剪刀
<input type="radio" value="1" data-bind="checked: myChoice" />石頭
<input type="radio" value="2" data-bind="checked: myChoice" />布
<button data-bind="click:myThrow,visible:myChoice">出拳</button>

JavaScript

//alert(Math.floor(Math.random() * 3));
var ssp = {"0":"剪刀","1":"石頭","2":"布"};
var rules = {"2":"1","1":"0","0":"2"};

function viewModel() {
    var self = this;
    self.rounds = ko.observable(0);
    self.pcThrow = ko.observable('快出拳');
    self.youThrow = ko.observable();
    self.result = ko.observable('欲知結果請出拳');
    self.myThrow = function() {
        var pc = Math.floor(Math.random() * 3);
        self.pcThrow(ssp[pc]);
        self.youThrow(ssp[self.myChoice()])
        self.rounds(self.rounds()+1);
        if (self.myChoice() == pc) {
            self.result('平手，別學我出拳！');
        } else if (rules[self.myChoice()] == pc) {
            self.result('恭禧你贏了！擱來呀！');
        } else {
            self.result('你失手了，再來吧！');
        };
    };
    self.myChoice = ko.observable();
 }
 ko.applyBindings(new viewModel());