View source for D.S. al fine (NOISZ STΔRLIVHT)/Overload Puzzle Program

Copy down the following code and save it to a notepad file, then save the file as .html and run it.
 <code><!DOCTYPE html>
 <html>
 <head>
   <title>Lights Out Puzzle OL</title>
   <style>
     .cell {
       width: 6vw;
       height: 6vw;
       max-width: 60px;
       max-height: 60px;
       border: 1px solid black;
       background-color: blue;
       display: inline-block;
     }
     .answercell {
       width: 4vw;
       height: 4vw;
       max-width: 40px;
       max-height: 40px;
       border: 1px solid black;
       background-color: blue;
       display: inline-block;
       margin-left: 2vw;
     }
     .space {
       width: 2vw;
       height: 2vw;
       display: inline-block;
     }
   </style>
 </head>
 <body>
   <nowiki><h1>Lights Out Puzzle</h1></nowiki>
 
   <nowiki><div></nowiki>
     <label for="quizSelect">Pattern Select:</label>
     <select id="quizSelect" onclick="changeQuiz()">
       <option value=0>Random</option>
       <option value=1>Diagonal 4 Red Cells(1)</option>
       <option value=2>Diagonal 4 Red Cells(2)</option>
       <option value=3>Diagonal 4 Red Cells(3)</option>
       <option value=4>Diagonal 5 Red Cells(1)</option>
       <option value=5>Diagonal 5 Red Cells(2)</option>
       <option value=6>Diagonal 7 Red Cells(1)</option>
       <option value=7>Diagonal 7 Red Cells(2)</option>
       <option value=8>Diagonal Half & Half(1)</option>
       <option value=9>Diagonal Half & Half(2)</option>
       <option value=10>Diagonal Half & Half(3)</option>
       <option value=11>Diagonal 7 Blue Cells(1)</option>
       <option value=12>Diagonal 7 Blue Cells(2)</option>
       <option value=13>Diagonal 7 Blue Cells(3)</option>
       <option value=14>Diagonal 5 Blue Cells(1)</option>
       <option value=15>Diagonal 5 Blue Cells(2)</option>
       <option value=16>Diagonal 5 Blue Cells(3)</option>
       <option value=17>Vertical Border 3 Red Cells(1)</option>
       <option value=18>Vertical Border 4 Red Cells(1)</option>
       <option value=19>Vertical Border 5 Red Cells(1)</option>
       <option value=20>Vertical Border 7 Red Cells(1)</option>
       <option value=21>Vertical Border 7 Red Cells(2)</option>
       <option value=22>Vertical Border 7 Red Cells(3)</option>
       <option value=23>Vertical Border Half & Half(1)</option>
       <option value=24>Vertical Border Half & Half(2)</option>
       <option value=25>Vertical Border Half & Half(3)</option>
       <option value=26>Vertical Border 7 Blue Cells(1)</option>
       <option value=27>Vertical Border 7 Blue Cells(2)</option>
       <option value=28>Vertical Border 7 Blue Cells7(3)</option>
       <option value=29>Vertical Border 7 Blue Cells(4)</option>
       <option value=30>Round 4 Red Cells(1)</option>
       <option value=31>Round 5 Red Cells(1)</option>
       <option value=32>Round 7 Red Cells(1)</option>
       <option value=33>Round Half & Half(1)</option>
       <option value=34>Round Half & Half(2)</option>
       <option value=35>Round 7 Blue Cells(1)</option>
       <option value=36>Round 5 Blue Cells(1)</option>
       <option value=37>Round 3 Blue Cells(1)</option>
       <option value=38>Four Corners 4 Red Cells(1)</option>
       <option value=39>Four Corners 4 Red Cells(2)</option>
       <option value=40>Four Corners 5 Red Cells(1)</option>
       <option value=41>Four Corners 5 Red Cells(2)</option>
       <option value=42>Four Corners 7 Red Cells(1)</option>
       <option value=43>Four Corners 7 Red Cells(2)</option>
       <option value=44>Four Corners Half & Half(1)</option>
       <option value=45>Four Corners 5 Blue Cells(1)</option>
 
     </select>
   <nowiki></div></nowiki>
 
   <nowiki><div id="gameBoard"></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(0, 0)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(0, 1)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(0, 2)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(0, 3)"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><br></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(1, 0)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(1, 1)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(1, 2)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(1, 3)"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><br></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(2, 0)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(2, 1)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(2, 2)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(2, 3)"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><br></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(3, 0)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(3, 1)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(3, 2)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(3, 3)"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
   <nowiki></div></nowiki>
 
   <script>
     const size = 4;
     const quiz = [
       {name: "斜め赤4(1)",
         grid: [
           [false, true, false, false],
           [false, false, false, false],
           [false, true, false, false],
           [false, false, true, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め赤4(2)",
         grid: [
           [true, false, false, true],
           [false, false, false, false],
           [false, false, false, false],
           [true, false, false, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め赤4(3)",
       grid: [
           [false, false, false, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, false, false, false]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め赤5(1)",
       grid: [
           [false, true, false, false],
           [false, false, true, false],
           [true, true, true, false],
           [false, false, false, false]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め赤5(2)",
       grid: [
           [false, false, true, true],
           [false, false, false, false],
           [false, false, true, true],
           [false, false, false, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め赤7(1)",
       grid: [
           [false, true, false, true],
           [false, true, true, false],
           [true, false, true, false],
           [false, false, false, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め赤7(2)",
       grid: [
           [true, true, false, true],
           [false, false, true, true],
           [false, false, false, false],
           [true, false, false, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め半々(1)",
       grid: [
           [true, true, false, true],
           [true, true, false, true],
           [false, true, false, false],
           [false, true, false, false]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め半々(2)",
       grid: [
           [true, false, false, true],
           [false, false, true, true],
           [true, true, true, false],
           [false, false, false, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め半々(3)",
       grid: [
           [true, true, false, true],
           [false, false, true, false],
           [true, false, true, true],
           [false, true, false, false]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め青7(1)",
       grid: [
           [false, true, true, false],
           [false, true, true, true],
           [true, false, true, true],
           [false, false, true, false]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め青7(2)",
       grid: [
           [true, true, false, false],
           [false, false, true, true],
           [true, true, false, true],
           [false, true, true, false]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め青7(3)",
       grid: [
           [true, false, false, true],
           [false, false, true, true],
           [true, true, false, true],
           [false, true, false, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め青5(1)",
       grid: [
           [true, false, true, true],
           [true, true, false, true],
           [false, false, false, true],
           [true, true, true, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め青5(2)",
       grid: [
           [true, false, true, false],
           [true, false, true, false],
           [true, true, false, true],
           [true, true, true, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "斜め青5(3)",
       grid: [
           [true, true, false, false],
           [true, false, true, true],
           [true, true, false, false],
           [true, true, true, true]
         ],
         answergrid: [
           [true, true, true, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, true, true, true]
         ]
       },
       {name: "縦ボーダー赤3(1)",
       grid: [
           [false, false, true, false],
           [false, false, false, false],
           [false, false, false, true],
           [true, false, false, false]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー赤4(1)",
       grid: [
           [false, false, false, false],
           [true, true, false, false],
           [false, false, false, true],
           [true, false, false, false]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー赤5(1)",
       grid: [
           [false, true, false, false],
           [false, false, false, false],
           [false, false, false, true],
           [true, true, true, false]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー赤7(1)",
       grid: [
           [false, false, true, true],
           [true, false, false, true],
           [true, true, false, false],
           [true, false, false, false]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー赤7(2)",
       grid: [
           [false, false, true, false],
           [true, false, false, false],
           [true, false, false, true],
           [true, true, true, false]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー赤7(3)",
       grid: [
           [true, false, false, false],
           [true, true, false, true],
           [true, false, false, false],
           [false, true, false, true]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー半々(1)",
       grid: [
           [true, false, false, false],
           [true, true, false, true],
           [true, false, true, true],
           [false, false, false, true]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー半々(2)",
       grid: [
           [false, false, true, false],
           [true, false, false, true],
           [true, false, true, true],
           [true, true, false, false]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー半々(3)",
       grid: [
           [false, true, false, true],
           [true, false, false, true],
           [false, true, true, false],
           [false, true, false, true]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー青7(1)",
       grid: [
           [false, false, false, false],
           [false, true, true, true],
           [true, true, false, true],
           [true, true, false, true]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー青7(2)",
       grid: [
           [false, false, true, true],
           [false, true, true, false],
           [true, true, false, false],
           [true, true, true, false]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー青7(3)",
       grid: [
           [true, true, true, false],
           [false, true, false, false],
           [true, true, true, false],
           [false, true, false, true]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "縦ボーダー青7(4)",
       grid: [
           [false, true, false, true],
           [true, true, true, false],
           [true, true, false, true],
           [false, false, false, true]
         ],
         answergrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false]
         ]
       },
       {name: "円形赤4(1)",
       grid: [
           [false, false, false, true],
           [false, false, true, false],
           [false, true, false, false],
           [true, false, false, false]
         ],
         answergrid: [
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
           [true, true, true, true]
         ]
       },
       {name: "円形赤5(1)",
       grid: [
           [false, true, false, false],
           [false, false, true, false],
           [true, false, false, false],
           [true, false, false, true]
         ],
         answergrid: [
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
           [true, true, true, true]
         ]
       },
       {name: "円形赤7(1)",
       grid: [
           [true, false, true, false],
           [false, true, true, false],
           [false, false, true, true],
           [false, false, false, true]
         ],
         answergrid: [
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
           [true, true, true, true]
         ]
       },
       {name: "円形半々(1)",
       grid: [
           [false, true, false, true],
           [false, true, false, false],
           [false, true, true, false],
           [true, false, true, true]
         ],
         answergrid: [
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
           [true, true, true, true]
         ]
       },
       {name: "円形半々(2)",
       grid: [
           [false, false, true, true],
           [true, false, false, true],
           [false, true, true, false],
           [false, false, true, true]
         ],
         answergrid: [
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
           [true, true, true, true]
         ]
       },
       {name: "円形青7(1)",
       grid: [
           [false, true, false, true],
           [true, false, false, true],
           [true, true, false, false],
           [true, true, true, false]
         ],
         answergrid: [
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
           [true, true, true, true]
         ]
       },
       {name: "円形青5(1)",
       grid: [
           [true, true, false, true],
           [true, true, true, false],
           [false, true, true, false],
           [true, true, true, false]
         ],
         answergrid: [
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
           [true, true, true, true]
         ]
       },
       {name: "円形青3(1)",
       grid: [
           [true, true, false, true],
           [true, true, true, true],
           [true, true, true, false],
           [false, true, true, true]
         ],
         answergrid: [
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
           [true, true, true, true]
         ]
       },
       {name: "四方形赤4(1)",
       grid: [
           [false, false, false, true],
           [false, false, true, false],
           [false, true, false, false],
           [true, false, false, false]
         ],
         answergrid: [
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
           [false, true, true, false]
         ]
       },
       {name: "四方形赤4(2)",
       grid: [
           [false, false, true, true],
           [false, true, false, false],
           [false, false, false, false],
           [false, true, false, false]
         ],
         answergrid: [
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
           [false, true, true, false]
         ]
       },
       {name: "四方形赤5(1)",
       grid: [
           [false, true, false, false],
           [true, false, false, false],
           [false, false, false, false],
           [false, true, true, true]
         ],
         answergrid: [
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
           [false, true, true, false]
         ]
       },
       {name: "四方形赤5(2)",
       grid: [
           [false, false, true, true],
           [false, false, false, false],
           [false, true, false, true],
           [true, false, false, false]
         ],
         answergrid: [
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
           [false, true, true, false]
         ]
       },
       {name: "四方形赤7(1)",
       grid: [
           [true, false, true, true],
           [false, false, true, false],
           [false, true, true, true],
           [false, false, false, false]
         ],
         answergrid: [
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
           [false, true, true, false]
         ]
       },
       {name: "四方形赤7(2)",
       grid: [
           [true, true, true, false],
           [true, false, false, false],
           [true, false, false, true],
           [false, true, false, false]
         ],
         answergrid: [
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
           [false, true, true, false]
         ]
       },
       {name: "四方形半々(1)",
       grid: [
           [true, false, true, false],
           [false, false, false, false],
           [true, true, true, true],
           [true, false, true, false]
         ],
         answergrid: [
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
           [false, true, true, false]
         ]
       },
       {name: "四方形青5(1)",
       grid: [
           [true, true, false, false],
           [true, true, true, true],
           [true, false, true, false],
           [false, true, true, true]
         ],
         answergrid: [
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
           [false, true, true, false]
         ]
       },
       {name: "Default",
         grid: [
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false]
         ],
         answergrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, true, true, true],
           [true, true, true, true]
         ]
       }
     ];
 
     const grid= [
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false]
     ];
 
     let Quiz = quiz[quiz.length-1];
 
     function initializeBoard() {
       const gameBoard = document.getElementById("gameBoard");
       const cells = gameBoard.getElementsByClassName("cell");
       const answercells = gameBoard.getElementsByClassName("answercell");
 
       for (let i = 0; i < cells.length; i++) {
         const row = Math.floor(i / size);
         const col = i % size;
 
         const cell = cells[i];
         cell.style.backgroundColor = grid[row][col] ? "red" : "blue";
         cell.style.cursor = "pointer";
 
         const answercell = answercells[i];
         answercell.style.backgroundColor = Quiz.answergrid[row][col] ? "red" : "blue";
       }
     }
 
     function toggleLights(row, col) {
       grid[row][col] = !grid[row][col];
       if (row > 0) {
         grid[row - 1][col] = !grid[row - 1][col];
       }
       if (row < size - 1) {
         grid[row + 1][col] = !grid[row + 1][col];
       }
       if (col > 0) {
         grid[row][col-1] = !grid[row][col-1];
       }
       if (col < size - 1) {
         grid[row][col+1] = !grid[row][col+1];
       }
       initializeBoard();
       checkWin();
     }
 
     function checkWin() {
       const gameBoard = document.getElementById("gameBoard");
       const cells = gameBoard.getElementsByClassName("cell");
 
       for (let i = 0; i < cells.length; i++) {
         const row = Math.floor(i / size);
         const col = i % size;
 
         if (grid[row][col] !== Quiz.answergrid[row][col]) {
           return;
         }
       }
       alert("Congrats!! You solved the puzzle!");
     }
 
     function setgrid(){
         const cells = gameBoard.getElementsByClassName("cell");
         for (let i = 0; i < cells.length; i++) {
             const row = Math.floor(i / size);
             const col = i % size;
             grid[row][col] = Quiz.grid[row][col];
         }
     }
 
     function changeQuiz() {
       const selectElement = document.getElementById("quizSelect");
       const selectedQuiz = selectElement.value;
       const cells = gameBoard.getElementsByClassName("cell");
       if (selectedQuiz === "0") {
         Quiz = quiz[Math.floor(Math.random() * (quiz.length-1))];
       } else {
         Quiz = quiz[selectedQuiz-1];
       }
       for (let i = 0; i < cells.length; i++) {
             const row = Math.floor(i / size);
             const col = i % size;
             grid[row][col] = Quiz.grid[row][col];
       }
 
       setgrid();
       initializeBoard();
     }
 
     initializeBoard();
   </script>
 </body>
 </html></code>

[[Category:NOISZ STΔRLIVHT]]