Как я могу сделать так, чтобы мои анимационные персонажи-спрайты перестали скрывать другие элементы на холсте позади них? - PullRequest
Новая
       32

Как я могу сделать так, чтобы мои анимационные персонажи-спрайты перестали скрывать другие элементы на холсте позади них?

0 голосов
/ 03 февраля 2019

Я пытаюсь построить мини-игру на элементе canvas в формате html.Несмотря на то, что я сделал анимацию для персонажей, используя спрайт-листы с прозрачным фоном, при перемещении они скрывают все за собой, как будто у них есть фон в прямоугольной форме.

Сначала я подумал, что это что-тосделать с функцией clearRect, но даже когда мы удалили только для проверки, это продолжало происходить. 

//Here we do the animations 
function drawImage(){
  updateFrame();
  document.getElementById( 'progress2').value+=1;
  if (Store == 68){
  left = 0;
  ctx.clearRect(x,y,width,height);
  ctx.drawImage(HaraldRight,srcX,srcY,width,height,x,y,width,height);

   //not trespassing the vertical bars system
   if (x + width < canWidth )
   {
   x=x+15;
   }


  }
  else if (Store == 65){
  left = 1;
  ctx.clearRect(x,y,width,height);
  ctx.drawImage(HaraldLeft,srcX,srcY,width,height,x,y,width,height);
   //not trespassing the vertical bars system

     if (x+width<=1){
      x=0;
    }
   else
   {
     x=x-15;
   }

  }

  else if (Store == 87){
   left = 0;

ctx.drawImage(HaraldRightJump,srcX,srcY,width,height,x,y,width,height);
   document.getElementById( 'progress2').value-=2;
  }

  else if (Store == 74){
   left = 0;

ctx.drawImage(HaraldRightAttack,srcX,srcY,width,height,x,y,width,height);
   document.getElementById( 'progress2').value-=2;
   if (document.getElementById( 'progress').value>0){
   if (document.getElementById( 'progress2').value==0)
   {
     alert('You have no stamina, you lose 10 HP as penalty')
     document.getElementById( 'progress').value-=10;
   }
   }




  }
  else if (Store == 83){
   left = 0;
   ctx.drawImage(HaraldShield,srcX,srcY,width,height,x,y,width,height);
   document.getElementById( 'progress2').value-=3;
   document.getElementById( 'progress2').value+=2;

  }

  else
  { 
    if (left!=1){
    ctx.clearRect(x,y,width,height);

 ctx.drawImage(HaraldStandRight,srcX,srcY,width,height,x,y,width,height);
    }
    else
    {

ctx.drawImage(HaraldLeftStand,srcX,srcY,width,height,x,y,width,height);
    }       
  }
  Store = 0;

 }


  //looping the sprite
  setInterval(function(){
 var Harald = drawImage(); 

  },100);

введите описание изображения здесь

...