Skip to content

Commit 5afec25

Browse files
author
Replit user
committed
created a sudoko game using html css and javascript
1 parent 6dc79e9 commit 5afec25

File tree

6 files changed

+376
-0
lines changed

6 files changed

+376
-0
lines changed

‎.replit

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
modules = ["nodejs-18:v3-20230608-f4cd419"]
2+
hidden = [".config", "package-lock.json"]
3+
run = "npm run start"
4+
5+
[nix]
6+
channel = "stable-23_05"
7+
8+
[deployment]
9+
run = ["sh", "-c", "npm run start"]
10+
deploymentTarget = "cloudrun"
11+
ignorePorts = false

‎package-lock.json

+155
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "nodejs",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"@types/node": "^18.0.6",
14+
"node-fetch": "^3.2.6"
15+
}
16+
}

‎sudokogame/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>

‎sudokogame/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+
}

‎sudokogame/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)