vendredi 28 octobre 2016

Javascript only 'Lights Out' game using if else statements

I was wondering if any of you could help me out with my code. I am struggling to find out how to make a 'lights out' game using only javascript. Attached is my code. My main question is how do I use if or if else statements to make the squares around the one clicked turn yellow. Your help is appreciated.

<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>

Aucun commentaire:

Enregistrer un commentaire