Drawing a series of isometric enemies in the correct order or dealing with the dirty rectangle?

I'm wonderring if anyone can help me with making sure my... uhhh ... Z-index (bad pun, you'll see why in a moment) is in the wrong order. I've been doing this for a few hours straight now and my eyes are going buggy - but - maybe leaving a question on Stack overnight will help push this in the right direction.

I've been working on the code for https://github.com/AlexChesser/jsSprite and I'm as far as the 6th test. Use the W key to run, A and D to turn left and right: http://chesser.ca/jsSprite/06-brainnsss....php (Gettit? Z-Index?! Hilarious).

Anyways, You'll notice that if you run around the screen for a bit. the individual Zombies' white squares / dirty rectangles overlap the other zombies' squares. When working with multiple overlapping sprites, how does one go about making sure they all get drawn without upsetting any of the other sprites?

(You see z is for zombies, but z index like when you're dealing with overlapping in CSS - probably way funnier when you've been coding for a number of hours straight).

Thanks f开发者_C百科or your Brainsss......

It's not a z-index issue, your zombies themselves are okay.

Your problem is really with the second line of drawFrame

drawFrame: function(){
  Sprite.ctx.clearRect(0,0,Sprite.width,Sprite.height); //clear previous frame
  // I am trouble:
  MainContext.clearRect(Sprite.Xpos, Sprite.Ypos, Sprite.width, Sprite.height);

It is clearing a rectangle of the main canvas where the zombie once was every time you draw a zombie, which can affect nearby objects!

So instead you should be clearing the entire canvas each time.

Try commenting out the MainContext.clearRect in drawFrame, and instead add one in runloop like below. It should fix your problems.

runloop = function(m) {
  // New clear put here!
  MainContext.clearRect(0,0,canvas.width,canvas.height);
  m.drawFrame();
  for (Z in Zarr) {  // For ZOMBIE in "Zombie Array" Aaaaarrrgghhh... 
    Zarr[Z].pointTo(m);
    Zarr[Z].drawFrame();

    MainContext.drawImage(Zarr[Z].canvas, Zarr[Z].Xpos, Zarr[Z].Ypos);
  };
  MainContext.drawImage(m.canvas, m.Xpos, m.Ypos);
};

How about sorting your array (Zarr) by the y coordinate Ypos of each zombie before rendering? Or are you getting at the problem with (a lack of) transparency?