├── Sudoku Game
├── index.html
├── style.css
└── script.js
└── README.md
/Sudoku Game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Sudoku Game Project
6 |
7 |
8 |
9 |
10 |
11 |
12 | The Easiest Sudoku Game You'll Ever Play
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Game-Project-Sudoku
2 |
3 | The sudoku game is made of three things
4 | index.html
5 | style.css
6 | script.js
7 |
8 | the objective of sudoku is to complete the puzzle by filling in the blank spaces with the numbers 1-9 without any duplicates in the row and column
9 |
10 | the challenge of this project was using for loops to basically do the heavy lifting of the game as I still personally dont understand how forloops actually work.
11 |
12 | There are some things that I want to add/change some of those things include:
13 | -the overall layout and look of the game, the grid and design are not mine. I used something from open source code that I found and would like to change to something that I made.
14 | -the ability to reset the board or lose.
15 | -a feature that can generate a random puzzle, the puzzle in the game is the only one and one that I put in there by hand.
16 |
--------------------------------------------------------------------------------
/Sudoku Game/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, Helvetica, sans-serif;
3 | text-align: center;
4 | background-color: blueviolet;
5 | }
6 |
7 | hr {
8 | width: 500px;
9 | }
10 |
11 | #board {
12 | width: 450px;
13 | height: 450px;
14 |
15 | margin: 0 auto;
16 | display: flex;
17 | flex-wrap: wrap;
18 | }
19 |
20 | .tile {
21 | width: 48px;
22 | height: 48px;
23 | border: 1px solid lightgray;
24 |
25 | /* Text */
26 | font-size: 20px;
27 | font-weight: bold;
28 | display: flex;
29 | justify-content: center;
30 | align-items: center;
31 | }
32 |
33 | #digits {
34 | width: 450px;
35 | height: 50px;
36 |
37 | margin: 0 auto;
38 | display: flex;
39 | flex-wrap: wrap;
40 | background-color: white;
41 | }
42 |
43 | .number {
44 | width: 44px;
45 | height: 44px;
46 | border: 1px solid black;
47 | margin: 2px;
48 |
49 | /* Text */
50 | font-size: 20px;
51 | font-weight: bold;
52 | display: flex;
53 | justify-content: center;
54 | align-items: center;
55 | }
56 |
57 | .number-selected {
58 | background-color: aquamarine;
59 | }
60 |
61 | .tile-start {
62 | background-color: aqua;
63 | }
64 |
65 | .horizontal-line {
66 | border-bottom: 1px solid black;
67 | }
68 |
69 | .vertical-line {
70 | border-right: 1px solid black;
71 | }
--------------------------------------------------------------------------------
/Sudoku Game/script.js:
--------------------------------------------------------------------------------
1 | var numSelected = null;
2 | var tileSelected = null;
3 |
4 | var errors = 0;
5 | //board player views
6 | var board = [
7 | "--39----7",
8 | "7---38--9",
9 | "8----4--2",
10 | "-----2-91",
11 | "--214-6--",
12 | "-8---5-7-",
13 | "63---752-",
14 | "-5-----16",
15 | "----1----"
16 | ]
17 | //board with solutions
18 | var solution = [
19 | "243951867",
20 | "716238459",
21 | "895674132",
22 | "564782391",
23 | "372149685",
24 | "189365274",
25 | "631497528",
26 | "457823916",
27 | "928516743"
28 | ]
29 |
30 | window.onload = function() {
31 | setGame();
32 | }
33 |
34 | function setGame() {
35 | // sets digits 1-9
36 | for (let i = 1; i <= 9; i++) {
37 | //1
38 | let number = document.createElement("div");
39 | number.id = i
40 | number.innerText = i;
41 | number.addEventListener("click", selectNumber);
42 | number.classList.add("number");
43 | document.getElementById("digits").appendChild(number);
44 | }
45 |
46 | for (let r = 0; r < 9; r++) {
47 | for (let c = 0; c < 9; c++) {
48 | let tile = document.createElement("div");
49 | tile.id = r.toString() + "-" + c.toString();
50 | if (board[r][c] != "-") {
51 | tile.innerText = board[r][c];
52 | tile.classList.add("tile-start");
53 | }
54 | if (r == 2 || r == 5) {
55 | tile.classList.add("horizontal-line");
56 | }
57 | if (c == 2 || c == 5) {
58 | tile.classList.add("vertical-line");
59 | }
60 | tile.addEventListener("click", selectTile);
61 | tile.classList.add("tile");
62 | document.getElementById("board").append(tile);
63 | }
64 | }
65 | }
66 |
67 | function selectNumber(){
68 | if (numSelected != null) {
69 | numSelected.classList.remove("number-selected");
70 | }
71 | numSelected = this;
72 | numSelected.classList.add("number-selected");
73 | }
74 |
75 | function selectTile() {
76 | if (numSelected) {
77 | if (this.innerText != "") {
78 | return;
79 | }
80 |
81 | let coords = this.id.split("-");
82 | let r = parseInt(coords[0]);
83 | let c = parseInt(coords[1]);
84 |
85 | if (solution[r][c] == numSelected.id) {
86 | this.innerText = numSelected.id;
87 | }
88 | else {
89 | errors += 1;
90 | document.getElementById("errors").innerText = errors;
91 | }
92 | }
93 | }
--------------------------------------------------------------------------------