如何用JavaScript設計一副UNO給4個玩家

  • 418
  • 0
  • 2017-09-19

使用Web設計一副UNO給4個玩家

如何用JavaScript設計一副牌給4個玩家,有一位友人提出要求,希望我可以再設計一副UNO的洗牌程式。簡單說明一下,遊戲開始前,每個玩家會得到7張牌,剩下的牌會疊成一堆,在玩家無牌可出或被指定抽牌時取牌。這個動作是否能用JavaScript執行呢?

設計一副UNO給四個玩家

程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>UNO</title>
</head>
<body>
    <script>
        //產生一副牌
        var UNO = new Array(108);
        for (var i = 1; i <= UNO.length; i++) {
            UNO[i - 1] = i;
        }

        //洗牌
        var tmp = "";
        var t = 0;
        for (var i = 0; i < UNO.length; i++) {
            t = Math.floor((Math.random() * 107) + 1);
            tmp = UNO[i];
            UNO[i] = UNO[t];
            UNO[t] = tmp;
        }

        //發牌(每個人7張)
        var p1 = "", p2 = "", p3 = "", p4 = "";
        for (var i = 0; i < 28; i++) {
            switch (i % 4) {
                case 0:
                    p1 += "<img src='UNO_img/" + UNO[i] + ".jpg' />";
                    break;
                case 1:
                    p2 += "<img src='UNO_img/" + UNO[i] + ".jpg' />";
                    break;
                case 2:
                    p3 += "<img src='UNO_img/" + UNO[i] + ".jpg' />";
                    break;
                case 3:
                    p4 += "<img src='UNO_img/" + UNO[i] + ".jpg' />";
                    break;
            }
        }
        document.write("玩家1:" + p1 + "<br>玩家2:" + p2 + "<br>玩家3:" + p3 + "<br>玩家4:" + p4 + "<hr style='border:5px solid black' />");

        //把剩餘的牌放在一邊
        for (var i = 28; i < UNO.length; i++) {
            document.write("<img src='UNO_img/" + UNO[i] + ".jpg' />");
        }
    </script>
</body>
</html>

執行畫面