Synced animated tiles in a 2d web game - animation

Question

I'm building a strategy game in the browser since 2 years back. Its already actively played by a small crowed of people so it is a working game.
Our problem is that its resource hungry. Basically you want opera or chrome. IE9 is more or less unplayable and firefox can be quite slow on some maps.
The game is a tile based top down game using 64x64pixel DIVs for the map.
We are currently in the end phase and we are focusing on optimizations. One of the things that eat resources is our animated water. We have 32 different tiles of water split into 15 frames each. So 480 64x64 images in one .gif file that is 1.1 mb.
Here is a link to the water: http://www.warbarons.com/beta5/terrain/water/water2.gif
Our game uses Fog of War to hide enemy units and castles that you cant see just like any RTS game. So on top of the .gif there is usually a layer with a transparent PNG.
It seems like this solution is quite demanding on the browser. When I scroll the map to show water in FireFox CPU goes up to 25% while its around 4-5% when no water is in sight.
I've been googling for a few days now trying to get an idea of a better technique. I've found two other way of doing this, either with a canvas tag which is iterating over a spreadsheet or using CSS to loop over a spreadsheet.
The problem I see with those two options is that all water tiles must remain in sync. If one starts playing before another one the waves wont be in sync which will break the seamless look.
I wonder if anyone have an idea to solve this? I know that having multiple gif animations will result in the out of sync problem.
Is there some cleaver way to use canvas to do this? Is it even possible to mix canvas with divs or would that require that we change the whole map engine?
Any help would be greatly appreciated.

Answer 1

Bit of a novice work around and a longshot, but:
For preparation, make a sprite-sheet of all of the different types of water tiles, with the first frame on the left, with a new row for each type, descending down.
Create a <div> with an 'overflow' attribute of 'hidden' behind the canvas
Make the background of the canvas transparent
Inside of the div, you can use <div>s for the water tiles and adjust their 'margin' attributes to match the position of the map
Give them all a class designation 'water', as well as a class to match the type of water tile (like 'dockleft', 'beachtop', etc.)
In your <style> element, make a class rule '.water'
Give the rule the 'background-image' attribute, linking to whatever and wherever your sprite-sheet is
For each type of water tile, create a class rule that corresponds to each tile-type and give them a matching y position for the sprite-sheet
Create a new <style> element with an id, one that will contain the background-position of all of the frames
Create a javascript variable to conatin the x position of all of the backgrounds
Inside your game loop, decrement the variable by 64 for whenever you want the sprite to change (until it equals 960, then set it 0)
When the variable changes, set the contents of the new <style> element to the new CSS rule for its 'background-position-x' using the variable
Meh. A little much, I know, but better than looping through an array and gobbling up system resources, changing each element individually (at least I assume so). Here's a simplified code sample:
<script type="text/javascript">
var pos = 0; // background-position-x variable
function loop() {
document.getElementById('changeMe').innerHTML = ".water{background-position-x:" + pos + "px;}"; //changes the contents of the <style> with the id 'changeMe'
//changes the <style> with id 'Change'
pos -= (pos == 960) ? -960 : 64; //assuming your sprite-sheet is oriented horizontally
setTimeout('loop();', 100);
}
</script>
<style type="text/css">
/* Remains unchanged */
.water {
width: 64px;
height: 64px;
background-image: url('spriteSheet.png');
}
.dockleft{
background-position-y: 420px;
/* If all of your sprites are on one sheet, you can set the
'background-position-y' attribute for each type of water tile and
give the 'water' class one sprite-sheet url for all of the types */
}
</style>
<style id="changeMe" type="text/css">
/* Changed by 'loop()' */
</style>
<body onload="loop();">
<div class="water dockleft"></div>
</body>