在Javascript中使drawimage淡出

Question

我之前也问过类似的问题，但我没有得到解决方案。

我目前有 7 个从上到下的错误。我希望用户能够单击一个会导致它淡出/消失的错误。如果鼠标在图像内，我需要某种检测，单击时会使其淡出或无效。

这很重要，因为我将包含一个评分系统，每次击中将获得 1 分，每次未命中将失去 1 分。

var noOfBugs = 7;
var bug = [];
for(var i =0; i < noOfBugs; i++){
var x = Math.floor(Math.random()*canvas.width);
var y = Math.floor(Math.random()*100);

bug[i] = new Bug(x,y);
}

imageBug = new Image();
imageBug.src = "imgs/redbug.png";

 function Bug (x,y){
    this.x = x;
    this.y =y;

    this.drop = function(){
    var dir = Math.floor(Math.random())*3;
    if(dir == 0){
        this.x = this.x;
    }



    this.y = this.y+1;
    if(this.y > canvas.height){
        this.y=0;
    }
 }

this.show = function (){
context.drawImage(imageBug, this.x, this.y)

}
}


function draw (){
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
for(var i=0; i<noOfBugs; i++){
    bug[i].show();
    bug[i].drop();
}
}
// Mouse click on bug 
canvas.onclick = function (event){
  var mouseX = event.clientX;
  var mouseY = event.clientY;

if (mouseX === x && mouseY === y){
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.globalAlpha = 0.1;
  context.drawImage(imageBug, this.x, this.y, imageX, imageY);

  alert("its a hit");
}

else {
  alert("You missed");

  score -= 0;
}

}

 function reload (){
    draw ();
    window.requestAnimationFrame(reload);
 }

 reload();
 };

Answer 1

将此代码用于鼠标：

mouse = {
    x: 0,
    y: 0,
    down: false
};

canvas.addEventListener("mousemove", (event => {

    var bounds = canvas.getBoundingClientRect();

    // Get mouse position INSIDE canvas.
    mouse.x = ((event.clientX - bounds.left) / (bounds.right - bounds.left)) * canvas.width;
    mouse.y = ((event.clientY - bounds.top) / (bounds.bottom - bounds.top)) * canvas.height;

    if(event.which == 1) { // If mouse was left clicked.
        mouse.down = true;
    } else {
        mouse.down = false;
    }

}));

canvas.addEventListener("mousedown", (event => {

    if(event.which == 1) { // If mouse was left clicked.
        mouse.down = true;
    } else {
        mouse.down = false;
    }

}));

canvas.addEventListener("mouseup", (event => {
    mouse.down = false; // If mouse click was released.
}));

由于鼠标是二维点，而 bug 是二维矩形，你可以使用这个 dot-in-box 函数：

function dotInBox(point, rect) {
    return (
        point.x > rect.x &&
        point.x < rect.x + rect.width &&
        point.y > rect.y &&
        point.y < rect.y + rect.height
    );
}

point 将是 mouse，rect 将是代表错误边界框的对象。

要使错误消失，我建议您使用context.globalAlpha。你可以在https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha找到它的文档。

只需将此伪代码与其他 sn-ps 一起使用即可！

if mouse is down:
  for var i = 0. i < length of bugs. increment i:
    if mouse touching current bug:
      make current bug fade.

in update loop:
  for var i = 0. i < length of bugs. increment i:
    if bug is fading:
      lower current bug’s opacity.
    if bug is completely faded:
      delete current bug.
      decrement i. (since the bug was removed, you would accidentally skip a bug)