I'm doing a chess game and I need do movement bishop but I can't. We choose the figures positions and it should work in case of any layout. Here is my code.
This is JS code. Here I create board, give each box id and add white bishop which position choose I by prompt. Now I can't continue. I must find the step of the bishop it's so hard, I try different ways but it didn't work.
Here is how I code my board. Bishops can move only diagonally. Additionally here is html code, I give some styles for board numbers and letters.
var ChessArray = ["k" , "A8", "A7", "A6", "A5" , "A4" , "A3" , "A2" , "A1",
"B8", "B7", "B6", "B5" , "B4" , "B3" , "B2" , "B1",
"C8", "C7", "C6", "C5" , "C4" , "C3" , "C2" , "C1",
"D8", "D7", "D6", "D5" , "D4" , "D3" , "D2" , "D1",
"E8", "E7", "E6", "E5" , "E4" , "E3" , "E2" , "E1" ,
"F8", "F7", "F6", "F5" , "F4" , "F3" , "F2" , "F1",
"G8", "G7", "G6", "G5" , "G4" , "G3" , "G2" , "G1",
"H8", "H7", "H6", "H5" , "H4" , "H3" , "H2" , "H1"]
// create board
var board = document.getElementById("mainChessBoard");
for (var i=0; i< ChessArray.length-1; i++){
board.appendChild(document.createElement("div")).style.backgroundColor = parseInt((i / 8) + i) % 2 == 0 ? '#ababab' : 'white';
}
// give id
for (var i=0; i<8; i++){
board.children[i].setAttribute("id" , ChessArray[8*i+1]);
board.children[i+8].setAttribute("id" , ChessArray[8*i+2]);
board.children[i+16].setAttribute("id" , ChessArray[8*i+3]);
board.children[i+24].setAttribute("id" , ChessArray[8*i+4]);
board.children[i+32].setAttribute("id" , ChessArray[8*i+5]);
board.children[i+40].setAttribute("id" , ChessArray[8*i+6]);
board.children[i+48].setAttribute("id" , ChessArray[8*i+7]);
board.children[i+56].setAttribute("id" , ChessArray[8*i+8]);
}
// // bishop
var white_bishop = prompt("please enter position of white bishop",);
function Function_for_bishop() {
var t=0;
for ( i=0; i< ChessArray.length; i++){
if ( ChessArray[i] == white_bishop ){
t += 1;
}
}
if ((t == 0)){
prompt("FALSE",);
}
else {
document.getElementById(white_bishop).innerHTML = "♗" ;
document.getElementById(white_bishop).style.fontSize = "80px";
alert("Bishop")
}
}
Function_for_bishop()<!Doctype html>
<html>
<head>
<meta Charset="UTF-8">
<style>
#mainChessBoard{
width:640px;
height:640px;
border:1px solid black;
margin-bottom: 0;
}
div{
width:80px;
height:80px;
float:left;
}
.letter{
width:660px;
display: block;
margin-bottom: 10px
}
#number{
font-size: 37px;
position: relative;
left: 655px;
bottom: 747px
}
.letter>p{
display: inline;
font-size: 80px;
margin-right: 24px
}
.last {
margin-right: 0
}
.numbers {
height: 640px;
width: 640px;
}
.numbers p {
display: block
}
</style>
</head>
<body>
<div>
<div id="mainChessBoard">
</div>
<div class = "letter">
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p class="last">H</p>
</div>
<div id="number">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</div>
</div>
<script src="script.js"> </script>
</body>
</html>