diff --git a/CHESS/Bbishop.png b/CHESS/Bbishop.png new file mode 100644 index 00000000..9b8e567f Binary files /dev/null and b/CHESS/Bbishop.png differ diff --git a/CHESS/Bking.png b/CHESS/Bking.png new file mode 100644 index 00000000..bffda3c9 Binary files /dev/null and b/CHESS/Bking.png differ diff --git a/CHESS/Bknight.png b/CHESS/Bknight.png new file mode 100644 index 00000000..30e7b847 Binary files /dev/null and b/CHESS/Bknight.png differ diff --git a/CHESS/Bpawn.png b/CHESS/Bpawn.png new file mode 100644 index 00000000..a7c115ca Binary files /dev/null and b/CHESS/Bpawn.png differ diff --git a/CHESS/Bqueen.png b/CHESS/Bqueen.png new file mode 100644 index 00000000..8cb48796 Binary files /dev/null and b/CHESS/Bqueen.png differ diff --git a/CHESS/Brook.png b/CHESS/Brook.png new file mode 100644 index 00000000..915dd33e Binary files /dev/null and b/CHESS/Brook.png differ diff --git a/CHESS/Chess.css b/CHESS/Chess.css new file mode 100644 index 00000000..17f249c4 --- /dev/null +++ b/CHESS/Chess.css @@ -0,0 +1,79 @@ +* { + margin: 0; + padding: 0; +} + +body { + display: grid; + place-items: center; + overflow-x: hidden; +} + +h1 { + margin: 10px; +} + +ul { + display: grid; + grid-template-columns: 1fr; +} + +.divv { + display: flex; +} + +li { + list-style: none; + display: grid; + place-items: center; + font-size: 0px; +} + +.box { + margin: .5px; + width: 75px; + height: 75px; +} + +#tog { + margin: 10px 0px; +} + + +.allimg { + width: 45px; + position: relative; + bottom: 5px; +} + +.allpawn { + transform: scale(.7); +} + +.authcont { + width: 100vw; +} + +.author { + float: right; + margin-right: 50px; + +} + + +@media (max-width:650px){ + + #tog { + margin-bottom: 70px; + + } + + .box { + width: 11vw; + height: 11vw; + } + + .allimg { + width: 7vw; + } +} \ No newline at end of file diff --git a/CHESS/Chess.js b/CHESS/Chess.js new file mode 100644 index 00000000..b51213e2 --- /dev/null +++ b/CHESS/Chess.js @@ -0,0 +1,709 @@ +// Inserting the Images +function insertImage() { + + document.querySelectorAll('.box').forEach(image => { + + if (image.innerText.length !== 0) { + if (image.innerText == 'Wpawn' || image.innerText == 'Bpawn') { + image.innerHTML = `${image.innerText} ` + image.style.cursor = 'pointer' + + } + + else { + + image.innerHTML = `${image.innerText} ` + image.style.cursor = 'pointer' + } + } + }) +} +insertImage() + + +//Coloring + +function coloring() { + const color = document.querySelectorAll('.box') + + color.forEach(color => { + + getId = color.id + arr = Array.from(getId) + arr.shift() + aside = eval(arr.pop()) + aup = eval(arr.shift()) + a = aside + aup + + if (a % 2 == 0) { + color.style.backgroundColor = 'rgb(240, 201, 150)' + } + if (a % 2 !== 0) { + color.style.backgroundColor = 'rgb(100, 75, 43)' + } + // if (a % 2 == 0) { + // color.style.backgroundColor = 'seagreen' + // } + // if (a % 2 !== 0) { + // color.style.backgroundColor = 'lime' + // } + + }) +} +coloring() + + + + +//function to not remove the same team element + +function reddish() { + document.querySelectorAll('.box').forEach(i1 => { + if (i1.style.backgroundColor == 'pink') { + + document.querySelectorAll('.box').forEach(i2 => { + + if (i2.style.backgroundColor == 'green' && i2.innerText.length !== 0) { + + + greenText = i2.innerText + + pinkText = i1.innerText + + pinkColor = ((Array.from(pinkText)).shift()).toString() + greenColor = ((Array.from(greenText)).shift()).toString() + + getId = i2.id + arr = Array.from(getId) + arr.shift() + aside = eval(arr.pop()) + aup = eval(arr.shift()) + a = aside + aup + + if (a % 2 == 0 && pinkColor == greenColor) { + i2.style.backgroundColor = 'rgb(240, 201, 150)' + } + if (a % 2 !== 0 && pinkColor == greenColor) { + i2.style.backgroundColor = 'rgb(100, 75, 43)' + } + + // if (pinkColor == greenColor) { + // i2.style.backgroundColor = 'rgb(253, 60, 60)' + // } + } + }) + } + }) +} + + + + + + + + + + +tog = 1 +whiteCastleChance=true +blackCastleChance=true + +document.querySelectorAll('.box').forEach(item => { + + + + item.addEventListener('click', function () { + + // To delete the opposite element + + if (item.style.backgroundColor == 'green' && item.innerText.length == 0) { + tog = tog + 1 + } + else if (item.style.backgroundColor == 'aqua' && item.innerText.length == 0) { + tog = tog + 1 + } + + else if (item.style.backgroundColor == 'green' && item.innerText.length !== 0) { + + document.querySelectorAll('.box').forEach(i => { + if (i.style.backgroundColor == 'pink') { + pinkId = i.id + pinkText = i.innerText + + document.getElementById(pinkId).innerText = '' + item.innerText = pinkText + coloring() + insertImage() + tog = tog + 1 + + } + }) + } + + + + getId = item.id + arr = Array.from(getId) + arr.shift() + aside = eval(arr.pop()) + arr.push('0') + aup = eval(arr.join('')) + a = aside + aup + + + + // Function to display the available paths for all pieces + + function whosTurn(toggle) { + + // PAWN + + if (item.innerText == `${toggle}pawn`) { + item.style.backgroundColor = 'pink' + + if (tog % 2 !== 0 && aup < 800) { + + if (aup == 200 && document.getElementById(`b${a + 100}`).innerText.length == 0) { + document.getElementById(`b${a + 100}`).style.backgroundColor = 'green' + if (aup == 200 && document.getElementById(`b${a + 200}`).innerText.length == 0) { + document.getElementById(`b${a + 200}`).style.backgroundColor = 'green' + } + } + + if (aup !== 200 && document.getElementById(`b${a + 100}`).innerText.length == 0) { + document.getElementById(`b${a + 100}`).style.backgroundColor = 'green' + } + + if (aside < 8 && document.getElementById(`b${a + 100 + 1}`).innerText.length !== 0) { + document.getElementById(`b${a + 100 + 1}`).style.backgroundColor = 'green' + } + + if (aside > 1 && document.getElementById(`b${a + 100 - 1}`).innerText.length !== 0) { + document.getElementById(`b${a + 100 - 1}`).style.backgroundColor = 'green' + + } + // if (aup == 800) { + // document.getElementById(`b${a}`).innerText = 'Wqueen' + // coloring() + // insertImage() + // } + // if (aside < 8 && document.getElementById(`b${a + 100 + 1}`).innerText.length == 0 && document.getElementById(`b${a + 100}`).innerText.length == 0) { + // document.getElementById(`b${a + 100}`).style.backgroundColor = 'green' + // } + + // if (aside > 1 && document.getElementById(`b${a + 100 - 1}`).innerText.length == 0 && document.getElementById(`b${a + 100}`).innerText.length == 0) { + // document.getElementById(`b${a + 100}`).style.backgroundColor = 'green' + + // } + } + + if (tog % 2 == 0 && aup > 100) { + + if (aup == 700 && document.getElementById(`b${a - 100}`).innerText.length == 0) { + document.getElementById(`b${a - 100}`).style.backgroundColor = 'green' + if (aup == 700 && document.getElementById(`b${a - 200}`).innerText.length == 0) { + document.getElementById(`b${a - 200}`).style.backgroundColor = 'green' + } + } + + if (aup !== 700 && document.getElementById(`b${a - 100}`).innerText.length == 0) { + document.getElementById(`b${a - 100}`).style.backgroundColor = 'green' + } + if (aside < 8 && document.getElementById(`b${a - 100 + 1}`).innerText.length !== 0) { + document.getElementById(`b${a - 100 + 1}`).style.backgroundColor = 'green' + } + if (aside > 1 && document.getElementById(`b${a - 100 - 1}`).innerText.length !== 0) { + document.getElementById(`b${a - 100 - 1}`).style.backgroundColor = 'green' + + } + } + + + } + + // KING + + if (item.innerText == `${toggle}king`) { + + + if (aside < 8) { + document.getElementById(`b${a + 1}`).style.backgroundColor = 'green' + + } + if (aside > 1) { + + document.getElementById(`b${a - 1}`).style.backgroundColor = 'green' + } + if (aup < 800) { + + document.getElementById(`b${a + 100}`).style.backgroundColor = 'green' + } + if (aup > 100) { + + document.getElementById(`b${a - 100}`).style.backgroundColor = 'green' + } + + if (aup > 100 && aside < 8) { + + document.getElementById(`b${a - 100 + 1}`).style.backgroundColor = 'green' + } + if (aup > 100 && aside > 1) { + + document.getElementById(`b${a - 100 - 1}`).style.backgroundColor = 'green' + } + if (aup < 800 && aside < 8) { + + document.getElementById(`b${a + 100 + 1}`).style.backgroundColor = 'green' + } + if (aup < 800 && aside > 1) { + + document.getElementById(`b${a + 100 - 1}`).style.backgroundColor = 'green' + } + + if(whiteCastleChance==true && a==105 && document.getElementById('b106').innerText== '' && document.getElementById('b107').innerText== '' && document.getElementById('b108').innerText== 'Wrook'){ + document.getElementById(`b107`).style.backgroundColor = 'aqua' + + } + if(whiteCastleChance==true && a==105 && document.getElementById('b104').innerText== '' && document.getElementById('b103').innerText== '' && document.getElementById('b102').innerText== '' && document.getElementById('b101').innerText== 'Wrook'){ + document.getElementById(`b103`).style.backgroundColor = 'aqua' + + } + if(blackCastleChance==true && a==805 && document.getElementById('b806').innerText== '' && document.getElementById('b807').innerText== '' && document.getElementById('b808').innerText== 'Brook'){ + document.getElementById(`b807`).style.backgroundColor = 'aqua' + + } + if(blackCastleChance==true && a==805 && document.getElementById('b804').innerText== '' && document.getElementById('b803').innerText== '' && document.getElementById('b802').innerText== '' && document.getElementById('b801').innerText== 'Brook'){ + document.getElementById(`b803`).style.backgroundColor = 'aqua' + + } + + item.style.backgroundColor = 'pink' + + } + + + // ROOK + + if (item.innerText == `${toggle}rook`) { + + for (let i = 1; i < 9; i++) { + + if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText == 0) { + document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green' + } + else if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText !== 0) { + document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green' + break + } + } + + for (let i = 1; i < 9; i++) { + + if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText == 0) { + document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green' + } + else if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText !== 0) { + document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green' + break + } + } + + for (let i = 1; i < 9; i++) { + + if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText == 0) { + document.getElementById(`b${a + i}`).style.backgroundColor = 'green' + } + else if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText !== 0) { + document.getElementById(`b${a + i}`).style.backgroundColor = 'green' + break + } + } + + for (let i = 1; i < 9; i++) { + + if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText == 0) { + document.getElementById(`b${a - i}`).style.backgroundColor = 'green' + } + else if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText !== 0) { + document.getElementById(`b${a - i}`).style.backgroundColor = 'green' + break + } + } + + item.style.backgroundColor = 'pink' + } + + + + // BISHOP + + if (item.innerText == `${toggle}bishop`) { + + + for (let i = 1; i < 9; i++) { + if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length == 0) { + document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green' + } + else if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length !== 0) { + document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green' + break + } + } + + + for (let i = 1; i < 9; i++) { + if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length == 0) { + document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green' + } + else if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length !== 0) { + document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green' + break + } + } + + + for (let i = 1; i < 9; i++) { + if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length == 0) { + document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green' + } + else if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length !== 0) { + document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green' + break + } + + } + + + for (let i = 1; i < 9; i++) { + if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length == 0) { + document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green' + } + else if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length !== 0) { + document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green' + break + } + } + + + + item.style.backgroundColor = 'pink' + + } + + + + // QUEEN + + if (item.innerText == `${toggle}queen`) { + + + for (let i = 1; i < 9; i++) { + + if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText == 0) { + document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green' + } + else if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText !== 0) { + document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green' + break + } + } + + for (let i = 1; i < 9; i++) { + + if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText == 0) { + document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green' + } + else if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText !== 0) { + document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green' + break + } + } + + for (let i = 1; i < 9; i++) { + + if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText == 0) { + document.getElementById(`b${a + i}`).style.backgroundColor = 'green' + } + else if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText !== 0) { + document.getElementById(`b${a + i}`).style.backgroundColor = 'green' + break + } + } + + for (let i = 1; i < 9; i++) { + + if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText == 0) { + document.getElementById(`b${a - i}`).style.backgroundColor = 'green' + } + else if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText !== 0) { + document.getElementById(`b${a - i}`).style.backgroundColor = 'green' + break + } + } + + + + for (let i = 1; i < 9; i++) { + if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length == 0) { + document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green' + } + else if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length !== 0) { + document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green' + break + } + } + + + for (let i = 1; i < 9; i++) { + if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length == 0) { + document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green' + } + else if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length !== 0) { + document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green' + break + } + } + + + for (let i = 1; i < 9; i++) { + if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length == 0) { + document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green' + } + else if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length !== 0) { + document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green' + break + } + + } + + + for (let i = 1; i < 9; i++) { + if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length == 0) { + document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green' + } + else if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length !== 0) { + document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green' + break + } + } + + + + item.style.backgroundColor = 'pink' + + } + + // KNIGHT + + if (item.innerText == `${toggle}knight`) { + + + if (aside < 7 && aup < 800) { + document.getElementById(`b${a + 100 + 2}`).style.backgroundColor = 'green' + } + if (aside < 7 && aup > 200) { + document.getElementById(`b${a - 100 + 2}`).style.backgroundColor = 'green' + } + if (aside < 8 && aup < 700) { + document.getElementById(`b${a + 200 + 1}`).style.backgroundColor = 'green' + } + if (aside > 1 && aup < 700) { + document.getElementById(`b${a + 200 - 1}`).style.backgroundColor = 'green' + } + if (aside > 2 && aup < 800) { + document.getElementById(`b${a - 2 + 100}`).style.backgroundColor = 'green' + } + if (aside > 2 && aup > 100) { + document.getElementById(`b${a - 2 - 100}`).style.backgroundColor = 'green' + } + if (aside < 8 && aup > 200) { + document.getElementById(`b${a - 200 + 1}`).style.backgroundColor = 'green' + } + if (aside > 1 && aup > 200) { + document.getElementById(`b${a - 200 - 1}`).style.backgroundColor = 'green' + } + + item.style.backgroundColor = 'pink' + + } + } + + + // Toggling the turn + + if (tog % 2 !== 0) { + document.getElementById('tog').innerText = "White's Turn" + whosTurn('W') + } + if (tog % 2 == 0) { + document.getElementById('tog').innerText = "Black's Turn" + whosTurn('B') + } + + reddish() + + + + // winning() + + numOfKings = 0 + + + document.querySelectorAll('.box').forEach(win => { + if (win.innerText == 'Wking' || win.innerText == 'Bking') { + numOfKings += 1 + } + + }) + + if (numOfKings == 1) { + setTimeout(() => { + // console.log(`${toggle}`) + if (tog % 2 == 0) { + alert('White Wins !!') + location.reload() + } + else if (tog % 2 !== 0) { + alert('Black Wins !!') + location.reload() + } + }, 100) + } + + + + }) + +}) + + + + + +// Moving the element +document.querySelectorAll('.box').forEach(item => { + + item.addEventListener('click', function () { + + + if (item.style.backgroundColor == 'pink') { + + pinkId = item.id + pinkText = item.innerText + + document.querySelectorAll('.box').forEach(item2 => { + + item2.addEventListener('click', function () { + + getId = item2.id + arr = Array.from(getId) + arr.shift() + aside = eval(arr.pop()) + arr.push('0') + aup = eval(arr.join('')) + a = aside + aup + + if (item2.style.backgroundColor == 'green' && item2.innerText.length == 0) { + + if (pinkText == `Wpawn` && aup == 800) { + + document.getElementById(`b${a}`).innerText = 'Wqueen' + document.getElementById(pinkId).innerText = '' + coloring() + insertImage() + + } + else if (pinkText == `Bpawn` && aup == 100) { + + document.getElementById(`b${a}`).innerText = 'Bqueen' + document.getElementById(pinkId).innerText = '' + coloring() + insertImage() + + } + else { + + + + document.getElementById(pinkId).innerText = '' + item2.innerText = pinkText + coloring() + insertImage() + } + + } + + else if (item2.style.backgroundColor == 'aqua') { + if(item2.id=='b103'){ + document.getElementById('b101').innerText = '' + document.getElementById('b102').innerText = '' + document.getElementById('b103').innerText = 'Wking' + document.getElementById('b104').innerText = 'Wrook' + document.getElementById('b105').innerText = '' + document.getElementById(pinkId).innerText = '' + whiteCastleChance=false + coloring() + insertImage() + + } + else if(item2.id=='b107'){ + document.getElementById('b105').innerText = '' + document.getElementById('b106').innerText = 'Wrook' + document.getElementById('b107').innerText = 'Wking' + document.getElementById('b108').innerText = '' + document.getElementById(pinkId).innerText = '' + whiteCastleChance=false + coloring() + insertImage() + + } + else if(item2.id=='b803'){ + document.getElementById('b801').innerText = '' + document.getElementById('b802').innerText = '' + document.getElementById('b803').innerText = 'Bking' + document.getElementById('b804').innerText = 'Brook' + document.getElementById('b805').innerText = '' + document.getElementById(pinkId).innerText = '' + blackCastleChance=false + coloring() + insertImage() + + } + else if(item2.id=='b807'){ + document.getElementById('b805').innerText = '' + document.getElementById('b806').innerText = 'Brook' + document.getElementById('b807').innerText = 'Bking' + document.getElementById('b808').innerText = '' + document.getElementById(pinkId).innerText = '' + blackCastleChance=false + coloring() + insertImage() + + } + } + + }) + }) + + } + + }) + +}) + + + + + + +// Prvents from selecting multiple elements +z = 0 +document.querySelectorAll('.box').forEach(ee => { + ee.addEventListener('click', function () { + z = z + 1 + if (z % 2 == 0 && ee.style.backgroundColor !== 'green' && ee.style.backgroundColor !== 'aqua') { + coloring() + } + }) +}) diff --git a/CHESS/Wbishop.png b/CHESS/Wbishop.png new file mode 100644 index 00000000..ef377220 Binary files /dev/null and b/CHESS/Wbishop.png differ diff --git a/CHESS/Wking.png b/CHESS/Wking.png new file mode 100644 index 00000000..7d067221 Binary files /dev/null and b/CHESS/Wking.png differ diff --git a/CHESS/Wknight.png b/CHESS/Wknight.png new file mode 100644 index 00000000..8b97b7fb Binary files /dev/null and b/CHESS/Wknight.png differ diff --git a/CHESS/Wpawn.png b/CHESS/Wpawn.png new file mode 100644 index 00000000..eab2a53c Binary files /dev/null and b/CHESS/Wpawn.png differ diff --git a/CHESS/Wqueen.png b/CHESS/Wqueen.png new file mode 100644 index 00000000..2de60cbc Binary files /dev/null and b/CHESS/Wqueen.png differ diff --git a/CHESS/Wrook.png b/CHESS/Wrook.png new file mode 100644 index 00000000..8648b95c Binary files /dev/null and b/CHESS/Wrook.png differ diff --git a/CHESS/index.html b/CHESS/index.html new file mode 100644 index 00000000..93b89da8 --- /dev/null +++ b/CHESS/index.html @@ -0,0 +1,116 @@ + + + + + + + + + + + Chess + + + + + +

Chess

+

White's Turn

+ + + + + + + + + + \ No newline at end of file