I am making a chess game with html and javascript. The fact is that only the
black and white pawn pieces work for me, and I want to advance, starting with the
white rook. And the case is that it does not work for me, any suggestion?Hello, I am
making a chess game with html and javascript. The fact is that only the black and
white pawn pieces work for me, and I want to advance, starting with the white rook.
And the case is that it does not work for me, any suggestion?
-------------------------------
var movementPrevious=false;
var boxPrevious;
function movePiece(box1,box2){
var temp;
if(document.getElementById(box2).textContent=="."){
temp=document.getElementById(box2).textContent;
document.getElementById(box2).textContent=document.getElementById(box1).textContent;
document.getElementById(box1).textContent=temp;
}
}
function movementWhitePawn(box){
var row=box.substring(1,3);
var col=box.substring(0,1);
var novabox;
novabox=col+(parseInt(row)+1);
if(document.getElementById(novabox).textContent=="")
document.getElementById(novabox).textContent=".";
if(parseInt(row)==2){
novabox=col+(parseInt(row)+2);
if(document.getElementById(novabox).textContent=="")
document.getElementById(novabox).textContent=".";
}
}
function movementWhiteTower(box){
var row=box.substring(1,3);
var col=box.substring(0,1);
var novabox;
novabox=col+(parseInt(row)+2);
if(document.getElementById(novabox).textContent=="")
document.getElementById(novabox).textContent=".";
if(parseInt(row)==2){
novabox=col+(parseInt(row)+3);
if(document.getElementById(novabox).textContent=="")
document.getElementById(novabox).textContent=".";
}
}
function movementBlackPawn(box){
var row=box.substring(1,4);
var col=box.substring(0,1);
var novabox;
novabox=col+(parseInt(row)-1);
if(document.getElementById(novabox).textContent=="")
document.getElementById(novabox).textContent=".";
if(parseInt(row)==7){
novabox=col+(parseInt(row)-2);
if(document.getElementById(novabox).textContent=="")
document.getElementById(novabox).textContent=".";
}
}
function cleaningCounter(){
var resume_table = document.getElementById("board");
for (var i = 0, row; row = resume_table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
if(row.cells[j].textContent==".")
row.cells[j].textContent="";
}
}
}
function movement(box) {
if(movementPrevious ==false){
switch(document.getElementById(box).textContent){
case"♙":
movementWhitePawn(box);
boxPrevious=box;
movementPrevious =true;
break;
case "♟":
movementBlackPawn(box);
boxPrevious=box;
movementPrevious =true;
break;
case "♖":
movementWhiteTower(box);
boxPrevious=box;
movementPrevious =true;
break;
case "♜":
boxPrevious=box;
movementPrevious =true;
break;
case "♗":
boxPrevious=box;
movementPrevious =true;
break;
case "♝":
boxPrevious=box;
movementPrevious =true;
break;
case "♘":
boxPrevious=box;
movementPrevious =true;
break;
case "♞":
boxPrevious=box;
movementPrevious =true;
break;
case "♕":
boxPrevious=box;
movementPrevious =true;
break;
case "♛":
boxPrevious=box;
movementPrevious =true;
break;
case "♔":
boxPrevious=box;
movementPrevious =true;
break;
case "♚":
boxPrevious=box;
movementPrevious =true;
break;
case "":
boxPrevious=box;
movementPrevious =true;
}
}
else {
movePiece(boxPrevious,box);
movementPrevious =false;
cleaningCounter();
boxPrevious="";
}
}<!DOCTYPE html>
<html>
<head>
<title> Chess </title>
<meta charset="UTF-8">
<script src="chess.js"></script>
<style>
.chess-board { border-spacing: 0; border-collapse: collapse; }
.chess-board th { padding: .5em; }
.chess-board th + th { border-bottom: 1px solid #000; }
.chess-board th:first-child,
.chess-board td:last-child { border-right: 1px solid #000; }
.chess-board tr:last-child td { border-bottom: 1px solid; }
.chess-board th:empty { border: none; }
.chess-board td { width: 2.5em; height: 2.5em; text-align: center; font-size: 32px; line-height: 0;}
.chess-board .light { background: #ff9d00; }
.chess-board .dark { background: #ff0000; }
</style>
</head>
<body>
<table>
<tr>
<td>
<h2>Chess</h2>
<table class="chess-board" id="board">
<tbody>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
</tr>
<tr>
<th>8</th>
<td id="18" class="light" onclick="movement('18');">♜</td>
<td id="28" class="dark" onclick="movement('28');">♞</td>
<td id="38" class="light" onclick="movement('38');">♝</td>
<td id="48" class="dark" onclick="movement('48');">♛</td>
<td id="58" class="light" onclick="movement('58');">♚</td>
<td id="68" class="dark" onclick="movement('68');">♝</td>
<td id="78" class="light" onclick="movement('78');">♞</td>
<td id="88" class="dark" onclick="movement('88');">♜</td>
</tr>
<tr>
<th>7</th>
<td id="17" class="dark" onclick="movement('17');">♟</td>
<td id="27" class="light" onclick="movement('27');">♟</td>
<td id="37" class="dark" onclick="movement('37');">♟</td>
<td id="47" class="light" onclick="movement('47');">♟</td>
<td id="57" class="dark" onclick="movement('57');">♟</td>
<td id="67" class="light" onclick="movement('67');">♟</td>
<td id="77" class="dark" onclick="movement('77');">♟</td>
<td id="87" class="light" onclick="movement('87');">♟</td>
</tr>
<tr>
<th>6</th>
<td id="16" class="light" onclick="movement('16');"></td>
<td id="26" class="dark" onclick="movement('26');"></td>
<td id="36" class="light" onclick="movement('36');"></td>
<td id="46" class="dark" onclick="movement('46');"></td>
<td id="56" class="light" onclick="movement('56');"></td>
<td id="66" class="dark" onclick="movement('66');"></td>
<td id="76" class="light" onclick="movement('76');"></td>
<td id="86" class="dark" onclick="movement('86');"></td>
</tr>
<tr>
<th>5</th>
<td id="15" class="dark" onclick="movement('15');"></td>
<td id="25" class="light" onclick="movement('25');"></td>
<td id="35" class="dark" onclick="movement('35');"></td>
<td id="45" class="light" onclick="movement('45');"></td>
<td id="55" class="dark" onclick="movement('55');"></td>
<td id="65" class="light" onclick="movement('65');"></td>
<td id="75" class="dark" onclick="movement('75');"></td>
<td id="85" class="light" onclick="movement('85');"></td>
</tr>
<tr>
<th>4</th>
<td id="14" class="light" onclick="movement('14');"></td>
<td id="24" class="dark" onclick="movement('24');"></td>
<td id="34" class="light" onclick="movement('34');"></td>
<td id="44" class="dark" onclick="movement('44');">♖</td>
<td id="54" class="light" onclick="movement('54');"></td>
<td id="64" class="dark" onclick="movement('64');"></td>
<td id="74" class="light" onclick="movement('74');"></td>
<td id="75" class="dark" onclick="movement('75');"></td>
</tr>
<tr>
<th>3</th>
<td id="13" class="dark" onclick="movement('13');"></td>
<td id="23" class="light" onclick="movement('23');"></td>
<td id="33" class="dark" onclick="movement('33');"></td>
<td id="43" class="light" onclick="movement('43');"></td>
<td id="53" class="dark" onclick="movement('53');"></td>
<td id="63" class="light" onclick="movement('63');"></td>
<td id="73" class="dark" onclick="movement('73');"></td>
<td id="83" class="light" onclick="movement('83');"></td>
</tr>
<tr>
<th>2</th>
<td id="12" class="light" onclick="movement('12');">♙</td>
<td id="22" class="dark" onclick="movement('22');">♙</td>
<td id="32" class="light" onclick="movement('32');">♙</td>
<td id="42" class="dark" onclick="movement('42');">♙</td>
<td id="52" class="light" onclick="movement('52');">♙</td>
<td id="62" class="dark" onclick="movement('62');">♙</td>
<td id="72" class="light" onclick="movement('72');">♙</td>
<td id="82" class="dark" onclick="movement('82');">♙</td>
</tr>
<tr>
<th>1</th>
<td id="11" class="dark" onclick="movement('11');"></td>
<td id="21" class="light" onclick="movement('21');">♘</td>
<td id="31" class="dark" onclick="movement('31');">♗</td>
<td id="41" class="light" onclick="movement('41');">♕</td>
<td id="51" class="dark" onclick="movement('51');">♔</td>
<td id="61" class="light" onclick="movement('61');">♗</td>
<td id="71" class="dark" onclick="movement('71');">♘</td>
<td id="81" class="light" onclick="movement('81');">♖</td>
</tr>
</tbody>
</table>
</td>
</body>
</html>