JavaScriptとSVGでブラックジャックを作る その1

Raphaelを使用して、JavaScriptでトランプが表示できるようになりました。
JavaScriptでトランプらしき画像を表示する(SVG,Raphael)

これでやっと本題。
JavaScriptとSVGで簡単なブラックジャックを作ってみます。



とりあえず、なんとなく動く形にしてみました。

html



htmlソースは以下の通り。


<html>
<head>
    <title>bluck jack sample</title>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script type="text/javascript" src="my-blackjack.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body onLoad="initGame();">
<h2>ディーラー</h2>
<div style="width:100%;height:200px" id="dealer"></div>
<br/>
<div id="message"></div>
<br/>
<h2>プレーヤー</h2>
<div style="width:100%;height:200px" id="player"></div>
<br/>
<input type="button" id="drawCard" value="カードを引く" onClick="drawCard();">
<input type="button" id="finGame" value=" 勝 負 " onClick="finGame();">
<input type="button" value="クリア" onClick="initGame();">
<br/>
</body>
</html>






js



JavaScriptのソースはこんな感じになりました。


var cards = [];
var player_numbers = [];

//ゲーム情報の初期化
function initGame() {
    clearTable();
    
    var tmp = [];
    for (i = 0; i < 52; i++) {
        tmp.push(i);
    }
    
    var len = 52;
    cards = [];
    while(len) {
        cards.push(tmp.splice(Math.floor(Math.random()*len--),1));
    }
    
    //プレーヤーに二枚カードを配る
    //配列の一番目が得点、二番目がAを11として計算している枚数
    player_numbers = [0, 0];
    drawCard();
    drawCard();
}


function conv_cards(num) {
    //カード種類判定
    var kinds = ['dyer', 'spade', 'heart', 'clover'];
    return [kinds[Math.floor(num / 13)], (num % 13 + 1)];
}

//カードを引く
function drawCard() {
    var number = cards.pop();
    var card= conv_cards(number);
    var root = document.getElementById('player');
    var element = document.createElement('span');
    drawTrump(element, card[0], card[1]);
    root.appendChild(element);
    
    calc(player_numbers, card[1]);
    
    if (player_numbers[0] > 21) {
        var root = document.getElementById('message');
        root.innerHTML = "プレーヤーバースト";
        root = document.getElementById('drawCard');
        root.disabled = true;
        root = document.getElementById('finGame');
        root.disabled = true;
    }
}

//いい感じに計算する
function calc(numbers, number) {
    //とりあえず、そのまま足す
    switch(number) {
        case 1:
            numbers[0] += 11;
            numbers[1] += 1;
            break;
        case 11:
        case 12:
        case 13:
            numbers[0] += 10;
            break;
        default:
            numbers[0] += number;
            break;
    }
    
    //21を超えた場合で、1を引いている場合は減じる
    if (numbers[0] > 21 && numbers[1] > 0) {
        numbers[0] -= 10;
        numbers[1] -= 1;
    }
}


//ゲーム終了・ディーラーのドロー開始
function finGame() {
    var dealer_numbers = [0, 0];
    
    while(true) {
        var number = cards.pop();
        var card= conv_cards(number);
        var root = document.getElementById('dealer');
        var element = document.createElement('span');
        drawTrump(element, card[0], card[1]);
        root.appendChild(element);
        
        calc(dealer_numbers, card[1]);
        
        if (dealer_numbers[0] > 21) {
            var root = document.getElementById('message');
            root.innerHTML = "ディーラーバースト";
            root = document.getElementById('drawCard');
            root.disabled = true;
            root = document.getElementById('finGame');
            root.disabled = true;
            return;
        } else if (dealer_numbers[0] > 16){
            break;
        }
    }
    
    var msg = "プレーヤー勝利";
    
    if (player_numbers[0] < dealer_numbers[0]) {
        msg = "ディーラー勝利";
    } else if (player_numbers[0] < dealer_numbers[0]) {
        msg = "引き分け";
    }
    
    var root = document.getElementById('message');
    root.innerHTML = msg;
    root = document.getElementById('drawCard');
    root.disabled = true;
    root = document.getElementById('finGame');
    root.disabled = true;

}

function clearTable() {
    var root = document.getElementById('player');
    var child;
    while(child = root.firstChild) {
        root.removeChild(child);
    }
    
    root = document.getElementById('dealer');
    while(child = root.firstChild) {
        root.removeChild(child);
    }
    
    root = document.getElementById('message');
    root.innerHTML = "";
    
    root = document.getElementById('drawCard');
    root.disabled = false;
    root = document.getElementById('finGame');
    root.disabled = false;
}


//トランプの描画処理
function drawTrump(root, kind, number) {
    var card = Raphael(root, 150, 200);
    
    //枠線の描画
    var rect = card.rect(0, 0, 150, 200);

    //塗りつぶし色をなし
    rect.attr("fill", "none");
    //枠線を黒
    rect.attr("stroke", "bluck");
    //枠線の太さを指定
    rect.attr("stroke-width", "5");
    
    //カードの図柄を表示する
    switch (kind) {
        case 'dyer': drawDyer(card); break;
        case 'clover': drawClover(card); break;
        case 'heart': drawHeart(card); break;
        case 'spade': drawSpade(card);break;
    }
    
    //表示するカードの番号
    var disp_number = number;
    switch (number) {
        case 1: disp_number = "A"; break;
        case 11: disp_number = "J"; break;
        case 12: disp_number = "Q"; break;
        case 13: disp_number = "K"; break;
    }
    
    
    var number_text = card.text(135, 180, disp_number);
    number_text.attr("font-size", "90");
    number_text.attr("text-anchor", "end");
}

//ダイヤの描画
function drawDyer(card) {
    var dyer = card.path("M50 10 L10 60 L50 110 L90 60");
    dyer.attr("fill", "red");
    dyer.attr("stroke", "none");
}

//クローバーの描画
function drawClover(card) {
    var st = card.set();
    st.push(
        card.circle(50, 30, 17),
        card.circle(30, 60, 17),
        card.circle(70, 60, 17),
        card.path("M50 40 L40 100 L60 100")
    );
    st.attr({fill: "bluck"});
}

//ハートの描画
function drawHeart(card) {
    var st = card.set();
    st.push(
        card.path("M20 70 A20 25 0 1 1 50 40 A20 25 0 1 1 80 70 L50 110 Z")
    );
    st.attr({fill: "red", stroke : "none"});
}

//スペードの描画
function drawSpade(card) {
    var st = card.set();
    st.push(
        card.path("M15 50 A20 20 0 1 0 50 70 A20 20 0 1 0 85 50 L50 10 Z"),
        card.path("M50 60 L40 100 L60 100")
    );
    st.attr({fill: "bluck"});
}






動くもの



備忘録としてここにおいておきます。
http://symfo.web.fc2.com/js-sample/tranp/blackjack-v1.html

※Chromeでしか動作確認していません。
たぶん、IEだと表示できないと思います。


今後、このソースを元にして
・もうちょっといい感じのソースに修正。
・ベタなJavaScriptで実装しているので、jQueryを使ってみる。
・得点計算
などを進めてみたいと思います。




【参考URL】
実践JavaScriptで配列をシャッフルする方法リファクタリング





関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ