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 に答える