Click here for free DL of the app version that can save data.

No:461

402

←

Prev Next

→

Sudoku
Developer User2987｜Date and time 23/6/14 17:36:05
Build time 86.193 sec｜Game capacity 4.934KB｜

Script

🧩 Sudoku Game 🧩

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>Sudoku Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		* {
			box-sizing: border-box;
			font-family: Arial, sans-serif;
		}
		h1 {
			text-align: center;
			font-size: 3rem;
			margin-top: 2rem;
		}
		table {
			margin: auto;
			border-collapse: collapse;
		}
		td {
			height: 3rem;
			width: 3rem;
			text-align: center;
			background-color: #fff;
			font-size: 2rem;
			font-weight: bold;
			border: 1px solid #ccc;
		}
		td:focus {
			outline: none;
			background-color: #f5f5f5;
		}
		.num-buttons {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 2rem;
		}
		.num-button {
			height: 3rem;
			width: 3rem;
			background-color: #ccc;
			font-size: 2rem;
			font-weight: bold;
			color: #fff;
			border: none;
			border-radius: 50%;
			cursor: pointer;
		}
		.num-button:hover {
			background-color: #666;
		}
		.num-button:active {
			transform: translateY(1px);
		}
		.check-button {
			display: block;
			margin: auto;
			margin-top: 2rem;
			padding: 1rem;
			background-color: #4CAF50;
			font-size: 2rem;
			font-weight: bold;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
		.check-button:hover {
			background-color: #3e8e41;
		}
		.check-button:active {
			transform: translateY(1px);
		}
	</style>
</head>
<body>
	<h1>🧩 Sudoku Game 🧩</h1>
	<table>
		<tbody id="board"></tbody>
	</table>
	<div class="num-buttons">
		<button class="num-button" id="1">1️⃣</button>
		<button class="num-button" id="2">2️⃣</button>
		<button class="num-button" id="3">3️⃣</button>
		<button class="num-button" id="4">4️⃣</button>
		<button class="num-button" id="5">5️⃣</button>
		<button class="num-button" id="6">6️⃣</button>
		<button class="num-button" id="7">7️⃣</button>
		<button class="num-button" id="8">8️⃣</button>
		<button class="num-button" id="9">9️⃣</button>
	</div>
	<button class="check-button">✅ Check ✅</button>
	<script>
		const BOARD_SIZE = 9;
		const BOX_SIZE = 3;

let board = [];
		let selectedCell = null;

function createBoard() {
			board = [
				[0, 2, 0, 9, 0, 3, 0, 0, 1],
				[0, 9, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 7, 2, 0, 8, 3, 0],
				[0, 5, 0, 0, 0, 0, 4, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 9, 0, 0, 0, 0, 6, 0],
				[0, 0, 3, 0, 0, 8, 0, 0, 0],
				[0, 0, 0, 0, 6, 0, 0, 7, 0],
				[6, 0, 0, 0, 1, 0, 0, 4, 0]
			];
		}

function selectCell(i, j) {
			if (selectedCell) {
				selectedCell.style.backgroundColor = "#fff";
			}
			selectedCell = document.getElementsByTagName("td")[i * BOARD_SIZE + j];
			selectedCell.style.backgroundColor = "#f5f5f5";
		}

function setupNumButtons() {
			let buttons = document.getElementsByClassName("num-button");
			for (let button of buttons) {
				button.addEventListener("click", addNumberToSelectedCell.bind(null, button.innerText));
			}
		}

function addNumberToSelectedCell(num) {
			if (selectedCell) {
				selectedCell.innerText = num;
			}
		}

function setupCheckButton() {
			let button = document.getElementsByClassName("check-button")[0];
			button.addEventListener("click", checkBoard);
		}

createBoard();
		renderBoard();
		setupNumButtons();
		setupCheckButton();
	</script>
</body>
</html>