Friends here is free Sudoku game source code built with HTML, CSS and JavaScript for you. Learn how to create, customize and run a responsive browser-based number puzzle.
Sudoku is one of those games that looks simple at first but can keep you thinking for a long time. You have a grid list of numbers, a few empty spaces, and one main challenge: complete the puzzle without repeating a number in the wrong place.
What Is Sudoku Game Coding?
If you want to learn how browser games are built, creating your own Sudoku game is a useful project. It helps you practise HTML, CSS, and JavaScript while working with a familiar puzzle format.
In this tutorial, you will learn how to build a simple Sudoku game that runs directly in a web browser. It includes a playable number grid, puzzle checking, a hint option, and a reset button. Everything is included in one HTML file, making it easy to test and customize.
Sudoku is a number puzzle played on a 9 × 9 grid. The grid is divided into nine smaller 3 × 3 boxes.
The objective is to fill every empty cell with a number from 1 to 9. Each number must appear only once in every row, every column, and every 3 × 3 box.
You do not need advanced mathematics to solve Sudoku. The challenge comes from logic, observation, and eliminating numbers that cannot fit in a particular position.
A browser-based Sudoku game can be a good project for beginners because it combines a simple interface with interesting rules.
Features of This Sudoku Game Code
This version includes the basic features needed to play and test a Sudoku puzzle:
- A responsive 9 × 9 Sudoku grid.
- Pre-filled numbers that cannot be changed.
- Editable cells for entering answers.
- A Check Puzzle button to identify incorrect numbers.
- A Hint button that fills one empty cell.
- A Reset Puzzle button to restore the original board.
- Visual highlighting for incorrect entries.
- Mobile-friendly number input.
- A simple design that can be customized with CSS.
This is a starter version with one built-in puzzle. It does not yet include an automatic puzzle generator or difficulty selection, but you can add those features as you improve the project.
Free Sudoku Game Source Code
The complete code below uses HTML for the grid, CSS for its appearance, and JavaScript for the puzzle logic.
You do not need an external library or a separate JavaScript file. Copy the code into a file named index.html and open it in a modern browser.
Complete HTML, CSS and JavaScript Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sudoku Puzzle Game</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px 12px;
background: #f3f6fb;
color: #1e293b;
font-family: Arial, sans-serif;
}
.container {
width: 100%;
max-width: 520px;
margin: 0 auto;
}
h1 {
margin: 0 0 8px;
text-align: center;
font-size: clamp(30px, 7vw, 42px);
color: #1d4ed8;
}
.intro {
margin: 0 auto 20px;
max-width: 440px;
text-align: center;
color: #64748b;
line-height: 1.6;
}
.game-panel {
padding: 14px;
background: white;
border-radius: 12px;
box-shadow: 0 5px 22px rgba(15, 23, 42, 0.08);
}
.board {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
width: 100%;
border: 2px solid #334155;
background: #334155;
gap: 1px;
aspect-ratio: 1;
}
.cell {
width: 100%;
min-width: 0;
aspect-ratio: 1;
border: none;
border-radius: 0;
padding: 0;
background: #ffffff;
color: #2563eb;
font-size: clamp(14px, 4vw, 25px);
font-weight: 600;
text-align: center;
outline: none;
}
.cell:focus {
background: #dbeafe;
box-shadow: inset 0 0 0 2px #2563eb;
}
.cell.given {
background: #e8eef7;
color: #1e293b;
font-weight: 800;
}
.cell.wrong {
background: #fee2e2;
color: #b91c1c;
}
.cell.correct {
background: #dcfce7;
color: #166534;
}
/* Make each 3x3 box easy to identify. */
.cell:nth-child(3n) {
border-right: 2px solid #334155;
}
.cell:nth-child(9n) {
border-right: none;
}
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) {
border-bottom: 2px solid #334155;
}
.status {
min-height: 28px;
margin: 15px 0 10px;
text-align: center;
font-size: 14px;
line-height: 1.5;
font-weight: 600;
}
.buttons {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
button.action {
border: none;
border-radius: 7px;
padding: 12px 6px;
background: #2563eb;
color: white;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
button.action:hover {
background: #1d4ed8;
}
button.secondary {
background: #475569;
}
button.secondary:hover {
background: #334155;
}
.instructions {
margin-top: 20px;
padding: 15px;
border-radius: 9px;
background: #e8eef7;
font-size: 14px;
line-height: 1.7;
}
.instructions h2 {
margin: 0 0 8px;
font-size: 18px;
}
.instructions p {
margin: 0;
}
@media (max-width: 380px) {
.game-panel {
padding: 8px;
}
.cell {
font-size: 16px;
}
button.action {
font-size: 11px;
padding: 11px 3px;
}
}
</style>
</head>
<body>
<main class="container">
<h1>Sudoku</h1>
<p class="intro">
Fill the empty cells with numbers from 1 to 9.
Every row, column, and 3x3 box must contain
each number only once.
</p>
<section class="game-panel">
<div
id="board"
class="board"
role="group"
aria-label="Sudoku puzzle grid"
></div>
<p id="status" class="status" aria-live="polite">
Ready to play? Complete the puzzle!
</p>
<div class="buttons">
<button class="action" id="checkBtn">
Check Puzzle
</button>
<button class="action" id="hintBtn">
Get Hint
</button>
<button class="action secondary" id="resetBtn">
Reset Puzzle
</button>
</div>
</section>
<section class="instructions">
<h2>How to Play</h2>
<p>
Select an empty cell and enter a number between 1 and 9.
Avoid repeating numbers in the same row, column, or 3x3 box.
Use Check Puzzle to review your answers. Get Hint fills one
empty cell with its correct number, while Reset Puzzle
restores the original board.
</p>
</section>
</main>
<script>
const puzzle = [
"530070000",
"600195000",
"098000060",
"800060003",
"400803001",
"700020006",
"060000280",
"000419005",
"000080079"
];
const solution = [
"534678912",
"672195348",
"198342567",
"859761423",
"426853791",
"713924856",
"961537284",
"287419635",
"345286179"
];
const boardElement = document.getElementById("board");
const statusElement = document.getElementById("status");
let cells = [];
let gameFinished = false;
function createBoard() {
boardElement.innerHTML = "";
cells = [];
gameFinished = false;
statusElement.textContent =
"Ready to play? Complete the puzzle!";
for (let row = 0; row < 9; row++) {
cells[row] = [];
for (let col = 0; col < 9; col++) {
const value = puzzle[row][col];
const input = document.createElement("input");
input.type = "text";
input.inputMode = "numeric";
input.maxLength = 1;
input.autocomplete = "off";
input.className = "cell";
input.dataset.row = row;
input.dataset.col = col;
input.setAttribute(
"aria-label",
`Row ${row + 1}, column ${col + 1}`
);
if (value !== "0") {
input.value = value;
input.readOnly = true;
input.classList.add("given");
input.setAttribute("aria-readonly", "true");
} else {
input.value = "";
input.addEventListener("input", function() {
if (gameFinished) return;
const digit = this.value.replace(/[^1-9]/g, "");
this.value = digit.slice(-1);
this.classList.remove("wrong", "correct");
statusElement.textContent =
"Keep going! Check your answers when ready.";
});
}
cells[row][col] = input;
boardElement.appendChild(input);
}
}
}
function getValue(row, col) {
return cells[row][col].value;
}
function checkPuzzle() {
if (gameFinished) {
statusElement.textContent =
"The puzzle is complete. Reset it to play again.";
return;
}
let emptyCount = 0;
let wrongCount = 0;
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
const cell = cells[row][col];
cell.classList.remove("wrong", "correct");
if (puzzle[row][col] !== "0") {
continue;
}
const value = getValue(row, col);
if (value === "") {
emptyCount++;
} else if (value !== solution[row][col]) {
wrongCount++;
cell.classList.add("wrong");
} else {
cell.classList.add("correct");
}
}
}
if (emptyCount === 0 && wrongCount === 0) {
gameFinished = true;
statusElement.textContent =
"Congratulations! You solved the Sudoku puzzle!";
} else if (wrongCount > 0) {
statusElement.textContent =
`${wrongCount} incorrect cell(s) found. ` +
`${emptyCount} empty cell(s) remain.`;
} else {
statusElement.textContent =
`All entered numbers are correct so far. ` +
`${emptyCount} empty cell(s) remain.`;
}
}
function getHint() {
if (gameFinished) {
statusElement.textContent =
"The puzzle is complete. Reset it to play again.";
return;
}
const emptyCells = [];
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (
puzzle[row][col] === "0" &&
getValue(row, col) !== solution[row][col]
) {
emptyCells.push({ row, col });
}
}
}
if (emptyCells.length === 0) {
checkPuzzle();
return;
}
const position =
emptyCells[Math.floor(Math.random() * emptyCells.length)];
const cell = cells[position.row][position.col];
cell.value = solution[position.row][position.col];
cell.classList.remove("wrong");
cell.classList.add("correct");
statusElement.textContent =
"One correct number has been added. Keep solving!";
checkIfComplete();
}
function checkIfComplete() {
let complete = true;
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (getValue(row, col) !== solution[row][col]) {
complete = false;
break;
}
}
if (!complete) break;
}
if (complete) {
gameFinished = true;
statusElement.textContent =
"Congratulations! You solved the Sudoku puzzle!";
}
}
function resetPuzzle() {
createBoard();
}
document.getElementById("checkBtn")
.addEventListener("click", checkPuzzle);
document.getElementById("hintBtn")
.addEventListener("click", getHint);
document.getElementById("resetBtn")
.addEventListener("click", resetPuzzle);
createBoard();
</script>
</body>
</html>
How to Run the Sudoku Game
You can test the game on your computer without installing a development framework.
- Copy the complete source code from this article.
- Open Notepad, Visual Studio Code, or another text editor.
- Create a new file called
index.html. - Paste the code into the file and save it.
- Open the saved file in Chrome, Firefox, Edge, or another modern browser.
- Enter numbers into the empty cells and use the buttons to check your progress.
The game runs locally, so an internet connection is not required after the HTML file has been saved.
How Does the Code Work?
Understanding the main parts of the code will help you customize the game later.
1. The Puzzle and Solution
The puzzle array contains the starting board. The number 0 represents an empty cell, while numbers from 1 to 9 are the clues given to the player.
The solution array contains the completed version of that puzzle. JavaScript uses it to check answers and provide hints.
For a larger project, you could store multiple puzzles and their solutions in arrays or a separate data file.
2. Creating the Sudoku Grid
The createBoard() function creates 81 input fields, one for each cell.
Numbers supplied by the original puzzle are marked as fixed. Empty cells remain editable, allowing players to enter their answers.
CSS arranges the inputs into nine columns and adds stronger borders to separate the smaller 3 × 3 boxes.
3. Checking the Answers
When the player selects Check Puzzle, the checkPuzzle() function compares the entered numbers with the solution.
Incorrect entries receive a red background, while correct entries receive a green background. Empty cells are counted separately so the player knows how much work remains.
This is a simple answer-checking system. It checks against the stored solution rather than generating puzzles or solving them dynamically.
4. Providing a Hint
The getHint() function searches for empty cells or cells containing an incorrect answer. It chooses one of them randomly and fills it with the correct number.
This gives the player some help without automatically completing the entire puzzle.
5. Resetting the Game
The Reset Puzzle button calls createBoard() again. This restores the original puzzle and clears the player’s previous answers.
Because this starter version uses a single fixed puzzle, resetting it starts the same puzzle rather than generating a new one.
How to Customize Your Sudoku Game
Once the basic game is working, you can change its appearance or add features that make it more enjoyable.
Change the Main Colours
Look for the following CSS rule:
body {
background: #f3f6fb;
color: #1e293b;
}
You can replace these colour values with your preferred colours. For example, a dark background with bright blue highlights can give the game a more modern appearance.
Change the Button Colours
Find the .action class in the CSS:
button.action {
background: #2563eb;
color: white;
}
Change the background colour to match your website’s design. You can also adjust the border radius, padding, and font size.
Add More Sudoku Puzzles
The current version contains one puzzle. To support multiple puzzles, you can create additional puzzle and solution arrays and select a matching pair whenever a new game begins.
Make sure every puzzle has a valid solution and that its original clues match that solution.
Add a Timer
A timer can make the game more challenging. JavaScript can track elapsed seconds and display the time above the board.
If you add a timer, remember to stop it when the player solves the puzzle or resets the game.
Add Difficulty Levels
You could create Easy, Medium, and Hard options. Each level would use a different puzzle with an appropriate number of starting clues.
For a more advanced version, you could implement a Sudoku generator and a solver to create and validate new puzzles automatically.
Can You Add This Game to WordPress?
Yes. You can publish a Sudoku game on a WordPress website, but you should choose a method that supports the JavaScript used by the game.
A few practical options are:
- Create a dedicated page for the game.
- Upload the HTML, CSS, and JavaScript as separate files.
- Use a custom page template or a suitable game-embedding method.
- Add instructions and a short tutorial alongside the playable game.
If you paste the complete document into a normal WordPress Paragraph block, it will not work as intended. Some WordPress configurations also restrict JavaScript in the Custom HTML block.
For a larger website, keeping the game code in separate files makes it easier to maintain and update.
Why Is Sudoku a Good Project for Beginners?
Sudoku is a useful beginner project because it combines interface design with practical JavaScript programming.
You can practise working with arrays, nested loops, HTML input fields, event listeners, conditional statements, and CSS grid layouts. These skills are useful for many other browser-based projects.
The version in this tutorial keeps the rules simple by using a fixed puzzle and stored solution. Once you understand how it works, you can build more advanced features step by step.
Most Asked Questions
1. Is this Sudoku game source code free?
Yes. You can copy and modify the code in this tutorial for learning and your own projects. If you distribute an extended version, check the licensing terms of any third-party code or assets you add.
2. Does the game need an internet connection?
No. The basic game runs in a modern browser and does not depend on external libraries or online services.
3. Can I play Sudoku on a mobile phone?
Yes. The board adjusts to smaller screens, and the number inputs use a numeric keyboard hint on compatible mobile browsers.
4. Does this version generate new puzzles?
No. It uses one built-in puzzle and its solution. You can extend the project with multiple puzzles or build a puzzle generator in a future version.
5. Can I change the Sudoku design?
Yes. You can edit the CSS to change the colours, spacing, grid borders, typography, and buttons without rewriting the main puzzle logic.
6. Can I publish this game on my website?
Yes. You can host it as a standalone HTML page or integrate it into a suitable website template. For WordPress, use a method that permits the required JavaScript.
Game Ideas Base
Building a Sudoku game is a practical way to learn how HTML, CSS, and JavaScript work together. Even a small version can teach you a lot about creating interactive interfaces and checking user input.
Start with the working puzzle in this tutorial, test the buttons, and experiment with the design. Once you feel comfortable with the basics, consider adding more puzzles, a timer, difficulty levels, or an automatic puzzle generator.
Check out this Free Sudoku Game Source Code in HTML, CSS & JavaScript
Explore more free HTML5 game source code and tutorials on our website to find your next project.