Question

我正在研究基于Javascript，HTML画布的游戏，因为我正在破坏主要老板，他的照片会改变。我想问一下是否有可能用JS改变两张特殊效果的图片。到目前为止，我还没有提出解决方案。

以下是我想要改变的图片示例。

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张不同的图片）。谢谢你的帮助！

Answer 1

我在另一个与你的问题相似的问题上找到了这个答案。 Javascript fade image in and out这是一个循环，但我认为你可以重写它以满足你的需求。

Answer 2

您可以使用画布在不同的渐变阶段创建平面。

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

然后在不同的褪色阶段绘制预先绘制的平面以获得效果。

这是代码和小提琴：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>

在javascript游戏中淡出图像

2 个答案: