Canvas, Table or List (in a commercial app)?

JavaScript
1

(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[LIST]
[]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)
[/LIST]

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.

Regards,

grNadpa

2

Hi grNadpa,

After your last thread about drawing cards on the canvas, I thought I’d have a go at building a version of solitaire myself. While trying to figure out how to implement drag and drop for moving the cards around I came across EaselJS, which is a library for working with canvas elements. I think you might find it useful.

3

Thank you again for sticking with me Fretburner. I take two things from your reply:

  • The canvas option is the appropriate option of the three I’ve listed and
  • The EaselJS should provide code examples a javascript nearly-illiterate can muddle through.

Again, you’ve been a great and patient help. Thank you.

grNadpa