javascript - 连接四个 : Help Using JQuery in a function

Question

我是编程新手，正在尝试制作一个简单的 Html/CSS/Javascript/JQuery Connect Four 游戏。这是 what i have so far.

唯一的问题是您不能将代币堆叠在一起!这个 Connect 4 游戏很烂； )!

在 dropToken() 函数中，我尝试创建一个带有 if 语句的 for 循环，以查找我尝试放置 token 的空间是否为白色，否则，向上一个 tr 通过在 for 循环中使用 var i 计数器。

function dropToken(obj, column)
{            
    for (var i == 6; i > 0; i--)
    {
        if ($('table tr:last-child td:nth-child(' + column + ')').css("background-color") == "white")
        {
            $('table tr:last-child td:nth-child(' + column + ')').css("background-color", playerTurn);
        }
    }
    if (playerTurn == "Red")
    {
        playerTurn = "Blue"
        obj.style.backgroundColor = "Blue";   
    }
    else
    {
        playerTurn = "Red"
        obj.style.backgroundColor = "Red"; 
    }
}

然而，这段代码使得程序not work.

Answer 1

试试这个

http://jsfiddle.net/f7hpoyfj/1/

您需要使用 if (element.css("background-color") == "rgba(0, 0, 0, 0)") 来比较颜色。它可能依赖于浏览器，也可能不依赖于浏览器。还不确定

此外，看看我是如何创建循环的 - 你没有在你之前的函数中使用 i 我认为这是一个错误，因为你有效地一遍又一遍地比较相同的元素。

for (var i = 7; i > 1; i--)
{
    var element = $('table tr:nth-child(' + i + ') td:nth-child(' + column + ')');
    if (element.css("background-color") == "rgba(0, 0, 0, 0)" || element.css("background-color") == "transparent" || element.css("background-color") == "white")
    {
        element.css("background-color", playerTurn);
        break;
    }
}