var whitepieces = 12; var blackpieces = 12; var turncount =1; var winner = false; var canEat = false; var trapped = true; var trappedpieces=0; var NowCellPick; var previosCellPick = document.getElementById("11"); var nowOption1 = document.getElementById("11"); var nowOption2 = document.getElementById("11"); var nowOption3 = document.getElementById("11"); var nowOption4 = document.getElementById("11"); var CellToJumpTo1 = document.getElementById("11"); var CellToJumpTo2 = document.getElementById("11"); var CellToJumpTo3 = document.getElementById("11"); var CellToJumpTo4 = document.getElementById("11"); var eatenPeice1 = document.getElementById("11"); var eatenPeice2 = document.getElementById("11"); var eatenPeice3 = document.getElementById("11"); var eatenPeice4 = document.getElementById("11"); var eps = [eatenPeice1,eatenPeice2,eatenPeice3,eatenPeice4]; var ctjt = [CellToJumpTo1,CellToJumpTo2,CellToJumpTo3,CellToJumpTo4]; var numberOfPieceEaten1=0; var numberOfPieceEaten2=0; var numberOfPieceEaten3=0; var numberOfPieceEaten4=0; var cellId =""; var pieceId=""; var targetCell=""; var number1 = Number(cellId); var moveAgain= 0; function drag(ev,cellid,pieceid){ ev.dataTransfer.setData("Text",ev.target.id); clicked(cellid,pieceid); } function allowdrop(ev,cellid){ var cell = document.getElementById(cellid); if(cell.style.backgroundColor==="lightblue") {ev.preventDefault();} } function drop(ev,targetcell){ debugger; ev.preventDefault(); moveTo(targetcell); settingpiece(event,targetcell) } function settingpiece(ev,targetcell) { var data =ev.dataTransfer.getData("text"); var cellMoved = document.getElementById(data); var cellAfterMoveTo = document.getElementById(targetcell) if(cellAfterMoveTo.className==="white BP king"||cellAfterMoveTo.className==="white WP king") { if(turncount%2===0) { cellMoved.setAttribute("class","Wking"); } else { cellMoved.setAttribute("class","Bking"); } } cellMoved.setAttribute("ondragstart","drag(event,"+targetcell+")"); cellMoved.setAttribute("onclick","clicked("+targetcell+")"); ev.target.appendChild(document.getElementById(data)); clearColors(); if(moveAgain===0) { turncount++; playerAlert(); } if(moveAgain!==0) { clicked(number1+""); } checkwinner(); } function playerAlert() { var playerText = document.getElementById("playerText") if(turncount%2===0) { playerText.innerHTML="White player its your turn"; } else {playerText.innerHTML="Black player its your turn";} } function checkwinner() { if(whitepieces===0) { var playerText = document.getElementById("playerText"); playerText.innerHTML="Black player wins!!!"; } if(blackpieces===0) { var playerText = document.getElementById("playerText"); playerText.innerHTML="White player wins!!!"; } if(whitepieces<4||blackpieces<4) { trappedPieces =0; var tens =10; for(tens;tens<90&&trapped;tens+=10) { if(tens%20===10) { for(var ones=1;ones<9&&trapped;ones+=2) { var number = tens+ones; var cell = document.getElementById(number+""); if(((turncount%2===0&&cell.className==="white WP")||(turncount%2===0&&cell.className==="white WP king"))||((turncount%2===1&&cell.className==="white BP")||(turncount%2===1&&cell.className==="white BP king"))&&trapped) { checkTrapped(number,cell); if(trapped) {trappedPieces++;} } } } else { for(var ones=2;ones<9&&trapped;ones+=2) { var number = tens+ones; var cell = document.getElementById(number+""); if(((turncount%2===0&&cell.className==="white WP")||(turncount%2===0&&cell.className==="white WP king"))||((turncount%2===1&&cell.className==="white BP")||(turncount%2===1&&cell.className==="white BP king"))&&trapped) { checkTrapped(number,cell); if(trapped) {trappedPieces++; } } } } } trapped=true; if(turncount%2===0&&trappedPieces===whitepieces) { var playerText = document.getElementById("playerText"); playerText.innerHTML="Black player wins!!!"; winner=true; } if(turncount%2===1&&trappedPieces===blackpieces) { var playerText = document.getElementById("playerText"); playerText.innerHTML="White player wins!!!"; winner=true; } } } function checkTrapped(number,cell) { if(turncount%2===0||cell.className==="white BP king") { OP1 =((number+9)+""); OP2 =((number+11)+""); OP3 =((number+18)+""); OP4 =((number+22)+""); var OPs=[OP1,OP2,OP3,OP4]; for(var i=0 ; i<4 && trapped ; i++) { if((Number(OPs[i]))%10===0||(Number(OPs[i]))%10===9||(Number(OPs[i]))<10||(Number(OPs[i]))>90) {continue;} var cellOp = document.getElementById(OPs[i]); if(cellOp.className!=="white empty") {trapped=true} else {trapped=false} } } if(turncount%2===1||cell.className==="white WP king") { OP1 =((number-9)+""); OP2 =((number-11)+""); OP3 =((number-18)+""); OP4 =((number-22)+""); var OPs=[OP1,OP2,OP3,OP4]; for(var i=0 ; i<4 && trapped ; i++) { if(Number(OPs[i])%10===0||Number(OPs[i])%10===9||Number(OPs[i])<10||Number(OPs[i])>90) {continue;} var cellOp = document.getElementById(OPs[i]); if(cellOp.className!=="white empty") {trapped=true} else {trapped=false} } } } function clearColors() { var tens =10; for(tens;tens<90;tens+=10) { if(tens%20===10) { for(var ones=1;ones<9;ones+=2) { var number = tens+ones; var snum = number+""; var cell = document.getElementById(snum); cell.style.backgroundColor="lightgray"; } } else { for(var ones=2;ones<9;ones+=2) { var number = tens+ones; var snum = number+""; var cell = document.getElementById(snum); cell.style.backgroundColor="lightgray"; } } } } function clicked(cellid,pieceid) { //debugger; clearColors(); cellId = cellid; pieceId=pieceid; NowCellPick = document.getElementById(cellid); if(turncount%2===0 && NowCellPick.className==="white WP"||turncount%2===0 && NowCellPick.className==="white WP king") { NowCellPick.style.backgroundColor="red"; if(NowCellPick.className!=="white WP king") {checkOptions(cellid);} else {checkOptionsKing(cellid);} } if(turncount%2===1 && NowCellPick.className==="white BP"||turncount%2===1 && NowCellPick.className==="white BP king") { NowCellPick.style.backgroundColor="red"; if(NowCellPick.className!=="white BP king") {checkOptions(cellid);} else {checkOptionsKing(cellid);} } } function checkOptionsKing(cellid) { var cellnumber = Number(cellid); var num=cellnumber%10; if(moveAgain===0 || (Number(cellId)===number1&&moveAgain!==0)) {checkCanKingEat(cellnumber);} if(moveAgain===0&&canEat===false) { var optionNumber1 = cellnumber+9; var optionNumber2 = cellnumber+11; var optionNumber3 = cellnumber-9; var optionNumber4 = cellnumber-11; var OPs=[optionNumber1,optionNumber2,optionNumber3,optionNumber4]; if(optionNumber3%10===0||optionNumber3%10===9) {optionNumber3=optionNumber4} if(optionNumber4%10===0||optionNumber4%10===9) {optionNumber4=optionNumber3} for(var i =0;i<4;i++) { if(OPs[i]%10!==0 && OPs[i]%10!==9 && OPs[i]<90 && OPs[i]>10) { nowOption1=document.getElementById(OPs[i]+""); if(nowOption1.className==="white empty") {nowOption1.style.backgroundColor="lightblue";} } } } } function checkCanKingEat(cellnumber) { canEat=false; numberOfPieceEaten1=cellnumber+9; numberOfPieceEaten2=cellnumber+11; numberOfPieceEaten3=cellnumber-9; numberOfPieceEaten4=cellnumber-11; var numberOfCellToJumpTo1= cellnumber+18; var numberOfCellToJumpTo2= cellnumber+22; var numberOfCellToJumpTo3= cellnumber-18; var numberOfCellToJumpTo4= cellnumber-22; var PEs = [numberOfPieceEaten1,numberOfPieceEaten2,numberOfPieceEaten3,numberOfPieceEaten4]; var CJs = [numberOfCellToJumpTo1,numberOfCellToJumpTo2,numberOfCellToJumpTo3,numberOfCellToJumpTo4]; if(turncount%2===0) { for(var i = 0; i<4; i++) { if(CJs[i]%10!==0&&CJs[i]%10!==9&&CJs[i]>10&&CJs[i]<90) { ctjt[i]=document.getElementById(CJs[i]+""); eps[i]=document.getElementById(PEs[i]+""); if(eps[i].className==="white BP"&& ctjt[i].className==="white empty"||eps[i].className==="white BP king" && ctjt[i].className==="white empty") { ctjt[i].style.backgroundColor="lightblue"; canEat =true; } } } } else { for(var i = 0; i<4 ;i++) { if(CJs[i]%10!==0&&CJs[i]%10!==9&&CJs[i]>10&&CJs[i]<90) { ctjt[i]=document.getElementById(CJs[i]+""); eps[i]=document.getElementById(PEs[i]+""); if(eps[i].className==="white WP"&& ctjt[i].className==="white empty"||eps[i].className==="white WP king" && ctjt[i].className==="white empty") { ctjt[i].style.backgroundColor="lightblue"; canEat =true; } } } } } function checkCanEat(cellnumber) { canEat=false; var cellnumber=cellnumber; var num = cellnumber%10; if(turncount%2===0&&cellnumber<70) { if(cellnumber%10===1) { numberOfPieceEaten1 = cellnumber+11; var numberCellToJumpTo = cellnumber+22; eps[0] = document.getElementById(numberOfPieceEaten1+""); ctjt[0] = document.getElementById(numberCellToJumpTo+""); if(eps[0].className==="white BP"&& ctjt[0].className==="white empty"||eps[0].className==="white BP king" && ctjt[0].className==="white empty") { ctjt[0].style.backgroundColor="lightblue"; canEat =true; } } if(cellnumber%10===8) { numberOfPieceEaten1 = cellnumber+9; var numberCellToJumpTo = cellnumber+18; eps[0] = document.getElementById(numberOfPieceEaten1+""); ctjt[0] = document.getElementById(numberCellToJumpTo+""); if(eps[0].className==="white BP"&& ctjt[0].className==="white empty"||eps[0].className==="white BP king" && ctjt[0].className==="white empty") { ctjt[0].style.backgroundColor="lightblue"; canEat =true; } } } if(turncount%2===1 && cellnumber>30) { if(cellnumber%10===1) { numberOfPieceEaten1 = cellnumber-9; var numberCellToJumpTo = cellnumber-18; eps[0] = document.getElementById(numberOfPieceEaten1+""); ctjt[0] = document.getElementById(numberCellToJumpTo+""); if(eps[0].className==="white WP"&& ctjt[0].className==="white empty"||eps[0].className==="white WP king" && ctjt[0].className==="white empty") { ctjt[0].style.backgroundColor="lightblue"; canEat =true; } } if(cellnumber%10===8) { numberOfPieceEaten1 = cellnumber-11; var numberCellToJumpTo = cellnumber-22; eps[0] = document.getElementById(numberOfPieceEaten1+""); ctjt[0] = document.getElementById(numberCellToJumpTo+""); if(eps[0].className==="white WP"&& ctjt[0].className==="white empty"||eps[0].className==="white WP king" && ctjt[0].className==="white empty") { ctjt[0].style.backgroundColor="lightblue"; canEat =true; } } } if(turncount%2===0 && cellnumber<70 || turncount%2===1 && cellnumber>30) { if(num > 1 && num < 8 ) { if(turncount%2===0) { numberOfPieceEaten1=cellnumber+9; numberOfPieceEaten2=cellnumber+11; var numberOfCellToJumpTo1= cellnumber+18; var numberOfCellToJumpTo2= cellnumber+22; } else { numberOfPieceEaten1=cellnumber-9; numberOfPieceEaten2=cellnumber-11; var numberOfCellToJumpTo1= cellnumber-18; var numberOfCellToJumpTo2= cellnumber-22; } if(numberOfCellToJumpTo1%10!==9 && numberOfCellToJumpTo1%10!==0) {ctjt[0] = document.getElementById(numberOfCellToJumpTo1+"");} if(numberOfCellToJumpTo2%10!==9 && numberOfCellToJumpTo2%10!==0) {ctjt[1] = document.getElementById(numberOfCellToJumpTo2+"");} eps[0] = document.getElementById(numberOfPieceEaten1+""); eps[1] = document.getElementById(numberOfPieceEaten2+""); if(turncount%2===0) { if(eps[0].className==="white BP" && ctjt[0].className==="white empty"||eps[0].className==="white BP king" && ctjt[0].className==="white empty") { ctjt[0].style.backgroundColor="lightblue"; canEat =true; } if(eps[1].className==="white BP"&& ctjt[1].className==="white empty" ||eps[1].className==="white BP king" && ctjt[1].className==="white empty") { ctjt[1].style.backgroundColor="lightblue"; canEat =true; } } if(turncount%2===1) { if(eps[0].className==="white WP"&& ctjt[0].className==="white empty" ||eps[0].className==="white WP king" && ctjt[0].className==="white empty") { ctjt[0].style.backgroundColor="lightblue"; canEat =true; } if(eps[1].className==="white WP"&& ctjt[1].className==="white empty" ||eps[1].className==="white WP king" && ctjt[1].className==="white empty") { ctjt[1].style.backgroundColor="lightblue"; canEat =true; } } } } } function checkOptions(cellpicked) { //alert("checkOptins"); var cellnumber = Number(cellpicked); var num=cellnumber%10; if(moveAgain===0||(Number(cellId)===number1 && moveAgain!==0)) { checkCanEat(cellnumber); } if(moveAgain===0&&canEat===false) { if(turncount%2===0) { if(cellnumber%10===1) { var optionNumber1 = cellnumber+11; var sOption1 = optionNumber1+""; nowOption1=document.getElementById(sOption1); if(nowOption1.className=="white empty") { nowOption1.style.backgroundColor="lightblue"; } } if(cellnumber%10===8) { var optionNumber1 = cellnumber+9; var sOption1 = optionNumber1+""; nowOption1=document.getElementById(sOption1); if(nowOption1.className=="white empty") { nowOption1.style.backgroundColor="lightblue"; } } } if(turncount%2===1) { if(cellnumber%10===1) { var optionNumber1 = cellnumber-9; var sOption1 = optionNumber1+""; nowOption1=document.getElementById(sOption1); if(nowOption1.className=="white empty") { nowOption1.style.backgroundColor="lightblue"; } } if(cellnumber%10===8) { var optionNumber1 = cellnumber-11; var sOption1 = optionNumber1+""; nowOption1=document.getElementById(sOption1); if(nowOption1.className=="white empty") { nowOption1.style.backgroundColor="lightblue"; } } } if(num > 1 && num < 8) { if(turncount%2===0) { var optionNumber1 = cellnumber+9; var optionNumber2 = cellnumber+11; } else { var optionNumber1 = cellnumber - 9; var optionNumber2 = cellnumber - 11; } var soption1 = optionNumber1+""; var soption2 = optionNumber2+""; nowOption1 = document.getElementById(soption1); nowOption2 = document.getElementById(soption2); if(nowOption1.className=="white empty") { nowOption1.style.backgroundColor="lightblue"; } if(nowOption2.className=="white empty") { nowOption2.style.backgroundColor="lightblue"; } } } } function beforeMoveTo(target) { try{ var wantedCell = document.getElementById(target); if(wantedCell.style.backgroundColor==="lightblue") { number1=Number(target); var currentCell = document.getElementById(cellId); var nodeToAdd = document.createElement("div"); setNode(nodeToAdd,currentCell); nodeToAdd.setAttribute("id",pieceId); nodeToAdd.setAttribute("onclick","clicked("+target+",pieceId)"); nodeToAdd.setAttribute("ondragstart","drag(event,"+target+","+pieceId+")"); nodeToAdd.setAttribute("draggable","true"); wantedCell.appendChild(nodeToAdd); var nodeToRemove = currentCell.firstChild; currentCell.removeChild(nodeToRemove); moveTo(target); if(moveAgain===0) { turncount++; playerAlert(); } if(moveAgain!==0) { clicked(number1+""); } checkwinner(); } }catch(err){console.log(err);} } function moveTo(target) { var wantedCell = document.getElementById(target); if(wantedCell.style.backgroundColor==="lightblue") { number1=Number(target); var currentCell = document.getElementById(cellId); if(turncount%2===0) { if(Number(target)>80||currentCell.className==="white WP king") {wantedCell.setAttribute("class","white WP king");} else {wantedCell.setAttribute("class","white WP");} } if(turncount%2===1) { if(Number(target)<20||currentCell.className==="white BP king") {wantedCell.setAttribute("class","white BP king");} else {wantedCell.setAttribute("class","white BP");} } currentCell.removeAttribute("class"); currentCell.setAttribute("class","white empty") var xpiece; var xpieceNumber=0; if(wantedCell===ctjt[0]) { xpiece=eps[0]; xpieceNumber=numberOfPieceEaten1; } if(wantedCell===ctjt[1]) { xpiece=eps[1]; xpieceNumber=numberOfPieceEaten2; } if(wantedCell===ctjt[2]) { xpiece=eps[2]; xpieceNumber=numberOfPieceEaten3; } if(wantedCell===ctjt[3]) { xpiece=eps[3]; xpieceNumber=numberOfPieceEaten4; } if(canEat && (wantedCell===ctjt[0]||wantedCell===ctjt[1]||wantedCell===ctjt[2]||wantedCell===ctjt[3])) { var eatenPeice = xpiece.firstChild; xpiece.removeChild(eatenPeice); xpiece.removeAttribute("class"); xpiece.setAttribute("class","white empty"); if(turncount%2===0) { blackpieces--; } else { whitepieces--; } if(wantedCell.className==="white WP king"||wantedCell.className==="white BP king") {checkCanKingEat(number1);} else {checkCanEat(number1);} if(canEat) { clearColors(); moveAgain=1; } else { moveAgain=0; } } } clearColors(); ctjt[0]=""; ctjt[1]=""; ctjt[2]=""; ctjt[3]=""; } function setNode(nodeToAdd,currentCell) { if(turncount%2===0&& number1>80 || turncount%2===0 && currentCell.className==="white WP king") { nodeToAdd.setAttribute("class","Wking"); } if(turncount%2===1 && number1<20 || turncount%2===1 && currentCell.className==="white BP king") { nodeToAdd.setAttribute("class","Bking"); } if(turncount%2=== 1&&number1<80&&number1>20 && currentCell.className!=="white BP king") { nodeToAdd.setAttribute("class","blackchecker"); } if(turncount%2=== 0&&number1<80&&number1>20 && currentCell.className!=="white WP king") { nodeToAdd.setAttribute("class","whitechecker"); } }

checkers javaScript click and drag and drop