<!DOCTYPE html>
<html>
<head>
<title> 1D Lights Out </title>
<style>
div {
width: 200px;
height: 50px;
border: 1px solid black;
}
</style>
<script>
// Create a global variable to keep track of the number of "clicks":
var clicks = 0;
// Create an init() function that sets the background color on all the "l*"
// divs to red.
function init() {
l6.style.backgroundColor = 'red';
l5.style.backgroundColor = 'red';
l4.style.backgroundColor = 'red';
l3.style.backgroundColor = 'red';
l2.style.backgroundColor = 'red';
l1.style.backgroundColor = 'red';
l0.style.backgroundColor = 'red';
}
// This function toggles the background color of the div "l<n>". Use the color
// "red" for your test. If it's red, then make it white, if it's not red,
// then make it red.
function toggle(n) {
n = "l" + n;
if (eval(n).style.backgroundColor === 'red') {
eval(n).style.backgroundColor = 'white';
} else if (eval(n).style.backgroundColor === 'white') {
eval(n).style.backgroundColor = 'red';
}
}
function checkforwin() {
win = true;
if (l0.style.backgroundColor == 'red') {
win = false;
}
if (l1.style.backgroundColor == 'red') {
win = false;
}
if (l2.style.backgroundColor == 'red') {
win = false;
}
if (l3.style.backgroundColor == 'red') {
win = false;
}
if (l4.style.backgroundColor == 'red') {
win = false;
}
if (l5.style.backgroundColor == 'red') {
win = false;
}
if (l6.style.backgroundColor == 'red') {
win = false;
}
// If the boolean variable is true, then call the window.alert() function to
// print that "You win!".
if (win) {
window.alert("You win!");
}
}
// Called when we click on an element. n is the number of the div we clicked
// on:
function set(n) {
if (eval("l" + n).style.backgroundColor == "red") {
eval("l" + n).style.backgroundColor = "white";
} else {
eval("l" + n).style.backgroundColor = "red";
}
// If n is > 0, then toggle the n below this one (n-1):
console.log(n);
var o = n;
if (n > 0) {
n = n - 1;
toggle(n);
}
// Toggle this element (n)
// If n is < 6, then toggle the n above this one (n+1):
if (o < 6) {
o = o + 1;
toggle(o);
}
// Increment the counter that keeps track of the number of clicks:
clicks += 1;
// Update the clicks display:
document.getElementById("clicks").innerHTML = clicks;
// Call the checkforwin() function to see if we've won:
checkforwin();
}
</script>
</head>
<body onload='init();'>
<table>
<tr>
<td>
<div id='l0' onclick='set(0);'></div>
<div id='l1' onclick='set(1);'></div>
<div id='l2' onclick='set(2);'></div>
<div id='l3' onclick='set(3);'></div>
<div id='l4' onclick='set(4);'></div>
<div id='l5' onclick='set(5);'></div>
<div id='l6' onclick='set(6);'></div>
<td>
# of clicks:
<td id='clicks'> 0
</table>
</body>
</html>
what I have so far for a basic lights game, just need to make it 5x5 boxes now instead of only 6 boxes