使用Javascript更改css

Question

我正在制作战舰游戏，围绕着一个桌子，每个单元都有一个唯一的ID，船只放置在那里。我想放置三条不重叠的船只，如果没有对我的代码进行重大改造，就无法看到这样做的简单方法。您能看到一种更简单的方法来检查船是否重叠，然后相应地重新对着桌子上的细胞进行重新评估吗？如果有一个快速的解决方案比较船只，因为我已经编写了代码然后告诉我，如果它需要不同的结构，请给我关于它应该如何看的建议。这是代码......

<script type="text/javascript">
var yLocation = 0;
var xLocation = 0;
var boat1 = " ";
var boat2 = " ";
var boat3 = " ";
var count

function getCoordinate() {
        yLocation = Math.floor(Math.random() * 10 + 1);
        xLocation = Math.floor(Math.random() * 8 + 101);

        boat1 = "cell_" + xLocation + "_" + yLocation;
        document.getElementById(boat1).style.backgroundColor = "brown";

        xLocation = xLocation + 1;
        boat1 = "cell_" + xLocation + "_" + yLocation;
        document.getElementById(boat1).style.backgroundColor = "brown";

        xLocation = xLocation + 1;
        boat1 = "cell_" + xLocation + "_" + yLocation;
        document.getElementById(boat1).style.backgroundColor = "brown";

        //boat 2

            yLocation = Math.floor(Math.random() * 10 + 1);
            xLocation = Math.floor(Math.random() * 8 + 101);

            boat2 = "cell_" + xLocation + "_" + yLocation;
            document.getElementById(boat2).style.backgroundColor = "brown";

            xLocation = xLocation + 1;
            boat2 = "cell_" + xLocation + "_" + yLocation;
            document.getElementById(boat2).style.backgroundColor = "brown";

            xLocation = xLocation + 1;
            boat2 = "cell_" + xLocation + "_" + yLocation;
            document.getElementById(boat2).style.backgroundColor = "brown";

        //boat 3

        yLocation = Math.floor(Math.random() * 10 + 1);
        xLocation = Math.floor(Math.random() * 8 + 101);

        boat3 = "cell_" + xLocation + "_" + yLocation;
        document.getElementById(boat3).style.backgroundColor = "brown";

        xLocation = xLocation + 1;
        boat3 = "cell_" + xLocation + "_" + yLocation;
        document.getElementById(boat3).style.backgroundColor = "brown";

        xLocation = xLocation + 1;
        boat3 = "cell_" + xLocation + "_" + yLocation;
        document.getElementById(boat3).style.backgroundColor = "brown";
}