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