Skip to content

Commit 4e4d2c1

Browse files
DevanshKyada27DevanshKyada27
authored
Add files via upload
1 parent 11e6825 commit 4e4d2c1

File tree

4 files changed

+226
-0
lines changed

4 files changed

+226
-0
lines changed

‎SudokuGame_DevanshKyada27/README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
# Sudoku Game
3+
4+
Created a Sudoku Game using HTML, CSS and JavaScript.
5+
Works Completely fine.
6+
It's just like a normal Sudoku Game.
7+
Here you have to select a number from the bottom and place it in the right box, then only the number would be displayed in the box where you have placed the number.
8+
9+
10+
11+
12+
13+
## Deployment
14+
15+
To deploy this project run
16+
17+
```bash
18+
Its just a normal HTML, CSS and JS file. You can just copy the code and paste it in your code editor and can view the project.
19+
```
20+
21+
22+
## Screenshots
23+
24+
![App Screenshot](https://user-images.githubusercontent.com/143169520/277363996-fa49a555-f738-4726-9e3d-59465d62b4a2.png)
25+
26+
27+
## Demo
28+
29+
To watch the live demo you can click on the link
30+
31+
https://user-images.githubusercontent.com/143169520/277364664-c268985d-25ea-48d8-9230-554afda018eb.mp4
32+

‎SudokuGame_DevanshKyada27/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">
5+
<title>Sudoku</title>
6+
7+
<link rel="stylesheet" href="style.css">
8+
<script src="script.js"></script>
9+
</head>
10+
11+
<body>
12+
<h1>Sudoku</h1>
13+
<hr>
14+
<h2 id="errors">0</h2>
15+
16+
<!-- 9x9 board -->
17+
<div id="board"></div>
18+
<br>
19+
<div id="digits">
20+
</div>
21+
22+
</body>
23+
24+
25+
</html>

‎SudokuGame_DevanshKyada27/script.js

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
2+
var numSelected = null;
3+
var tileSelected = null;
4+
5+
var errors = 0;
6+
7+
var board = [
8+
"--74916-5",
9+
"2---6-3-9",
10+
"-----7-1-",
11+
"-586----4",
12+
"--3----9-",
13+
"--62--187",
14+
"9-4-7---2",
15+
"67-83----",
16+
"81--45---"
17+
]
18+
19+
var solution = [
20+
"387491625",
21+
"241568379",
22+
"569327418",
23+
"758619234",
24+
"123784596",
25+
"496253187",
26+
"934176852",
27+
"675832941",
28+
"812945763"
29+
]
30+
31+
window.onload = function() {
32+
setGame();
33+
}
34+
35+
function setGame() {
36+
// Digits 1-9
37+
for (let i = 1; i <= 9; i++) {
38+
//<div id="1" class="number">1</div>
39+
let number = document.createElement("div");
40+
number.id = i
41+
number.innerText = i;
42+
number.addEventListener("click", selectNumber);
43+
number.classList.add("number");
44+
document.getElementById("digits").appendChild(number);
45+
}
46+
47+
// Board 9x9
48+
for (let r = 0; r < 9; r++) {
49+
for (let c = 0; c < 9; c++) {
50+
let tile = document.createElement("div");
51+
tile.id = r.toString() + "-" + c.toString();
52+
if (board[r][c] != "-") {
53+
tile.innerText = board[r][c];
54+
tile.classList.add("tile-start");
55+
}
56+
if (r == 2 || r == 5) {
57+
tile.classList.add("horizontal-line");
58+
}
59+
if (c == 2 || c == 5) {
60+
tile.classList.add("vertical-line");
61+
}
62+
tile.addEventListener("click", selectTile);
63+
tile.classList.add("tile");
64+
document.getElementById("board").append(tile);
65+
}
66+
}
67+
}
68+
69+
function selectNumber(){
70+
if (numSelected != null) {
71+
numSelected.classList.remove("number-selected");
72+
}
73+
numSelected = this;
74+
numSelected.classList.add("number-selected");
75+
}
76+
77+
function selectTile() {
78+
if (numSelected) {
79+
if (this.innerText != "") {
80+
return;
81+
}
82+
83+
// "0-0" "0-1" .. "3-1"
84+
let coords = this.id.split("-"); //["0", "0"]
85+
let r = parseInt(coords[0]);
86+
let c = parseInt(coords[1]);
87+
88+
if (solution[r][c] == numSelected.id) {
89+
this.innerText = numSelected.id;
90+
}
91+
else {
92+
errors += 1;
93+
document.getElementById("errors").innerText = errors;
94+
}
95+
}
96+
}

‎SudokuGame_DevanshKyada27/style.css

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
body {
2+
font-family: Arial, Helvetica, sans-serif;
3+
text-align: center;
4+
}
5+
6+
hr {
7+
width: 500px;
8+
}
9+
10+
#errors {
11+
color: coral;
12+
}
13+
14+
#board {
15+
width: 450px;
16+
height: 450px;
17+
18+
margin: 0 auto;
19+
display: flex;
20+
flex-wrap: wrap;
21+
}
22+
23+
.tile {
24+
width: 48px;
25+
height: 48px;
26+
border: 1px solid lightgray;
27+
28+
/* Text */
29+
font-size: 20px;
30+
font-weight: bold;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
}
35+
36+
#digits {
37+
width: 450px;
38+
height: 50px;
39+
40+
margin: 0 auto;
41+
display: flex;
42+
flex-wrap: wrap;
43+
}
44+
45+
.number {
46+
width: 44px;
47+
height: 44px;
48+
border: 1px solid black;
49+
margin: 2px;
50+
51+
/* Text */
52+
font-size: 20px;
53+
font-weight: bold;
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
}
58+
59+
.number-selected {
60+
background-color: gray;
61+
}
62+
63+
.tile-start {
64+
background-color: whitesmoke;
65+
}
66+
67+
.horizontal-line {
68+
border-bottom: 1px solid black;
69+
}
70+
71+
.vertical-line {
72+
border-right: 1px solid black;
73+
}

0 commit comments

Comments
 (0)