的JavaScript。二十一点，命中功能

Question

我一直在制作一个二十一点游戏作为学校的项目，但我已经暂时停留在这一点上。

我成功完成的是生成5张带有相应图片和数字的卡片，但我想要做的是当我点击按钮时，它应该一次只生成一张卡片。

示例如果用户“点击”只出现1张牌，如果他再次点击，则会出现第二张牌。

这是我用于显示5张卡片的JS编码

function StartGame()
{
    for (i = 0; i <= 4; i++)
    {
        for (j=1; j <= 52; j++)
        {
            if (RandomCards[i] == j)
            {
                if (Plade[i] == 0)
                {
                    if (i == 0)
                    {
                    Plade[i] = j
                    document.getElementById("img" + j).style.display = "block";
                    }
                    else if (i == 1)
                    {
                    Plade[i] = j
                    document.getElementById("img" + j).style.display = "block";
                    document.getElementById("img" + j).style.left = "455px";
                    }
                    else if (i == 2)
                    {
                    Plade[i] = j
                    document.getElementById("img" + j).style.display = "block";
                    document.getElementById("img" + j).style.left = "665px";
                    }
                    else if (i == 3)
                    {
                    Plade[i] = j
                    document.getElementById("img" + j).style.display = "block";
                    document.getElementById("img" + j).style.left = "875px";
                    }
                    else if (i == 4)
                    {
                    Plade[i] = j
                    document.getElementById("img" + j).style.display = "block";
                    document.getElementById("img" + j).style.left = "1085px";
                    }
                }
            }
        }
        if (Plade[i] == 1)
        {
            DineKort[i] = 1
        }
        else if (Plade[i] == 2)
        {
            DineKort[i] = 2
        }
        else if (Plade[i] == 3)
        {
            DineKort[i] = 3
        }
        else if (Plade[i] == 4)
        {
            DineKort[i] = 4
        }
        else if (Plade[i] == 5)
        {
            DineKort[i] = 5
        }
        else if (Plade[i] == 6)
        {
            DineKort[i] = 6
        }
        else if (Plade[i] == 7)
        {
            DineKort[i] = 7
        }
        else if (Plade[i] == 8)
        {
            DineKort[i] = 8
        }
        else if (Plade[i] == 9)
        {
            DineKort[i] = 9
        }
        else if (Plade[i] == 10)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 11)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 12)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 13)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 14)
        {
            DineKort[i] = 1
        }
        else if (Plade[i] == 15)
        {
            DineKort[i] = 2
        }
        else if (Plade[i] == 16)
        {
            DineKort[i] = 3
        }
        else if (Plade[i] == 17)
        {
            DineKort[i] = 4
        }
        else if (Plade[i] == 18)
        {
            DineKort[i] = 5
        }
        else if (Plade[i] == 19)
        {
            DineKort[i] = 6
        }
        else if (Plade[i] == 20)
        {
            DineKort[i] = 7
        }
        else if (Plade[i] == 21)
        {
            DineKort[i] = 8
        }
        else if (Plade[i] == 22)
        {
            DineKort[i] = 9
        }
        else if (Plade[i] == 23)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 24)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 25)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 26)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 27)
        {
            DineKort[i] = 1
        }
        else if (Plade[i] == 28)
        {
            DineKort[i] = 2
        }
        else if (Plade[i] == 29)
        {
            DineKort[i] = 3
        }
        else if (Plade[i] == 30)
        {
            DineKort[i] = 4
        }
        else if (Plade[i] == 31)
        {
            DineKort[i] = 5
        }
        else if (Plade[i] == 32)
        {
            DineKort[i] = 6
        }
        else if (Plade[i] == 33)
        {
            DineKort[i] = 7
        }
        else if (Plade[i] == 34)
        {
            DineKort[i] = 8
        }
        else if (Plade[i] == 35)
        {
            DineKort[i] = 9
        }
        else if (Plade[i] == 36)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 37)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 38)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 39)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 40)
        {
            DineKort[i] = 1
        }
        else if (Plade[i] == 41)
        {
            DineKort[i] = 2
        }
        else if (Plade[i] == 42)
        {
            DineKort[i] = 3
        }
        else if (Plade[i] == 43)
        {
            DineKort[i] = 4
        }
        else if (Plade[i] == 44)
        {
            DineKort[i] = 5
        }
        else if (Plade[i] == 45)
        {
            DineKort[i] = 6
        }
        else if (Plade[i] == 46)
        {
            DineKort[i] = 7
        }
        else if (Plade[i] == 47)
        {
            DineKort[i] = 8
        }
        else if (Plade[i] == 48)
        {
            DineKort[i] = 9
        }
        else if (Plade[i] == 49)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 50)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 51)
        {
            DineKort[i] = 10
        }
        else if (Plade[i] == 52)
        {
            DineKort[i] = 10
        }
    }
    console.log(DineKort)
}

Answer 1

假设您之前已经定义了变量并填充了RandomCards，那么这应该是代码的更紧凑版本：

function StartGame()
{
    for (i = 0; i <= 4; i++)
    {
        document.getElementById("img" + RandomCards[i]).style.display = "block";
        if (i > 0)
        {
        document.getElementById("img" + RandomCards[i]).style.left = 245+210*i+"px";
        }
        DineKort[i] = Math.min(RandomCards[i]%13+1, 11)-1;
    }
    console.log(DineKort);
}

如果您只想要一张卡，而不是使用for循环，只需调用阵列中的当前位置。

var CurrCard=0;

function NextCard()
{
    if(CurrCard<5)
    {
        document.getElementById("img" + RandomCards[CurrCard]).style.display = "block";
        if (CurrCard > 0)
        {
        document.getElementById("img" + RandomCards[CurrCard]).style.left = 245+210*CurrCard+"px";
        }
        DineKort[CurrCard] = Math.min(RandomCards[CurrCard]%13+1, 11)-1;
    }
    console.log(DineKort[CurrCard]);