Sudoku Playable Html Game Generator

ID: 2374Words in prompt: 1632
1
-
Comments
🧠 Yearning for an invigorating mental challenge? Dive into our sleek Sudoku game - a digital haven free from ads! 🌟 Every launch generates a fresh puzzle tailored to your desired difficulty. 🚀 One simple copy-paste transforms you from player to game developer, embedding this gem straight into your personal HTML file. 🎮 Play seamlessly in your browser, avoiding online chaos. Don't just solve puzzles, craft your own gaming experience. 🛠️ Embrace the developer within. Start NOW! 🚀🌍
Created: 2023-09-03
Powered by: ChatGPT Version: 4
-/5 (0)Use & rate
Comments (0)

ATTENTION: This prompt is an assistant that will chat with the user. Before a input can be given, you need to copy and paste the prompt and wait until the engine tells you what to do.

PREVIEW INPUT 1: 2

PREVIEW OUTPUT 0: Welcome to the Sudoku Mastermind Generator!

Please choose a difficulty level:

  1. easy
  2. medium
  3. hard
  4. expert

Specify your preference to receive a custom Sudoku puzzle embedded in a full HTML format. If you wish to view the solution afterward, simply request it.

PREVIEW OUTPUT 1: Generating a medium difficulty Sudoku puzzle…

Okay, I've generated a medium difficulty Sudoku puzzle. Here's the complete HTML with the puzzle and its solution embedded:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudoku Game</title>
    <style>
        body {
            font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4;
        }
        h1 { text-align: center; margin-bottom: 20px; }
        table { border-collapse: collapse; border: 2px solid #000; }
        td {
            width: 40px; height: 40px; text-align: center; border: 1px solid #ddd; position: relative;
        }
        td:nth-child(3), td:nth-child(6) { border-right: 2px solid #000; }
        td:nth-child(1), td:nth-child(4), td:nth-child(7) { border-left: 2px solid #000; }
        tr:nth-child(3) td, tr:nth-child(6) td { border-bottom: 2px solid #000; }
        tr:nth-child(1) td, tr:nth-child(4) td, tr:nth-child(7) td { border-top: 2px solid #000; }
        td input[type="number"] {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; box-sizing: border-box; border: none;
            text-align: center; font-size: 16px; background-color: transparent; -moz-appearance: textfield;
        }
        input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none; margin: 0;
        }
        button {
            background-color: #4CAF50; border: none; color: white; padding: 12px 20px; text-align: center; display: inline-block;
            margin: 4px 2px; cursor: pointer; border-radius: 4px;
        }
        button:hover { opacity: 0.8; }
        #controls { margin-top: 10px; text-align: center; }
        #sudokuContainer { background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
        .bold-text { font-weight: bold; }
        .incorrect { background-color: #f8d7da; }
        .correct { background-color: #d4edda; }

    </style>
</head>

<body>
    <div id="sudokuContainer">
        <h1>Sudoku</h1>
        <table id="sudokuBoard"></table>
        <div id="controls">
            <button onclick="action('check')">Check</button>
            <button onclick="action('solution')">Solution</button>
        </div>
    </div>
    <script>
        const SIZE = 9, PATTERN = /^[1-9]$/,
                sudoku = [
                    [5, 3, 0, 0, 7, 0, 0, 0, 0],
                    [6, 0, 0, 1, 9, 5, 0, 0, 0],
                    [0, 9, 8, 0, 0, 0, 0, 6, 0],
                    [8, 0, 0, 0, 6, 0, 0, 0, 3],
                    [4, 0, 0, 8, 0, 3, 0, 0, 1],
                    [7, 0, 0, 0, 2, 0, 0, 0, 6],
                    [0, 6, 0, 0, 0, 0, 2, 8, 0],
                    [0, 0, 0, 4, 1, 9, 0, 0, 5],
                    [0, 0, 0, 0, 8, 0, 0, 7, 9]
                ],
                sudokuSolution = [
                    [5, 3, 4, 6, 7, 8, 9, 1, 2],
                    [6, 7, 2, 1, 9, 5, 3, 4, 8],
                    [1, 9, 8, 3, 4, 2, 5, 6, 7],
                    [8, 5, 9, 7, 6, 1, 4, 2, 3],
                    [4, 2, 6, 8, 5, 3, 7, 9, 1],
                    [7, 1, 3, 9, 2, 4, 8, 5, 6],
                    [9, 6, 1, 5, 3, 7, 2, 8, 4],
                    [2, 8, 7, 4, 1, 9, 6, 3, 5],
                    [3, 4, 5, 2, 8, 6, 1, 7, 9]
                ],
                board = document.getElementById('sudokuBoard');

        const action = (type) => {
            for (let i = 0; i < SIZE; i++) {
                for (let j = 0; j < SIZE; j++) {
                    const cell = board.rows[i].cells[j], input = cell.querySelector('input');
                    cell.classList.remove('incorrect', 'correct');
                    if (input) {
                        if (type === 'check' && PATTERN.test(input.value)) {
                            cell.classList.add(parseInt(input.value, 10) !== sudokuSolution[i][j] ? 'incorrect' : 'correct');
                        } else if (type === 'solution') {
                            input.value = sudokuSolution[i][j];
                        }
                    }
                }
            }
        };
        (function generateBoard() {
            for (let i = 0; i < SIZE; i++) {
                const row = board.insertRow();
                for (let j = 0; j < SIZE; j++) {
                    const cell = row.insertCell();
                    if (sudoku[i][j]) {
                        cell.innerText = sudoku[i][j];
                        cell.classList.add('bold-text');
                    } else {
                        const inputElem = document.createElement('input');
                        Object.assign(inputElem, { type: 'number', pattern: PATTERN.source, maxLength: 1 });
                        cell.appendChild(inputElem);
                    }
                }
            }
        })();
    </script>
</body>

</

html>

To play the Sudoku game, you can save the above code to an HTML file and open it with your browser. You can fill in the cells, then press "Check" to verify your answers, or press "Solution" to reveal the solution.

Happy solving! Let me know if you need anything else.