Using javascript to make the chess moves

For this tutorial we are going to write a simple function that will take the cells of a table and allow you to click on two of them and then it will submit the form to a separate handler that checks if the move was valid. The javascript used here while short makes use of a few of the important aspects of javascript including the onclick ability and its ability to modify the html of a page.

First you have to create your table and be sure to give the table a name attribute as this will be useful for referencing the table later. Each cell that you create and want to be clickable will need to have an ID attribute such id=”a8” in this case it is a chess board so each cell will have an ID based on the position in the board. Then we add our onclick attribute onclick=”moveSelection(‘a8’)” and we want to add our bgcolor attribute as in this case we will be modifying the color to let the user know the cell that they clicked on. Also we have a very important step in the HTML ground work and that is the form. We are going to be clicking on cells to assign values to a form for a “from” and a “to” field.

<input type=”hidden” name=”from” value=””>

<input type=”hidden” name=”to” value=””>

This is a hidden form field since there is nothing we need the user to see here and we have no value to them. Again notice the name attributes set to make it easy to use JavaScript to reference these fields. So before we continue it is important to point out that when making a JavaScript application laying out the groundwork in the HTML by having proper name and ID attributes is extremely important.

Now, on to the JavaScript, you start by defining your function:

function moveSelection(selection) {

Inside this function we are going to have a series of “if” statements to determine if the user is clicking for first time or second time and also if they are clicking on the same block the second time as they did the first time (this is for deselection).

if (selection == document.moveForm.from.value) {

document.moveForm.from.value = “”;

document.getElementById(selection).style.backgroundColor = previousColor;

}

 

With the if statement we compare the box selected to the value of the hidden form “from” field to see if they click the same box as they did the first time. So if they did then we need to unset the value of from in the form and set the background color back to what it was before they clicked on the box.

else if (document.moveForm.from.value == “”) {

document.moveForm.from.value = selection;

previousColor= document.getElementById(selection).style.backgroundColor;

document.getElementById(selection).style.backgroundColor = “#ffffff”;

}

 

So now that we established they are not trying to deselect a box we can move on and see if they are clicking for the first time. We can tell this based on if the “from” field of the form still has no value. Once we establish that this is the first click we have to do three things in this area. We start by giving the from field a value based on the ID of the cell and then establish what the original color of the cell is before we change it and then we change the color of the cell to white for now. This is being done using CSS for the cell based on its ID. Now we have our from selected.

 

else {

document.moveForm.to.value = selection;

document.getElementById(selection).style.backgroundColor = “#ffffff”;

document.moveForm.submit();

}

 

This final section is where we will set the to field and again change the color then finally we tell our form to submit to the appropriate form handler as is set in the action attribute of the form.

So Now our chess game has an easy way to select the moves. You can view the version of this tutorial implemented into my chessgame(PHP) at http://chessoop.phpinformation.org (note: still in progress may have some bugs with the move validation and castling is not supported yet).

Hi, Stranger! Leave Your Comment...

You must be logged in to post a comment.

Powered by WP Robot