Затухающие образы в javascript игре

Я работаю над Javascript, основанной на HTML-холсте, и, поскольку я повреждаю главного босса, его фотографии меняются. Я хочу спросить, возможно ли изменить две фотографии в JS со специальным затуханием. До сих пор я не нашел решения.Затухающие образы в javascript игре

Вот пример изображений, которые я хочу изменить с эффектом.

Example

Мой код выглядит так далеко, как это

 if(hp>7 && hp<15) this.boss.srcY = 520; 
     if(hp>=15 && hp <22) this.boss.srcY = 680; 
     if(hp>=22 && hp <30) this.boss.srcY = 840; 
     if(hp>=30 && hp <37) this.boss.srcY = 1000; 
     if(hp>=37 && hp <45) this.boss.srcY = 1200; 
     if(hp>=45 && hp <50) this.boss.srcY = 1365;

Объяснение кода это- больше хитов (меньше HP) составляет более искаженное изображение (5 различных фотографий). Спасибо за помощь!

источник

2013-10-03 Toesmash

Вы можете использовать холст для создания самолетов на разных этапах замирания.

enter image description here

Используйте context.globalAlpha, чтобы установить непрозрачность обнаженных изображений.

context.globalAlpha=0.50; // opacity at 50% 
context.drawImage(yourPlane,0,0);

Спектакль Примечание: Поскольку рисунок уже существующие изображения быстрее, чем применение эффекта, а затем рисунок, вы можете сохранить свой самолет в виде изображений на различных этапах выцветанию.

var plane50percent=new Image(); 
plane50percent.src=canvas.toDataURL(); // image.onload omitted for brevity

Затем просто нарисуйте предварительно вытянутые плоскости на разных этапах затухания, чтобы получить эффект.

Вот код и Fiddle: http://jsfiddle.net/m1erickson/v5TwY/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<script src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
    $(function(){ 

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

     window.requestAnimFrame = (function(callback) { 
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
      function(callback) { 
      window.setTimeout(callback, 1000/60); 
      }; 
     })(); 


     var fps = 60; 

     // image loader 
     var img=new Image(); 
     img.onload=function(){ 
      animate(); 
     } 
     img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/b2.png"; 


     function animate() { 
      setTimeout(function() { 
       requestAnimFrame(animate); 


       // set the current opacity 
       ctx.globalAlpha-=.02; 

       // draw the image 
       ctx.clearRect(0,0,canvas.width,canvas.height); 
       ctx.drawImage(img,5,5); 

       if(ctx.globalAlpha<=0){ return; } 

      }, 1000/fps); 
     } 


    }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=405 height=200></canvas> 
</body> 
</html>

источник

2013-10-03 15:33:00 markE

Я нашел этот ответ по другому вопросу, который кажется вам похожим. Javascript fade image in and out Это в цикле, но я думаю, вы можете переписать его в соответствии с вашими потребностями.

источник

2013-10-03 13:38:30 Screech129

Я думаю, что это было бы лучше, как комментарий. – thgaskell

У меня не хватило репутации, или у меня было бы – Screech129

Это позор :( – thgaskell

Затухающие образы в javascript игре

ответ

Смежные вопросы