Question

我想知道你们中是否有人可以帮助我解决我的代码问题。我正在努力寻找如何制造“熄灯”的方法。游戏只使用javascript。附上是我的代码。我的主要问题是如何使用if或if else语句使单击周围的方块变为黄色（方形的上方，下方，左侧和右侧单击变为黄色）？我还没有尝试任何真正解决问题的东西，因为我不完全明白如何解决问题。非常感谢您的帮助。

<style type="text/css">
        body {
            text-align: center;
            font-family: sans-serif;
        }
        table {
            margin: 0 auto;
            border-collapse: collapse;
            font-size: 52px;
            background-color: black;
        }
        table tr td {
            width: 100px;
            height: 100px;
            border: 2px solid white;
        }
    </style>

<center>


    <form name=lighttable>
        <table border>
            <tr>
                <td id="cell0" onclick="changeColor(this)"> </td>
                <td id="cell1" onclick="changeColor(this)"> </td>
                <td id="cell2" onclick="changeColor(this)"> </td>
                <td id="cell3" onclick="changeColor(this)"> </td>
                <td id="cell4" onclick="changeColor(this)"> </td>
            </tr>
            <tr>
                <td id="cell5" onclick="changeColor(this)"> </td>
                <td id="cell6" onclick="changeColor(this)"> </td>
                <td id="cell7" onclick="changeColor(this)"> </td>
                <td id="cell8" onclick="changeColor(this)"> </td>
                <td id="cell9" onclick="changeColor(this)"> </td>
            </tr>
            <tr>
                <td id="cell10" onclick="changeColor(this)"> </td>
                <td id="cell11" onclick="changeColor(this)"> </td>
                <td id="cell12" onclick="changeColor(this)"> </td>
                <td id="cell13" onclick="changeColor(this)"> </td>
                <td id="cell14" onclick="changeColor(this)"> </td>
            </tr>
            <tr>
                <td id="cell15" onclick="changeColor(this)"> </td>
                <td id="cell16" onclick="changeColor(this)"> </td>
                <td id="cell17" onclick="changeColor(this)"> </td>
                <td id="cell18" onclick="changeColor(this)"> </td>
                <td id="cell19" onclick="changeColor(this)"> </td>
            </tr>
            <tr>
                <td id="cell20" onclick="changeColor(this)"> </td>
                <td id="cell21" onclick="changeColor(this)"> </td>
                <td id="cell22" onclick="changeColor(this)"> </td>
                <td id="cell23" onclick="changeColor(this)"> </td>
                <td id="cell24" onclick="changeColor(this)"> </td>
            </tr>
        </table>
        <br>






        <script>




    function changeColor(o){
        o.style.backgroundColor=(o.style.backgroundColor=='yellow')?('transparent'):('yellow');
    }





        </script>

Answer 1

我不明白你的意思'只有if else语句'，但我这是一个解决方案。

function changeAdjacentCellsColor(ac) {
    ac.forEach(function(id){
    var o = document.getElementById('cell' + id);
    if(o) o.style.backgroundColor=(o.style.backgroundColor=='yellow')?('transparent'):('yellow');
  });
}

function changeColor(o){
  var currentCell = parseInt(o.id.substr(4), 10);
  var adjacentCells = [currentCell-5, currentCell+5];
  currentCell % 5 !== 0 && adjacentCells.push(currentCell - 1);
  (currentCell + 1) % 5 !== 0 && adjacentCells.push(currentCell + 1);
  changeAdjacentCellsColor(adjacentCells);
  o.style.backgroundColor=(o.style.backgroundColor=='yellow')?('transparent'):('yellow');
}

检查此fiddle

Answer 2

传递周围的细胞:(这里我只传入2但你会传入2,3或4，这取决于细胞是否对角，边缘与否）：

<td id="cell0" onclick="changeColor(this, 'cell1', 'cell5')"></td>

然后更新你的功能以检查这些额外的单元格并突出显示它们（再次我只包括两个 - 左和右作为例子）：

function changeColor(o, left, right, top, bottom) {
   o.style.backgroundColor = (o.style.backgroundColor == 'yellow') ? ('transparent') : ('yellow');

   if (left) 
   {
       left = document.getElementById(left);
       left.style.backgroundColor = (left.style.backgroundColor == 'yellow') ? ('transparent') : ('yellow');
   }

   if (right) 
   {
       right= document.getElementById(right);
       right.style.backgroundColor = (right.style.backgroundColor == 'yellow') ? ('transparent') : ('yellow');
   }
}

注意：我已经左右调用了参数，但是按照您传递相邻单元格的顺序并不重要。

仅限Javascript＆＃39; Lights Out＆＃39;游戏使用if else语句

2 个答案: