2 Player Connect 4 game

[colin shuker]

Hi, I've just managed to make a simple chat web application.
Basically each line of text a user enters, is saved as a context attribute.
and all the context attibutes are displayed by redisplaying the screen every 5 seconds.

I was thinking of extending this to a 2 player connect 4 game. I was thinking of generating a jpg image (using BufferedImage) in the servlet, to display the board and pieces dropped.

The problem is selecting the column(1-7) to drop your piece in.
A crude way would be to just use a <FORM> and <INPUT TYPE='TEXT' NAME='COLUMN' > tag in the jsp page, then parse this to an int in the servlet, or perhaps use checkboxes, ideally, getting the column to light up (or something like that)when the mouse moves over it would be good.
But I only know how to do this in a Frame/JFrame, not over a jpg image in a webpage.

Any thoughts and ideas would be much appreciated.
Thanks

[Bear Bibeault]

It is not clear what your question is.

[Paul Clapham]

My interpretation of the question is "How do I allow the browser user to select a particular position in an image?" The servlets part of the question is just a red herring.

[Bear Bibeault]

Yeah, I'm leaning that way too. All of that is client-side technology, so moving off to the HTML/Javascript forum.

[Bear Bibeault]

You might want to look into image maps.

[colin shuker]

Thanks,
I've just found this website on image maps (never heard of them before)
The site is Image Maps
I'll let you nice people know if I have any problems
Thanks again.

[colin shuker]

Hi again,
Ok, I've got a simple Image map working, but here is my problem
I'm making a two player connect4 game. There will be an image of the board
on the html page, which is basically 7 columns with red and yellow
counters in the columns.

With this piece of code...

<IMG src="Board.gif" usemap="#BoardMap" alt="Navigation Bar">
<MAP name="BoardMap">
<AREA coords="20,20,100,100" shape="rect"
      href="http://localhost:8081/servlet/Connect4servlet"
      alt="Home">
<AREA coords="120,20,220,100" shape="rect"
      href="http://localhost:8081/servlet/Connect4servlet"
      alt="Home">
</MAP>

clicking in either of the rectangular regions takes you into the
Connect4servlet.
So what I really need is 7 rectangular shapes, I could (crudely) have
7 servlets Connect4servlet1, Connect4servlet2, Connect4servlet3,...
With each sevlet updating the specific column.
But 7 (virtually identical) servlets seems almost criminal, if I could just
pass the x-value of the mouse coordinate into the Connect4Servlet, (like when using <FORM> and <INPUT>, then using request.getParameter("Name") in the servlet) I could solve the problem of knowing which column was chosen
using just the one sevlet.

Can anyone help me with this?
Thanks very much

[Paul Clapham]

How about one servlet, and you pass different parameters to it based on which part of the map was clicked?

<IMG src="Board.gif" usemap="#BoardMap" alt="Navigation Bar">
<MAP name="BoardMap">
<AREA coords="20,20,100,100" shape="rect"
      href="http://localhost:8081/servlet/Connect4servlet?x=1&y=1"
      alt="Home">
<AREA coords="120,20,220,100" shape="rect"
      href="http://localhost:8081/servlet/Connect4servlet?x=2&y=1"
      alt="Home">
</MAP>

[colin shuker]

AHHHH

Wow, thats genius, why didn't I think of that!!
I was pathetically trying to stick <INPUT TYPE='HIDDEN'...> tags
inbetween the <AREA> tags, but that obviously wouldn't work.

Your method essentially sets the parameters for you in one go.
Thanks very much, I'll try it out now