3

我正在尝试在画布中做一个简单的拖放游戏。问题是在完成放置后我无法擦除图像或将可见性更改为隐藏。

function iniciar() {

    origen = document.querySelectorAll('#barra > img');
    for(var i=0; i<origen.length; i++) {
        origen[i].addEventListener('dragstart', arrastrar);
        origen[i].addEventListener('dragend', finalizado);
    }

    origenDos = document.getElementById("lienzo");
    for(var i=0; i<origenDos.length; i++) {
        origenDos[i].addEventListener('dragstart', arrastrar);
        origenDos[i].addEventListener('dragend', finalizado);
    }

    destino = document.getElementById("lienzo");

    destino.addEventListener('dragenter', entrando);
    destino.addEventListener('dragleave', saliendo);
    destino.addEventListener('dragover', function(e){e.preventDefault();});
    destino.addEventListener('drop', soltar);

    miLienzo = destino.getContext('2d');

    var imagen=new Image();
    imagen.src="imagenes/zombie1.png";
    miLienzo.drawImage(imagen, 0, 0);

    miLienzo.beginPath();
    miLienzo.arc(440,330,50,Math.PI*2,false);
    miLienzo.stroke();
    miLienzo.beginPath();
    miLienzo.arc(190,360,75,Math.PI*2,false);
    miLienzo.stroke();
    miLienzo.beginPath();
    miLienzo.arc(330,260,75,Math.PI*2,false);
    miLienzo.stroke();

}

function imagenS(e){
miImagen=e.target;
lienzo.drawImage(miImagen,0,0);

}



function arrastrar (e) {
    elemento = e.target;
    e.dataTransfer.setData('Text',elemento.getAttribute('id'));
    e.dataTransfer.setDragImage(e.target,32,32);
}

function soltar(e){

    e.preventDefault();
    var id=e.dataTransfer.getData("Text");
    var elemento=document.getElementById(id);

    var posx=e.pageX-destino.offsetLeft-32;
    var posy=e.pageY-destino.offsetTop-32;


    if (((((posx+32)-330)*((posx+32)-330) + ((posy+32)-260)*((posy+32)-260)) < 5625 ) && (elemento.id=="hacha")) {
        alert("escenario1:sobreviviste");

        destino.style.background= 'url('+'imagenes/fondo2.png'+')';

    visibilidad1=0;
    visibilidad2=1;
    visibilidad3=0;


    var imagen=new Image();
    imagen.src="imagenes/zombie2.png";
    miLienzo.globalAlpha=visibilidad2;
    miLienzo.drawImage(imagen, 0, 0);

    } else {
        alert("escenario1:estas muerto");
    }


    if (((((posx+32)-190)*((posx+32)-190) + ((posy+32)-360)*((posy+32)-360)) < 5625 ) && (elemento.id=="motor")) {
        alert("escenario2:sobreviviste");
        destino.style.background= 'url('+'imagenes/fondo3.png'+')';

    visibilidad1=0;
    visibilidad2=0;
    visibilidad3=1;

    var imagen=new Image();
    imagen.src="imagenes/zombie3.png";
    miLienzo.globalAlpha=visibilidad3;
    miLienzo.drawImage(imagen, 0, 0);



    } else {
        alert("escenario2:estas muerto");
    }

    if (((((posx+32)-440)*((posx+32)-440) + ((posy+32)-330)*((posy+32)-330)) < 1963 ) && (elemento.id=="sniper")) {
        alert("escenario3:sobreviviste");

        destino.style.background= 'url('+'imagenes/fondo1.png'+')';

    visibilidad1=1;
    visibilidad2=0;
    visibilidad3=0;

    var imagen=new Image();
    imagen.src="imagenes/zombie1.png";
    miLienzo.globalAlpha=visibilidad1;
    miLienzo.drawImage(imagen, 0, 0);



    } else {
        alert("escenario3:estas muerto");
    }



}

function finalizado (e) {
    e.preventDefault();


}

function entrando (e){
    e.preventDefault();

}

function saliendo (e) {
    e.preventDefault();

}

window.addEventListener("load", iniciar);

我会很感激你的帮助谢谢。

4

1 回答 1

0

要清除画布的某个区域，您可以使用fillRect当前背景颜色覆盖一个区域，也可以使用clearRect擦除该区域中的所有内容，留下一个透明的正方形。

现在，当您执行此操作时，您需要确保通常不会重绘的任何对象都不会被这些函数调用中的任何一个剪裁。如果是，您还需要重新绘制它们。如果性能不是问题，请考虑清除画布的整个区域，并在更新位置重新绘制所有对象。

于 2012-11-28T12:24:58.623 回答