Capture Clicks for a Chess Board

@purefanDec 23.2005

Heelllooo!!!
I know this is going to be something pretty big…
I am about to start a chess library, users will be able to upload their games.
But, due to the language and typos I find better (harder to code I know, but in the end simply better) to restrict the chances the user has to mess up by putting a chess board on the screen and tell the user “move the pieces as it happened in the game”, internally I will handle everything else.
Here is where I need as much assistance as I can get.
Should I draw the board using a table and populate it with the images at their corresponding initial position? (If you have a better solution please tell me)
how then would I:
-Capture the clicks and know that they belong to a specific square?
-“Move” the image from square to square?
-And most importantly, check if the move is a valid one?
I know how to play chess, but Im not sure (actually im pretty lost here ? ) how to do these things…

Thank you very much, really, anything that you can help me with will be awsome!.

I dont know if any of you plays chess or has visited ~~[url]~~www.letsplaychess.com[/url] but something like that board is what I need…

btw: I should store the moves in a JS variable so later on, when the user has finished, and it clicks ‘Add to library’, those moves are sent to a PHP page which puts them in a database…

to post a comment

JavaScript

7 Comments(s) _↴

@PrismaticDec 23.2005 — #Hey there.

If you want to create a chess board that functions as one in real life, my suggestion to you would be to use a table composed of 64 seperate TD's; that's eight rows, and eight columns. What you can consider doing (and I highly recommend this) is assigning a seperate id value to each square individually, so that it is immediately recognizable by the script as to what square it is. For example, you might start off like this:

&lt;table border="1" cellspacing="0" cellpadding="0"&gt;
 &lt;tr&gt;
 &lt;td id="a1"&gt; &lt;/td&gt;&lt;td id="a2"&gt; &lt;/td&gt;&lt;td id="a3"&gt; &lt;/td&gt;&lt;td id="a4"&gt; &lt;/td&gt;&lt;td id="a5"&gt; &lt;/td&gt;&lt;td id="a6"&gt; &lt;/td&gt;&lt;td id="a7"&gt; &lt;/td&gt;&lt;td id="a8"&gt; &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td id="b1"&gt;
 
 ...

And so on. If each square has its own ID that is easily recognizable by the script and by you, you will be able to tell where each piece is, or where a piece might move, at any given time.

Here's another hint I highly recommend: CSS can be used to determine the placement of pieces. For example:

<style type="text/css">

.knight { background-image: url([color=red]Knight Image URL[/color]); }

</style>
[/quote]

This way, anything with the "knight" class would have a background image of the knight piece: so, to "move" a knight to another space, all you would have to do is define that space with the className of "Knight." Does that make sense, somewhat?

So, for example, let's say you wanted to populate space a1 with a knight. This can be donw simply, now:

document.getElementById('a1').className = 'knight'

The above code would set the class of the TD with the id of 'a1' marked, and assign it the 'knight' class. Since you have defined the knight class as having a knight background image in your CSS, this will cause the knight to appear on that space. The same caan be done for all pieces.

You can also make the pieces disappear from their original spaces quite easily by reverting their className back to nothing.

I hope that somewhat makes sense to you; obviously, it doesn't explain the entire process, since creating a fully functional chess board would take a lot of script, but I hope it gives you a basic idea of what I am trying to say. If you need help understanding me, because I tend to ramble, just ask. ?

@purefanauthorDec 23.2005 — #Thanks for replying!

I still am not sure of how to capture the clicks of the mouse...If I set the images as background images then I think a click on them wouldnt trigger the event, am I right??

The other way I thought of was using the innerHTML and treat the images as front images, so the onClick could work on them.

Any comments?

I thought of using PHP to draw the table

@konithomimoDec 23.2005 — #Just use the onclick for the images. Have them click the piece to move and then the place to move it to. Then just write a method for each type of piece (knight, pawn, bishop,etc.). After that just make sure that the appropriate method returns true. If it does then the move is legit, if not then give a warning. That is the basics of chess in JS.

@JPnycDec 23.2005 — #You could use absolute positioning for the piece images, and call a function onmousedown, capturing the mouse coordinates and making them the x and y of the image.

@purefanauthorDec 24.2005 — #Thanks for the help guys!

So far i've only came up with the displaying of the board, I spent a lot of time getting the images and making them trasnparent.

You can take a look at them here:

http://purefan.xennos.com/ajedrez/biblio/Board/myboard.html

but right now im having troubles writing the function that gets the click.

I set the onclick like this:

<img src="bitmaps/br2.gif" onclick="getmove(this);">[/quote]
and in the head of the page this function:

[code=html]
 function getmove(a);
 {
 alert('ytf');
 }[/code]

this just to test if the event is being triggered, but it seems its not since nothing happens...

clues?

I also dont know how to get the exact td in which the user clicked...

@purefanauthorDec 24.2005 — #Good news! I foudn what was wrong...

I had declared the script type not-good,

it was suposed to be:

[code=html]
 <script language="Javascript" TYPE="text/javascript">
 [/code]

and I had something like

TYPE="text/js"
[/quote]
so now everything is working.

However I still dont know how to get the element.

having:

[code=html]
 <script language="Javascript" TYPE="text/javascript">
 <!--
 function getmove(re){
 alert("this is returned: " + re);
 }
 -->
 </script>[/code]

.......

[code=html]
 <td id="a8" bgcolor="#FFFFFF"><img src="bitmaps/trans/br2.gif" onClick="getmove(document.getElementById(this));"></td>[/code]

doesnt work, it returns null.

I need to know which cell was clicked, which id...is this possible???

@konithomimoDec 25.2005 — #<td id="a8" bgcolor="#FFFFFF"><img src="bitmaps/trans/br2.gif" onClick="getmove(document.getElementById(this));"></td>

That line wont work because the ID of the object that you are calling it in is an image that has no ID... to fix this either give an ID to the image, or send the specific ID of the table cell.

Also, it would be better to use:

<td id="a8" bgcolor="#FFFFFF"><img src="bitmaps/trans/br2.gif" onClick="getmove(this.Id);"></td>

Also in #JavaScript _↴

onChange issue QueryString in window.open Easy Question Pls Help

Success!

Help @purefan spread the word by sharing this article on Twitter...

Tweet This

Capture Clicks for a Chess Board

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Capture Clicks for a Chess Board

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴