Trying to erase images generated by Soltar in JavaScript

Question

I am trying to do a simple drag and drop game in canvas. The problem is that I can't errase the images or change the visibilty to hidden after I finish the drop.

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);

I would appreciate your help Thanks.

score 0 · Answer 1 · answered Nov 28 '12 at 12:24

To clear an area of a canvas, you can either use fillRect to cover an area with the current background color, or you can use clearRect to erase everything in an area, leaving a transparent square.

Now, when you do this, you'll want to make sure that any objects that wouldn't normally get redrawn aren't clipped by either of these function calls. If they are, you'll need to redraw them as well. If performance isn't an issue, consider clearing the entire area of the canvas, and redrawing all the objects at their updated positions.

Trying to erase images generated by Soltar in JavaScript

1 Answers1