Moving chess pieces in native javascript

2018-06-30 07:52:46

I'm having some problems with my assignment, which was to make chess pieces move freely across the board without the use of ids in native javascript. I have managed to set them on board and have also tried with getting coordinates from clicking on a piece, then getting coordinates from clicking somewhere on board and assigning the chosen piece those newly acquired coordinates, but nothing seems to work correctly.
I'd really appreciate some help :)

<head>
<meta charset="utf-8">
<style>
body 
    {
    padding: 20px;
    }
h1
    {
    text-align: center
    }
table 
    {
    margin-left:auto;
    margin-right:auto;
    border: 4px solid black;
    border-collapse: collapse;
    }
td
    {
    width: 40px; 
    height: 40px;
    text-align: center;
    }
.up
    {
    border-top-style: hidden;
    border-left-style: hidden;
    border-right-style: hidden;
    border-bottom-style: solid;
    background-color: white;
    font-weight: bold
    }
.down
    {
    border-top-style: solid;
    border-left-style: hidden;
    border-right-style: hidden;
    border-bottom-style: hidden;
    background-color: white;
    font-weight: bold
    }
.left
    {
    border-top-style: hidden;
    border-left-style: hidden;
    border-right-style: solid;
    border-bottom-style: hidden;
    background-color: white;
    font-weight: bold
    }
.right
    {
    border-top-style: hidden;
    border-left-style: solid;
    border-right-style: hidden;
    border-bottom-style: hidden;
    background-color: white;
    font-weight: bold
    }
.gray
    {
    background-color: gray;
    }
.white
    {
    background-color: white;
    }
</style>
</head>
<body>
<script> // chessboard
document.write("<h1>Game</h1>");
document.write("<table><tr class=up><td></td>");
for (var k=0; k<=7; k++){ //letters on top, 97 is a, 104 is h
    document.write("<td>" + String.fromCharCode(k+97) + "</td>");
}
document.write("</tr>");
for (var j=8; j>0; j--){ //numbers dropping on sides
    document.write("<tr onclick='indexRow(this)'><td class=left>" + j + "</td>");
    if((j%2)==0){
        for (var i=0; i<8; i++){
            if((i%2)==0){
                document.write('<td onclick="indexCell(this)" class=white></td>'); //grab index
            } else{
                document.write('<td onclick="indexCell(this)" class=gray></td>'); //grab index
            };
        }
    } else{
        for (var i=0; i<8; i++){
            if((i%2)==0){
                document.write('<td onclick="indexCell(this)" class=gray></td>'); //grab index
            } else{
                document.write('<td onclick="indexCell(this)" class=white></td>'); //grab index
            };
        }
    };
    document.write("<td class=right>" + j + "</td>");
}
document.write("<tr class=down><td></td>");
for (var k=0; k<=7; k++){ //letters on top,97 is a, 104 is h
    document.write("<td>" + String.fromCharCode(k+97) + "</td>");
}
document.write("</tr></table>");

//pieces
var pieces=new Array( //pieces
                new Array(" "," "," "," "," "," "," "," "," "),
                new Array(" ","&#9814"," "," ","&#9812","&#9813","&#9815","&#9816","&#9814"),
                new Array(" ","&#9817","&#9817","&#9817"," "," ","&#9817","&#9817","&#9817"),
                new Array(" "," "," "," "," ","&#9817"," "," "," "),
                new Array(" "," "," "," ","&#9817"," "," "," "," "),
                new Array(" "," "," "," ","&#9816"," "," ","&#9815"," "),
                new Array(" "," "," ","&#9822"," "," "," "," "," "),
                new Array(" ","&#9823","&#9823","&#9823","&#9822","&#9823","&#9823","&#9823","&#9823"),
                new Array(" ","&#9820"," ","&#9821","&#9818","&#9819","&#9821"," ","&#9820")
            );

//sets up the board
function setUp(){
    for (i = 1; i <=8; i++){
        for (j = 1; j <=8; j++){
            document.getElementsByTagName('tr')[j].getElementsByTagName('td')[i].innerHTML = pieces[j][i];
        }
    }
}
setUp();
//attempts with making things move
var clickedon = false;
var save_x = 0;
var save_y = 0;
var piece = 0;
var _x = 0;
var _y = 0;

//gets cell index
function indexCell(x)
{
//alert("Cell index is: " + x.cellIndex);
_x = x.cellIndex;
if(clickedon == false)
{
if(pieces[_x][_y] != " ")
{  
    figura = pieces[_x][_y];
    save_x = _x;
    save_y = _y;
    clickedon = true;
    alert(piece)    
}  
}
else
{
if(pieces[_x][_y] == " ")
{
    pieces[save_x][save_y] = " ";
    pieces[_x][_y] = piece;
    setUp();
    clickedon = false
}       
}
}
//grabs row index
function indexRow(y){
//alert("Row index is: " + x.rowIndex);
_y = y.rowIndex;
}

</script>
</body>

Edit: I've now posted the version with my attempts at making pieces move and with numbers and letters around.

What you need to do is set an onclick event for each of the table cells, and have several global variables to hold the state of the chess board.

So here is what I would suggest trying:

var state = false //false if no piece has been selected
var currentPiece;
var currentCell;

var cells = document.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
   cells[i].onclick = function(){
       getCell(this);
   };
}

function getCell(that) {
    if(!state) { //this means if the state is false (i.e. no piece selected
        state = true; //piece has been selected
        currentPiece = that.innerHTML; //get the current piece selected
        currentCell = that; //get the current cell selection
    }
    else { //else, you are moving a piece
        that.innerHTML = currentPiece; //Set the selected space to the piece that was grabbed
        currentCell.innerHTML = ""; //remove the piece from its old location
        state = false; //piece has been placed, so set state back to false
    }
}

Keep in mind this is just a rough layout of how I would handle this. I didn't take into account type of pieces or certain exceptions or anything like that.

链接地址: http://www.djcxy.com/p/84622.html

上一篇: 面向对象与效率

下一篇: 在原生javascript中移动棋子