├── CHESS ├── Bbishop.png ├── Bking.png ├── Bknight.png ├── Bpawn.png ├── Bqueen.png ├── Brook.png ├── Wbishop.png ├── Wking.png ├── Wknight.png ├── Wpawn.png ├── Wqueen.png ├── Wrook.png ├── Chess.css ├── index.html └── Chess.js ├── CarGame ├── 27471.jpg ├── car1.png ├── car2.png ├── car3.png ├── road.png └── index.html ├── SpellingBee ├── bee.png ├── index.html └── p.txt ├── SnakesAndLadder ├── snake ladder.png ├── rpg-dice-rolling-95182.mp3 ├── winharpsichord-39642.mp3 ├── game.css ├── game.js ├── index.html └── ll.txt ├── TICTACTOE ├── mixkit-video-game-win-2016.mp3 ├── mixkit-negative-answer-lose-2032.mp3 ├── mixkit-select-click-1109 (mp3cut.net).mp3 ├── tictactoeTutorial.html └── index.html └── Connect4 ├── connect4.css ├── index.html └── connect4.js /CHESS/Bbishop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Bbishop.png -------------------------------------------------------------------------------- /CHESS/Bking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Bking.png -------------------------------------------------------------------------------- /CHESS/Bknight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Bknight.png -------------------------------------------------------------------------------- /CHESS/Bpawn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Bpawn.png -------------------------------------------------------------------------------- /CHESS/Bqueen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Bqueen.png -------------------------------------------------------------------------------- /CHESS/Brook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Brook.png -------------------------------------------------------------------------------- /CHESS/Wbishop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Wbishop.png -------------------------------------------------------------------------------- /CHESS/Wking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Wking.png -------------------------------------------------------------------------------- /CHESS/Wknight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Wknight.png -------------------------------------------------------------------------------- /CHESS/Wpawn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Wpawn.png -------------------------------------------------------------------------------- /CHESS/Wqueen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Wqueen.png -------------------------------------------------------------------------------- /CHESS/Wrook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CHESS/Wrook.png -------------------------------------------------------------------------------- /CarGame/27471.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CarGame/27471.jpg -------------------------------------------------------------------------------- /CarGame/car1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CarGame/car1.png -------------------------------------------------------------------------------- /CarGame/car2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CarGame/car2.png -------------------------------------------------------------------------------- /CarGame/car3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CarGame/car3.png -------------------------------------------------------------------------------- /CarGame/road.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/CarGame/road.png -------------------------------------------------------------------------------- /SpellingBee/bee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/SpellingBee/bee.png -------------------------------------------------------------------------------- /SnakesAndLadder/snake ladder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/SnakesAndLadder/snake ladder.png -------------------------------------------------------------------------------- /SnakesAndLadder/rpg-dice-rolling-95182.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/SnakesAndLadder/rpg-dice-rolling-95182.mp3 -------------------------------------------------------------------------------- /SnakesAndLadder/winharpsichord-39642.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/SnakesAndLadder/winharpsichord-39642.mp3 -------------------------------------------------------------------------------- /TICTACTOE/mixkit-video-game-win-2016.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/TICTACTOE/mixkit-video-game-win-2016.mp3 -------------------------------------------------------------------------------- /TICTACTOE/mixkit-negative-answer-lose-2032.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/TICTACTOE/mixkit-negative-answer-lose-2032.mp3 -------------------------------------------------------------------------------- /TICTACTOE/mixkit-select-click-1109 (mp3cut.net).mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jahid28/Games/HEAD/TICTACTOE/mixkit-select-click-1109 (mp3cut.net).mp3 -------------------------------------------------------------------------------- /CHESS/Chess.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | display: grid; 8 | place-items: center; 9 | overflow-x: hidden; 10 | } 11 | 12 | h1 { 13 | margin: 10px; 14 | } 15 | 16 | ul { 17 | display: grid; 18 | grid-template-columns: 1fr; 19 | } 20 | 21 | .divv { 22 | display: flex; 23 | } 24 | 25 | li { 26 | list-style: none; 27 | display: grid; 28 | place-items: center; 29 | font-size: 0px; 30 | } 31 | 32 | .box { 33 | margin: .5px; 34 | width: 75px; 35 | height: 75px; 36 | } 37 | 38 | #tog { 39 | margin: 10px 0px; 40 | } 41 | 42 | 43 | .allimg { 44 | width: 45px; 45 | position: relative; 46 | bottom: 5px; 47 | } 48 | 49 | .allpawn { 50 | transform: scale(.7); 51 | } 52 | 53 | .authcont { 54 | width: 100vw; 55 | } 56 | 57 | .author { 58 | float: right; 59 | margin-right: 50px; 60 | 61 | } 62 | 63 | 64 | @media (max-width:650px){ 65 | 66 | #tog { 67 | margin-bottom: 70px; 68 | 69 | } 70 | 71 | .box { 72 | width: 11vw; 73 | height: 11vw; 74 | } 75 | 76 | .allimg { 77 | width: 7vw; 78 | } 79 | } -------------------------------------------------------------------------------- /Connect4/connect4.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | display: grid; 7 | place-items: center; 8 | } 9 | 10 | h1{ 11 | text-align: center; 12 | margin: 20px 0 20px 0; 13 | } 14 | h2{ 15 | text-align: center; 16 | margin-bottom: 20px; 17 | } 18 | 19 | .board{ 20 | display: grid; 21 | grid-template-columns: repeat(7,1fr); 22 | border: 2px solid black; 23 | width: 630px; 24 | background-color: rgb(74, 74, 198); 25 | 26 | 27 | } 28 | 29 | ul{ 30 | display: grid; 31 | place-items: center; 32 | 33 | } 34 | 35 | ul p{ 36 | margin: 5px; 37 | width: 75px; 38 | height: 75px; 39 | border: 2px solid black; 40 | border-radius: 100px; 41 | background-color: white; 42 | } 43 | 44 | ul:hover{ 45 | cursor: pointer; 46 | background-color: rgb(98, 136, 238); 47 | } 48 | 49 | 50 | @media(max-width:700px){ 51 | .board{ 52 | width: 500px; 53 | } 54 | ul p{ 55 | width: 55px; 56 | height: 55px; 57 | 58 | } 59 | 60 | } 61 | @media(max-width:520px){ 62 | .board{ 63 | width: 400px; 64 | } 65 | ul p{ 66 | width: 40px; 67 | height: 40px; 68 | 69 | } 70 | 71 | } 72 | @media(max-width:420px){ 73 | .board{ 74 | width: 320px; 75 | } 76 | ul p{ 77 | width: 30px; 78 | height: 30px; 79 | 80 | } 81 | 82 | } 83 | -------------------------------------------------------------------------------- /SnakesAndLadder/game.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | display: grid; 8 | place-items: center; 9 | overflow: hidden; 10 | } 11 | 12 | .cont { 13 | display: grid; 14 | width: 600px; 15 | grid-template-columns: repeat(10, 1fr); 16 | margin: 0px 0 0px 0; 17 | } 18 | 19 | .cont div { 20 | width: 60px; 21 | height: 60px; 22 | border: 0.2px solid black; 23 | } 24 | 25 | #p1, 26 | #p2 { 27 | width: 50px; 28 | height: 50px; 29 | border-radius: 100px; 30 | background-color: rgb(236, 82, 82); 31 | position: relative; 32 | border: 3px solid black; 33 | 34 | /* position: absolute; */ 35 | } 36 | 37 | #p1 { 38 | position: relative; 39 | top: 0px; 40 | transition: all linear 0.5s; 41 | /* top: 0; */ 42 | left: -62px; 43 | z-index: 2; 44 | } 45 | 46 | #p2 { 47 | z-index: 2; 48 | position: relative; 49 | top: -55px; 50 | left: -62px; 51 | transition: all linear 0.5s; 52 | background-color: rgb(243, 181, 46); 53 | } 54 | 55 | img { 56 | position: relative; 57 | top: -615px; 58 | left: 8px; 59 | /* z-index: -1; */ 60 | margin: 0; 61 | width: 615px; 62 | height: 615px; 63 | } 64 | #diceCont { 65 | display: grid; 66 | place-items: center; 67 | position: absolute; 68 | top: 200px; 69 | left: 120px; 70 | font-size: 2rem; 71 | z-index: 99; 72 | } 73 | #diceBtn { 74 | z-index: 99; 75 | padding: 5px; 76 | cursor: pointer; 77 | background-color: rgb(75, 140, 197); 78 | border-radius: 5px; 79 | width: 200px; 80 | } 81 | 82 | @media (max-width: 1250px) { 83 | 84 | #diceCont { 85 | display: flex; 86 | place-items: none; 87 | top: 92vh; 88 | left: 36vw; 89 | border: 2px solid red; 90 | } 91 | #diceBtn { 92 | width: 200px; 93 | margin-left: 20px; 94 | } 95 | } 96 | @media (max-width: 1250px) { 97 | 98 | #diceCont { 99 | display: flex; 100 | place-items: none; 101 | top: 99vh; 102 | left: 10vw; 103 | /* border: 2px solid red; */ 104 | } 105 | #diceBtn { 106 | width: 200px; 107 | margin-left: 20px; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /Connect4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
56 |
57 |
58 |
59 |
57 |
58 |
59 |
60 | Red's Turn :
19 |0
20 | 21 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
--------------------------------------------------------------------------------
/TICTACTOE/tictactoeTutorial.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 




`
9 | image.style.cursor = 'pointer'
10 |
11 | }
12 |
13 | else {
14 |
15 | image.innerHTML = `${image.innerText}
`
16 | image.style.cursor = 'pointer'
17 | }
18 | }
19 | })
20 | }
21 | insertImage()
22 |
23 |
24 | //Coloring
25 |
26 | function coloring() {
27 | const color = document.querySelectorAll('.box')
28 |
29 | color.forEach(color => {
30 |
31 | getId = color.id
32 | arr = Array.from(getId)
33 | arr.shift()
34 | aside = eval(arr.pop())
35 | aup = eval(arr.shift())
36 | a = aside + aup
37 |
38 | if (a % 2 == 0) {
39 | color.style.backgroundColor = 'rgb(240, 201, 150)'
40 | }
41 | if (a % 2 !== 0) {
42 | color.style.backgroundColor = 'rgb(100, 75, 43)'
43 | }
44 | // if (a % 2 == 0) {
45 | // color.style.backgroundColor = 'seagreen'
46 | // }
47 | // if (a % 2 !== 0) {
48 | // color.style.backgroundColor = 'lime'
49 | // }
50 |
51 | })
52 | }
53 | coloring()
54 |
55 |
56 |
57 |
58 | //function to not remove the same team element
59 |
60 | function reddish() {
61 | document.querySelectorAll('.box').forEach(i1 => {
62 | if (i1.style.backgroundColor == 'pink') {
63 |
64 | document.querySelectorAll('.box').forEach(i2 => {
65 |
66 | if (i2.style.backgroundColor == 'green' && i2.innerText.length !== 0) {
67 |
68 |
69 | greenText = i2.innerText
70 |
71 | pinkText = i1.innerText
72 |
73 | pinkColor = ((Array.from(pinkText)).shift()).toString()
74 | greenColor = ((Array.from(greenText)).shift()).toString()
75 |
76 | getId = i2.id
77 | arr = Array.from(getId)
78 | arr.shift()
79 | aside = eval(arr.pop())
80 | aup = eval(arr.shift())
81 | a = aside + aup
82 |
83 | if (a % 2 == 0 && pinkColor == greenColor) {
84 | i2.style.backgroundColor = 'rgb(240, 201, 150)'
85 | }
86 | if (a % 2 !== 0 && pinkColor == greenColor) {
87 | i2.style.backgroundColor = 'rgb(100, 75, 43)'
88 | }
89 |
90 | // if (pinkColor == greenColor) {
91 | // i2.style.backgroundColor = 'rgb(253, 60, 60)'
92 | // }
93 | }
94 | })
95 | }
96 | })
97 | }
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 | tog = 1
109 | whiteCastleChance=true
110 | blackCastleChance=true
111 |
112 | document.querySelectorAll('.box').forEach(item => {
113 |
114 |
115 |
116 | item.addEventListener('click', function () {
117 |
118 | // To delete the opposite element
119 |
120 | if (item.style.backgroundColor == 'green' && item.innerText.length == 0) {
121 | tog = tog + 1
122 | }
123 | else if (item.style.backgroundColor == 'aqua' && item.innerText.length == 0) {
124 | tog = tog + 1
125 | }
126 |
127 | else if (item.style.backgroundColor == 'green' && item.innerText.length !== 0) {
128 |
129 | document.querySelectorAll('.box').forEach(i => {
130 | if (i.style.backgroundColor == 'pink') {
131 | pinkId = i.id
132 | pinkText = i.innerText
133 |
134 | document.getElementById(pinkId).innerText = ''
135 | item.innerText = pinkText
136 | coloring()
137 | insertImage()
138 | tog = tog + 1
139 |
140 | }
141 | })
142 | }
143 |
144 |
145 |
146 | getId = item.id
147 | arr = Array.from(getId)
148 | arr.shift()
149 | aside = eval(arr.pop())
150 | arr.push('0')
151 | aup = eval(arr.join(''))
152 | a = aside + aup
153 |
154 |
155 |
156 | // Function to display the available paths for all pieces
157 |
158 | function whosTurn(toggle) {
159 |
160 | // PAWN
161 |
162 | if (item.innerText == `${toggle}pawn`) {
163 | item.style.backgroundColor = 'pink'
164 |
165 | if (tog % 2 !== 0 && aup < 800) {
166 |
167 | if (aup == 200 && document.getElementById(`b${a + 100}`).innerText.length == 0) {
168 | document.getElementById(`b${a + 100}`).style.backgroundColor = 'green'
169 | if (aup == 200 && document.getElementById(`b${a + 200}`).innerText.length == 0) {
170 | document.getElementById(`b${a + 200}`).style.backgroundColor = 'green'
171 | }
172 | }
173 |
174 | if (aup !== 200 && document.getElementById(`b${a + 100}`).innerText.length == 0) {
175 | document.getElementById(`b${a + 100}`).style.backgroundColor = 'green'
176 | }
177 |
178 | if (aside < 8 && document.getElementById(`b${a + 100 + 1}`).innerText.length !== 0) {
179 | document.getElementById(`b${a + 100 + 1}`).style.backgroundColor = 'green'
180 | }
181 |
182 | if (aside > 1 && document.getElementById(`b${a + 100 - 1}`).innerText.length !== 0) {
183 | document.getElementById(`b${a + 100 - 1}`).style.backgroundColor = 'green'
184 |
185 | }
186 | // if (aup == 800) {
187 | // document.getElementById(`b${a}`).innerText = 'Wqueen'
188 | // coloring()
189 | // insertImage()
190 | // }
191 | // if (aside < 8 && document.getElementById(`b${a + 100 + 1}`).innerText.length == 0 && document.getElementById(`b${a + 100}`).innerText.length == 0) {
192 | // document.getElementById(`b${a + 100}`).style.backgroundColor = 'green'
193 | // }
194 |
195 | // if (aside > 1 && document.getElementById(`b${a + 100 - 1}`).innerText.length == 0 && document.getElementById(`b${a + 100}`).innerText.length == 0) {
196 | // document.getElementById(`b${a + 100}`).style.backgroundColor = 'green'
197 |
198 | // }
199 | }
200 |
201 | if (tog % 2 == 0 && aup > 100) {
202 |
203 | if (aup == 700 && document.getElementById(`b${a - 100}`).innerText.length == 0) {
204 | document.getElementById(`b${a - 100}`).style.backgroundColor = 'green'
205 | if (aup == 700 && document.getElementById(`b${a - 200}`).innerText.length == 0) {
206 | document.getElementById(`b${a - 200}`).style.backgroundColor = 'green'
207 | }
208 | }
209 |
210 | if (aup !== 700 && document.getElementById(`b${a - 100}`).innerText.length == 0) {
211 | document.getElementById(`b${a - 100}`).style.backgroundColor = 'green'
212 | }
213 | if (aside < 8 && document.getElementById(`b${a - 100 + 1}`).innerText.length !== 0) {
214 | document.getElementById(`b${a - 100 + 1}`).style.backgroundColor = 'green'
215 | }
216 | if (aside > 1 && document.getElementById(`b${a - 100 - 1}`).innerText.length !== 0) {
217 | document.getElementById(`b${a - 100 - 1}`).style.backgroundColor = 'green'
218 |
219 | }
220 | }
221 |
222 |
223 | }
224 |
225 | // KING
226 |
227 | if (item.innerText == `${toggle}king`) {
228 |
229 |
230 | if (aside < 8) {
231 | document.getElementById(`b${a + 1}`).style.backgroundColor = 'green'
232 |
233 | }
234 | if (aside > 1) {
235 |
236 | document.getElementById(`b${a - 1}`).style.backgroundColor = 'green'
237 | }
238 | if (aup < 800) {
239 |
240 | document.getElementById(`b${a + 100}`).style.backgroundColor = 'green'
241 | }
242 | if (aup > 100) {
243 |
244 | document.getElementById(`b${a - 100}`).style.backgroundColor = 'green'
245 | }
246 |
247 | if (aup > 100 && aside < 8) {
248 |
249 | document.getElementById(`b${a - 100 + 1}`).style.backgroundColor = 'green'
250 | }
251 | if (aup > 100 && aside > 1) {
252 |
253 | document.getElementById(`b${a - 100 - 1}`).style.backgroundColor = 'green'
254 | }
255 | if (aup < 800 && aside < 8) {
256 |
257 | document.getElementById(`b${a + 100 + 1}`).style.backgroundColor = 'green'
258 | }
259 | if (aup < 800 && aside > 1) {
260 |
261 | document.getElementById(`b${a + 100 - 1}`).style.backgroundColor = 'green'
262 | }
263 |
264 | if(whiteCastleChance==true && a==105 && document.getElementById('b106').innerText== '' && document.getElementById('b107').innerText== '' && document.getElementById('b108').innerText== 'Wrook'){
265 | document.getElementById(`b107`).style.backgroundColor = 'aqua'
266 |
267 | }
268 | if(whiteCastleChance==true && a==105 && document.getElementById('b104').innerText== '' && document.getElementById('b103').innerText== '' && document.getElementById('b102').innerText== '' && document.getElementById('b101').innerText== 'Wrook'){
269 | document.getElementById(`b103`).style.backgroundColor = 'aqua'
270 |
271 | }
272 | if(blackCastleChance==true && a==805 && document.getElementById('b806').innerText== '' && document.getElementById('b807').innerText== '' && document.getElementById('b808').innerText== 'Brook'){
273 | document.getElementById(`b807`).style.backgroundColor = 'aqua'
274 |
275 | }
276 | if(blackCastleChance==true && a==805 && document.getElementById('b804').innerText== '' && document.getElementById('b803').innerText== '' && document.getElementById('b802').innerText== '' && document.getElementById('b801').innerText== 'Brook'){
277 | document.getElementById(`b803`).style.backgroundColor = 'aqua'
278 |
279 | }
280 |
281 | item.style.backgroundColor = 'pink'
282 |
283 | }
284 |
285 |
286 | // ROOK
287 |
288 | if (item.innerText == `${toggle}rook`) {
289 |
290 | for (let i = 1; i < 9; i++) {
291 |
292 | if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText == 0) {
293 | document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green'
294 | }
295 | else if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText !== 0) {
296 | document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green'
297 | break
298 | }
299 | }
300 |
301 | for (let i = 1; i < 9; i++) {
302 |
303 | if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText == 0) {
304 | document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green'
305 | }
306 | else if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText !== 0) {
307 | document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green'
308 | break
309 | }
310 | }
311 |
312 | for (let i = 1; i < 9; i++) {
313 |
314 | if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText == 0) {
315 | document.getElementById(`b${a + i}`).style.backgroundColor = 'green'
316 | }
317 | else if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText !== 0) {
318 | document.getElementById(`b${a + i}`).style.backgroundColor = 'green'
319 | break
320 | }
321 | }
322 |
323 | for (let i = 1; i < 9; i++) {
324 |
325 | if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText == 0) {
326 | document.getElementById(`b${a - i}`).style.backgroundColor = 'green'
327 | }
328 | else if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText !== 0) {
329 | document.getElementById(`b${a - i}`).style.backgroundColor = 'green'
330 | break
331 | }
332 | }
333 |
334 | item.style.backgroundColor = 'pink'
335 | }
336 |
337 |
338 |
339 | // BISHOP
340 |
341 | if (item.innerText == `${toggle}bishop`) {
342 |
343 |
344 | for (let i = 1; i < 9; i++) {
345 | if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length == 0) {
346 | document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green'
347 | }
348 | else if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length !== 0) {
349 | document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green'
350 | break
351 | }
352 | }
353 |
354 |
355 | for (let i = 1; i < 9; i++) {
356 | if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length == 0) {
357 | document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green'
358 | }
359 | else if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length !== 0) {
360 | document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green'
361 | break
362 | }
363 | }
364 |
365 |
366 | for (let i = 1; i < 9; i++) {
367 | if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length == 0) {
368 | document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green'
369 | }
370 | else if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length !== 0) {
371 | document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green'
372 | break
373 | }
374 |
375 | }
376 |
377 |
378 | for (let i = 1; i < 9; i++) {
379 | if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length == 0) {
380 | document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green'
381 | }
382 | else if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length !== 0) {
383 | document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green'
384 | break
385 | }
386 | }
387 |
388 |
389 |
390 | item.style.backgroundColor = 'pink'
391 |
392 | }
393 |
394 |
395 |
396 | // QUEEN
397 |
398 | if (item.innerText == `${toggle}queen`) {
399 |
400 |
401 | for (let i = 1; i < 9; i++) {
402 |
403 | if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText == 0) {
404 | document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green'
405 | }
406 | else if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText !== 0) {
407 | document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green'
408 | break
409 | }
410 | }
411 |
412 | for (let i = 1; i < 9; i++) {
413 |
414 | if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText == 0) {
415 | document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green'
416 | }
417 | else if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText !== 0) {
418 | document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green'
419 | break
420 | }
421 | }
422 |
423 | for (let i = 1; i < 9; i++) {
424 |
425 | if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText == 0) {
426 | document.getElementById(`b${a + i}`).style.backgroundColor = 'green'
427 | }
428 | else if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText !== 0) {
429 | document.getElementById(`b${a + i}`).style.backgroundColor = 'green'
430 | break
431 | }
432 | }
433 |
434 | for (let i = 1; i < 9; i++) {
435 |
436 | if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText == 0) {
437 | document.getElementById(`b${a - i}`).style.backgroundColor = 'green'
438 | }
439 | else if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText !== 0) {
440 | document.getElementById(`b${a - i}`).style.backgroundColor = 'green'
441 | break
442 | }
443 | }
444 |
445 |
446 |
447 | for (let i = 1; i < 9; i++) {
448 | if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length == 0) {
449 | document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green'
450 | }
451 | else if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length !== 0) {
452 | document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green'
453 | break
454 | }
455 | }
456 |
457 |
458 | for (let i = 1; i < 9; i++) {
459 | if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length == 0) {
460 | document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green'
461 | }
462 | else if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length !== 0) {
463 | document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green'
464 | break
465 | }
466 | }
467 |
468 |
469 | for (let i = 1; i < 9; i++) {
470 | if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length == 0) {
471 | document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green'
472 | }
473 | else if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length !== 0) {
474 | document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green'
475 | break
476 | }
477 |
478 | }
479 |
480 |
481 | for (let i = 1; i < 9; i++) {
482 | if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length == 0) {
483 | document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green'
484 | }
485 | else if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length !== 0) {
486 | document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green'
487 | break
488 | }
489 | }
490 |
491 |
492 |
493 | item.style.backgroundColor = 'pink'
494 |
495 | }
496 |
497 | // KNIGHT
498 |
499 | if (item.innerText == `${toggle}knight`) {
500 |
501 |
502 | if (aside < 7 && aup < 800) {
503 | document.getElementById(`b${a + 100 + 2}`).style.backgroundColor = 'green'
504 | }
505 | if (aside < 7 && aup > 200) {
506 | document.getElementById(`b${a - 100 + 2}`).style.backgroundColor = 'green'
507 | }
508 | if (aside < 8 && aup < 700) {
509 | document.getElementById(`b${a + 200 + 1}`).style.backgroundColor = 'green'
510 | }
511 | if (aside > 1 && aup < 700) {
512 | document.getElementById(`b${a + 200 - 1}`).style.backgroundColor = 'green'
513 | }
514 | if (aside > 2 && aup < 800) {
515 | document.getElementById(`b${a - 2 + 100}`).style.backgroundColor = 'green'
516 | }
517 | if (aside > 2 && aup > 100) {
518 | document.getElementById(`b${a - 2 - 100}`).style.backgroundColor = 'green'
519 | }
520 | if (aside < 8 && aup > 200) {
521 | document.getElementById(`b${a - 200 + 1}`).style.backgroundColor = 'green'
522 | }
523 | if (aside > 1 && aup > 200) {
524 | document.getElementById(`b${a - 200 - 1}`).style.backgroundColor = 'green'
525 | }
526 |
527 | item.style.backgroundColor = 'pink'
528 |
529 | }
530 | }
531 |
532 |
533 | // Toggling the turn
534 |
535 | if (tog % 2 !== 0) {
536 | document.getElementById('tog').innerText = "White's Turn"
537 | whosTurn('W')
538 | }
539 | if (tog % 2 == 0) {
540 | document.getElementById('tog').innerText = "Black's Turn"
541 | whosTurn('B')
542 | }
543 |
544 | reddish()
545 |
546 |
547 |
548 | // winning()
549 |
550 | numOfKings = 0
551 |
552 |
553 | document.querySelectorAll('.box').forEach(win => {
554 | if (win.innerText == 'Wking' || win.innerText == 'Bking') {
555 | numOfKings += 1
556 | }
557 |
558 | })
559 |
560 | if (numOfKings == 1) {
561 | setTimeout(() => {
562 | // console.log(`${toggle}`)
563 | if (tog % 2 == 0) {
564 | alert('White Wins !!')
565 | location.reload()
566 | }
567 | else if (tog % 2 !== 0) {
568 | alert('Black Wins !!')
569 | location.reload()
570 | }
571 | }, 100)
572 | }
573 |
574 |
575 |
576 | })
577 |
578 | })
579 |
580 |
581 |
582 |
583 |
584 | // Moving the element
585 | document.querySelectorAll('.box').forEach(item => {
586 |
587 | item.addEventListener('click', function () {
588 |
589 |
590 | if (item.style.backgroundColor == 'pink') {
591 |
592 | pinkId = item.id
593 | pinkText = item.innerText
594 |
595 | document.querySelectorAll('.box').forEach(item2 => {
596 |
597 | item2.addEventListener('click', function () {
598 |
599 | getId = item2.id
600 | arr = Array.from(getId)
601 | arr.shift()
602 | aside = eval(arr.pop())
603 | arr.push('0')
604 | aup = eval(arr.join(''))
605 | a = aside + aup
606 |
607 | if (item2.style.backgroundColor == 'green' && item2.innerText.length == 0) {
608 |
609 | if (pinkText == `Wpawn` && aup == 800) {
610 |
611 | document.getElementById(`b${a}`).innerText = 'Wqueen'
612 | document.getElementById(pinkId).innerText = ''
613 | coloring()
614 | insertImage()
615 |
616 | }
617 | else if (pinkText == `Bpawn` && aup == 100) {
618 |
619 | document.getElementById(`b${a}`).innerText = 'Bqueen'
620 | document.getElementById(pinkId).innerText = ''
621 | coloring()
622 | insertImage()
623 |
624 | }
625 | else {
626 |
627 |
628 |
629 | document.getElementById(pinkId).innerText = ''
630 | item2.innerText = pinkText
631 | coloring()
632 | insertImage()
633 | }
634 |
635 | }
636 |
637 | else if (item2.style.backgroundColor == 'aqua') {
638 | if(item2.id=='b103'){
639 | document.getElementById('b101').innerText = ''
640 | document.getElementById('b102').innerText = ''
641 | document.getElementById('b103').innerText = 'Wking'
642 | document.getElementById('b104').innerText = 'Wrook'
643 | document.getElementById('b105').innerText = ''
644 | document.getElementById(pinkId).innerText = ''
645 | whiteCastleChance=false
646 | coloring()
647 | insertImage()
648 |
649 | }
650 | else if(item2.id=='b107'){
651 | document.getElementById('b105').innerText = ''
652 | document.getElementById('b106').innerText = 'Wrook'
653 | document.getElementById('b107').innerText = 'Wking'
654 | document.getElementById('b108').innerText = ''
655 | document.getElementById(pinkId).innerText = ''
656 | whiteCastleChance=false
657 | coloring()
658 | insertImage()
659 |
660 | }
661 | else if(item2.id=='b803'){
662 | document.getElementById('b801').innerText = ''
663 | document.getElementById('b802').innerText = ''
664 | document.getElementById('b803').innerText = 'Bking'
665 | document.getElementById('b804').innerText = 'Brook'
666 | document.getElementById('b805').innerText = ''
667 | document.getElementById(pinkId).innerText = ''
668 | blackCastleChance=false
669 | coloring()
670 | insertImage()
671 |
672 | }
673 | else if(item2.id=='b807'){
674 | document.getElementById('b805').innerText = ''
675 | document.getElementById('b806').innerText = 'Brook'
676 | document.getElementById('b807').innerText = 'Bking'
677 | document.getElementById('b808').innerText = ''
678 | document.getElementById(pinkId).innerText = ''
679 | blackCastleChance=false
680 | coloring()
681 | insertImage()
682 |
683 | }
684 | }
685 |
686 | })
687 | })
688 |
689 | }
690 |
691 | })
692 |
693 | })
694 |
695 |
696 |
697 |
698 |
699 |
700 | // Prvents from selecting multiple elements
701 | z = 0
702 | document.querySelectorAll('.box').forEach(ee => {
703 | ee.addEventListener('click', function () {
704 | z = z + 1
705 | if (z % 2 == 0 && ee.style.backgroundColor !== 'green' && ee.style.backgroundColor !== 'aqua') {
706 | coloring()
707 | }
708 | })
709 | })
710 |
--------------------------------------------------------------------------------