×
Create a new article
Write your page title here:
We currently have 2 articles on NOISZ Wiki. Type your article name above or click on one of the titles below and start writing!



NOISZ Wiki
NOISZ Wiki
2Articles
in:
NOISZ STΔRLIVHT

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

Revision as of 15:58, 2 May 2025 by Keternal (talk | contribs) (1 revision imported: yolo import of unofficial noisz wiki pt2)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Copy down the following code and save it to a notepad file, then save the file as .html and run it. 

<!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>
  <h1>Lights Out Puzzle</h1>

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

  <div id="gameBoard">
    <div class="cell" onclick="toggleLights(0, 0)"></div>
    <div class="cell" onclick="toggleLights(0, 1)"></div>
    <div class="cell" onclick="toggleLights(0, 2)"></div>
    <div class="cell" onclick="toggleLights(0, 3)"></div>
    <div class="space"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <br>
    <div class="cell" onclick="toggleLights(1, 0)"></div>
    <div class="cell" onclick="toggleLights(1, 1)"></div>
    <div class="cell" onclick="toggleLights(1, 2)"></div>
    <div class="cell" onclick="toggleLights(1, 3)"></div>
    <div class="space"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <br>
    <div class="cell" onclick="toggleLights(2, 0)"></div>
    <div class="cell" onclick="toggleLights(2, 1)"></div>
    <div class="cell" onclick="toggleLights(2, 2)"></div>
    <div class="cell" onclick="toggleLights(2, 3)"></div>
    <div class="space"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <br>
    <div class="cell" onclick="toggleLights(3, 0)"></div>
    <div class="cell" onclick="toggleLights(3, 1)"></div>
    <div class="cell" onclick="toggleLights(3, 2)"></div>
    <div class="cell" onclick="toggleLights(3, 3)"></div>
    <div class="space"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
    <div class="answercell"></div>
  </div>

  <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>
Retrieved from "https://anarch.games/noisz/wiki/index.php?title=D.S._al_fine_(NOISZ_STΔRLIVHT)/Overload_Puzzle_Program&oldid=706"