Reversi to HTML5

I still have not found any time to continue work on my reversi app. I'm not planning on changing the development language of the game logic due to lack of time, but for the interface it might be a good exercise to try jquery mobile and html5. @Rockncoder has some slides on beginning HTML5 mobile game programming. I would like to make a sprite map to animate disc turnovers during a reversi turn.

As described in the slides, a sprite is a two dimensional image that gets placed into a scene. The map part means that there is a single file composed of several individual sprites. From what I've read, having a single file makes the transfer from server to browser more efficient. Perhaps this is because there are fewer transfers to setup.

On the other hand, I was originally planning on using an animated gif to animate the disc turnovers. A timer would start at the start of the animation and then swap out the animated gif with a regular image at the end of the turnover sequence. This method has a chance of getting the animation out of sync with the image swapping, so the sprite method seems better.

A Github repository has the demonstration code associated with the slides. I also need to look for images to make the sprite map for reversi. To animate the turning, I plan on scaling the images of the black and white disc and saving out the different scaled images with sumo paint online. A different github repository by Christian Cantrell has some images I can try to do this with. They have a transparent background so hopefully all I will need to do is scale the png files.

I don't have much experience with the sumo paint web site, but I assume scaling the images shouldn't be that hard. There should be a way to upload the images and then apply an image resize tool to them. Hopefully it will remember the background is transparent. Also, the newly sized image will need to be recentered and the image background size preserved to keep the sprite sizes the same. Also, since the goal is a collection of images in a sprite map, some of the images may need to be separated out and then put back together. That way, the original images will not get scaled along with the images of the discs turning. Recentering is important so that the disc does not shift during the turnover animation. One way would be to calculate the difference between the new image size and the original image size, divide by 2, and then shift by that amount.

So my next steps for the reversi project are to scale some disc images, collect them into a sprite map, reuse parts of the sprite engine from @rockncoder, and make a test html5 and javascript page that animates disc turning.