Skip to content

Commit dcdcc6c

Browse files
DevanshKyada27DevanshKyada27
authored
CatGame
1 parent af4d54f commit dcdcc6c

File tree

3 files changed

+447
-192
lines changed

3 files changed

+447
-192
lines changed

‎index.html‎

Lines changed: 75 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,77 @@
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>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Cat Game</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="wrapper">
12+
<div class="ears">
13+
<div class="ear"></div>
14+
<div class="ear"></div>
15+
</div>
16+
<div class="head">
17+
<div class="mustaches">
18+
<div class="mus">
19+
<div class="mustach"></div>
20+
<div class="mustach"></div>
21+
<div class="mustach"></div>
22+
</div>
23+
<div class="mus">
24+
<div class="mustach"></div>
25+
<div class="mustach"></div>
26+
<div class="mustach"></div>
27+
</div>
28+
</div>
29+
<div class="eyes">
30+
<div class="eye"></div>
31+
<div class="eye"></div>
32+
</div>
33+
<div class="nose">
34+
<div class="shape"></div>
35+
</div>
36+
<div class="mouth">^</div>
37+
</div>
38+
<div class="body"></div>
39+
<div class="pads">
40+
<div class="pad"></div>
41+
<div class="pad"></div>
42+
</div>
43+
<div class="hat">
44+
<div class="bottom"></div>
45+
</div>
46+
<div class="glasses">
47+
<div class="glass"></div>
48+
<div class="glass"></div>
49+
</div>
50+
<div class="tie"></div>
51+
</div>
52+
<div class="controls">
53+
<input type="checkbox" id="eyeglasses">
54+
<input type="checkbox" id="hat">
55+
<input type="checkbox" id="tie">
56+
<label class="glassescontrol" data-text="eyeglasses" for="eyeglasses">
57+
<div class="glassesicon">
58+
<div class="glassicon"></div>
59+
<div class="glassicon"></div>
60+
</div>
61+
</label>
62+
<label data-text="Hat" class="hatcontrol" for="hat">
63+
<div class="haticon">
64+
<div class="bottom">
65+
</div>
66+
</div>
67+
</label>
68+
<label data-text="Tie" class="tiecontrol" for="tie">
69+
<div class="tieicon"></div>
70+
</label>
71+
</div>
72+
</div>
73+
<script src="./script.js"></script>
74+
</body>
75+
</html>
676

7-
<link rel="stylesheet" href="style.css">
8-
<script src="script.js"></script>
9-
</head>
1077

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>

‎script.js‎

Lines changed: 35 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,35 @@
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-
}
1+
//controls
2+
const hatcheck = document.querySelector("#hat");
3+
const glassescheck = document.querySelector("#eyeglasses");
4+
const tiecheck = document.querySelector("#tie");
5+
//accessories
6+
const hat = document.querySelector(".hat");
7+
const glasses = document.querySelector(".glasses");
8+
const tie = document.querySelector(".tie");
9+
//Reveal Hat
10+
hatcheck.addEventListener("change", hatfun);
11+
function hatfun() {
12+
if (hatcheck.checked == true) {
13+
hat.style.bottom = "165px";
14+
} else {
15+
hat.style.bottom = "400px";
16+
}
17+
}
18+
//Reveal Eyeglasses
19+
glassescheck.addEventListener("change", glassesfun);
20+
function glassesfun() {
21+
if (glassescheck.checked == true) {
22+
glasses.style.right = "50%";
23+
} else {
24+
glasses.style.right = "-50%";
25+
}
26+
}
27+
//Reveal Tie
28+
tiecheck.addEventListener("change", tiefun);
29+
function tiefun() {
30+
if (tiecheck.checked == true) {
31+
tie.style.bottom = "10px";
32+
} else {
33+
tie.style.bottom = "-80px";
34+
}
35+
}

0 commit comments

Comments
 (0)