Black and white

Posted Jun 27, 20202 min read

Recently, it's boring. When I saw the game with the strongest brain and black and white colors, I found it very fun. I wrote a version of the code. 10 minutes code, not too much gold content, very low, do not spray

Each time you click a grid, the top, bottom, left, and right of the grid are reversed

Less nonsense, directly on the code, if you are interested, you can make an html, test and play

<html>

<head>
    <title>Black and white reverse color</title>
    <script>
        function setColor(row, column) {
            var current = document.getElementById('box' + row + column);
            var up = document.getElementById('box' +(row-1) + column);
            var down = document.getElementById('box' +(row + 1) + column);
            var left = document.getElementById('box' + row +(column-1));
            var right = document.getElementById('box' + row +(column + 1));
            updateColor(current);
            updateColor(up);
            updateColor(down);
            updateColor(left);
            updateColor(right);
        }
        function updateColor(box) {
            if(null == box) {
                return;
            }
            var color = box.style.backgroundColor;
            if('white' == color) {
                box.style.backgroundColor ='black';
            } else {
                box.style.backgroundColor ='white';
            }
        }
    </script>
</head>

<body style="background-color:wheat;">
    <table border="0">
        <tr>
            <td style="width:50px;height:50px;background-color:white;" id="box11" onclick="setColor(1,1)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box12" onclick="setColor(1,2)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box13" onclick="setColor(1,3)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box14" onclick="setColor(1,4)"></td>
        </tr>
        <tr>
            <td style="width:50px;height:50px;background-color:white;" id="box21" onclick="setColor(2,1)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box22" onclick="setColor(2,2)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box23" onclick="setColor(2,3)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box24" onclick="setColor(2,4)"></td>
        </tr>
        <tr>
            <td style="width:50px;height:50px;background-color:white;" id="box31" onclick="setColor(3,1)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box32" onclick="setColor(3,2)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box33" onclick="setColor(3,3)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box34" onclick="setColor(3,4)"></td>
        </tr>
        <tr>
            <td style="width:50px;height:50px;background-color:white;" id="box41" onclick="setColor(4,1)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box42" onclick="setColor(4,2)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box43" onclick="setColor(4,3)"></td>
            <td style="width:50px;height:50px;background-color:white;" id="box44" onclick="setColor(4,4)"></td>
        </tr>
    </table>
</body>

</html>

image.png