JSFiddle - React, Tailwind, and code Playground

by Tommy Chen

HTML

<button id="start">開始</button>

<div id="deal">
    加牌？
    <button id="yes">是</button>
    <button id="no">否</button>
</div>

<div id="result"></div>

CSS

#deal {
    display: none;
}

JavaScript

var arr = []; // 撲克牌的陣列
var sum_a = 0; // 玩家點數
var sum_b = 0; // 莊家點數
var count = 0; // 已發牌數
var is_start = false; // 遊戲是否已開始

// 初始化牌組
for (var i = 1; i <= 13; i++){
    for (var j = 0; j < 4; j++){
        arr.push(i > 10 ? 10 : i); // J, Q, K 作十點
    }
}

// 陣列元素互換
var swap = function(arr, a, b){
    var tmp = arr[a];
    arr[a] = arr[b];
    arr[b] = tmp;
};

// 產生隨機整數
var rand = function(max){
    return parseInt(Math.random() * max);
};

// 洗牌
var shuffle = function(arr){
    for (var i = 1, len = arr.length; i < len; i++){
        var j = rand(52) % (i + 1);
        swap(arr, i, j);
    }
};

// 發牌（player 參數表示玩家是否加牌）
var deal = function(player){
    if (player){
        // 發牌給玩家
        sum_a += arr[count];
        count++;
        
        $('#result').text(sum_a);
        
        // 玩家爆點
        if (sum_a > 21){
            end('你輸了');
            return;
        }
    }
    
    // 發牌給莊家
    sum_b += arr[count];
    count++;
    
    // 莊家爆點
    if (sum_b > 21){
        end('你贏了');
    // 停止發牌，比較玩家與莊家點數
    } else if (sum_b >= 17){
        if (sum_a > sum_b){
            end('你贏了');
        } else if (sum_a == sum_b){
            end('平手');
        } else {
            end('你輸了');
        }
    }
};

// 開始
var start = function(){
    is_start = true;
    shuffle(arr); // 重新洗牌
    
    // 各發給玩家和莊家一張牌
    sum_a = arr[0];
    sum_b = arr[1];
    count = 2;
    
    $('#result').text(sum_a);
    $('#start').hide();
    $('#deal').show();
};

var end = function(text){
    is_start = false;
    
    $('#result').html(text);
    $('#start').html('重新開始').show();
    $('#deal').hide();
};

$('#start').on('click', start);

$('#yes').on('click', function(){
    deal(true);
});

$('#no').on('click', function(){
    deal(false);
});