Game: kid and zombies moving at different speeds, same loop, html5, javascript

Question

I am developing this game html5, javascript.

PROBLEM

I need to revive the protagonist and zombies with different fps (or animation time) in order to give them the look of movement at different speeds.

So, I want the zombie to move slower than the child, but both work with the same cycle (single setInterval)

How do I get this effect? https://jsfiddle.net/mc9jmc7j/

Optional: here it animates with requestAnimationFrame () https://jsfiddle.net/mc9jmc7j/3/ I just can't control the speed

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext("2d"); 


//DRAWING/ANIMATING MAIN CHARACTER
////////////////////////////////////////////
var x =100;
var y =60;
var srcX;
var srcY;
var sheetWidth = 864;
var sheetHeight = 280;
var cols = 8;
var rows = 2;
var width = sheetWidth/cols;
var height = sheetHeight/rows;
var currentFrame =0;


function updateCharacterFrame(){
	currentFrame = ++ currentFrame% cols;
	srcX = currentFrame*width;
	srcY = 0;
	ctx.clearRect(x,y,width,height);
}

var character = new Image();
character.src="https://i1.wp.com/www.simplifiedcoding.net/wp-content/uploads/2016/02/character.png?w=864&ssl=1";

//--------------------------

function AnimateCharacter(){
updateCharacterFrame();
ctx.drawImage(character,srcX,srcY, width, height,x,y,60, 60)
}


//DRAWING/ANIMATING ZOMBI
///////////////////////////////////////////////////////////////////////
var ZombiX =10;
var ZombiY =60;
var ZombisrcX;
var ZombisrcY;
var ZombisheetWidth = 512;//512; 
var ZombisheetHeight = 516;//480; 
var Zombicols = 4;//4;
var Zombirows = 4;//4;
var Zombiwidth = ZombisheetWidth/Zombicols;
var Zombiheight = ZombisheetHeight/Zombirows;
var ZombicurrentFrame =0;

function updateZombiFrame(){
	ZombicurrentFrame = ++ ZombicurrentFrame% Zombicols; 

	ZombisrcX = ZombicurrentFrame*Zombiwidth;
	ZombisrcsrcY = 2*Zombiheight;
	ctx.clearRect(ZombiX,ZombiY,Zombiwidth,Zombiheight);
	


}
var zombi = new Image();
zombi.src="https://orig00.deviantart.net/6d86/f/2011/094/d/a/zombie_sprite_sheet_by_ceridwen64-d3d747n.png";

//--------------------------

function AnimateZombi(){
updateZombiFrame(); 
ctx.drawImage(zombi,ZombisrcX,ZombisrcsrcY, Zombiwidth, Zombiheight,ZombiX,ZombiY,60, 60)
}



function mainLoop(){
AnimateZombi();AnimateCharacter();
}

///////////////////////////////////////////////////////////////////////

characterFPS = 20;
setInterval(function(){

	mainLoop();

},1000/characterFPS);

#canvas{
		margin: 0 auto;
		border:1px solid #f0f0f0;
		width:400px;
		height:200px;
		text-align: center;
	}

<canvas id="canvas"></canvas>

Run codeHide result

Answer 1

, Zombi x ( ZombieCalls var) (, Zombi , )

, .

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");


//DRAWING/ANIMATING MAIN CHARACTER
////////////////////////////////////////////
var x = 100;
var y = 60;
var srcX;
var srcY;
var sheetWidth = 864;
var sheetHeight = 280;
var cols = 8;
var rows = 2;
var width = sheetWidth / cols;
var height = sheetHeight / rows;
var currentFrame = 0;


function updateCharacterFrame() {
  currentFrame = ++currentFrame % cols;
  srcX = currentFrame * width;
  srcY = 0;
  ctx.clearRect(x, y, width, height);
}

var character = new Image();
character.src = "https://i1.wp.com/www.simplifiedcoding.net/wp-content/uploads/2016/02/character.png?w=864&ssl=1";

//--------------------------

function AnimateCharacter() {
  updateCharacterFrame();
  ctx.drawImage(character, srcX, srcY, width, height, x, y, 60, 60)
}


//DRAWING/ANIMATING ZOMBI
///////////////////////////////////////////////////////////////////////
var ZombiX = 10;
var ZombiY = 60;
var ZombisrcX;
var ZombisrcY;
var ZombisheetWidth = 512; //512; 
var ZombisheetHeight = 516; //480; 
var Zombicols = 4; //4;
var Zombirows = 4; //4;
var Zombiwidth = ZombisheetWidth / Zombicols;
var Zombiheight = ZombisheetHeight / Zombirows;
var ZombicurrentFrame = 0;
var ZombieCalls = 1;

function updateZombiFrame() {
  if (ZombieCalls % 4 === 0) {
    ZombicurrentFrame = ++ZombicurrentFrame % Zombicols;
  }
  ZombieCalls++;
  // reset ZombieCalls so it doesn't get too large
  if(ZombieCalls >= 400) ZombieCalls = 0;
  
  ZombisrcX = ZombicurrentFrame * Zombiwidth;
  ZombisrcsrcY = 2 * Zombiheight;
  ctx.clearRect(ZombiX, ZombiY, Zombiwidth, Zombiheight);



}
var zombi = new Image();
zombi.src = "https://orig00.deviantart.net/6d86/f/2011/094/d/a/zombie_sprite_sheet_by_ceridwen64-d3d747n.png";

//--------------------------

function AnimateZombi() {
  updateZombiFrame();
  ctx.drawImage(zombi, ZombisrcX, ZombisrcsrcY, Zombiwidth, Zombiheight, ZombiX, ZombiY, 60, 60)
}



function mainLoop() {
  AnimateZombi();
  AnimateCharacter();
}

///////////////////////////////////////////////////////////////////////

characterFPS = 20;
setInterval(function() {

  mainLoop();

}, 1000 / characterFPS);

#canvas {
  margin: 0 auto;
  border: 1px solid #f0f0f0;
  width: 400px;
  height: 200px;
  text-align: center;
}

<canvas id="canvas"></canvas>

Hide result