(Another in the series of teaching myself HTML5 and Javascript.)

I'm using a solitare game as my teaching tool. In the simplistic game I have in mind, I will need to place card images on the screen then detect which "card" the player clicks upon.

These appear to be my options
  • place the images on an HTML5 canvas (with an 'onclick' function), then capture the coordinates when the player "clicks" an image
  • Create a standard table with each cell having an image and unique identifier (with an onclick event)
  • create a list (ul or ol) in conjunction with CSS with each <li> sporting an id (also with an onclick event)
  • some other option I haven't listed (that you would kindly point out to me)

Because this is a self-teaching exercise, I will probably go with the canvas option. But I am interested as to what would be the normal approach in a commercial environment.