Почему, когда я выполняю этот код, он снова не позволяет мне помечать какие-то будки?

У меня есть этот код, когда я это выполняю, первый раз функционирует верно, но когда я это выполняю несколько раз, - как будто он не оставлял мне clickar какое-то место, не, если это что-то из кэша, или если есть другой мотив, и у меня нет даже идеи как упорядочивать это.

Программа функционирует хорошо, но как я говорю им, когда я это выполняю снова, оно не функционирует верно.

let palabras = [
    "caballos", "iguales", "caminante", "queso"
];
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Juego del ahorcado</title>
    <style>
        .letras {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double; margin: 5px; padding:5px; color: #F00; background-color: #0fc; font-family: 'Courier New', Courier, monospace;
        }
        .blancos { position: absolute; left: 0px; top: 0px; border:none; margin: 5px; padding: 5px; color: #006; background-color: white; font-family: 'Courier New', Courier, monospace;text-decoration: underline; color: black; font-size: 24 px;
        }
    </style>
    <script src="palabras.js" defer></script>
    <script type="text/javascript">
    
        let ctx;
        let construirelemento; 
        let alfabeto = "abcdefghijklmnñopqrstuvwxyz";
        let alfabetoy = 300;
        let alfabetox = 20;
        let alfabetoancho = 25;
        let secreto;
        let letrasacertadas = 0;
        let secretox = 160;
        let secretoy =50;
        let secretoancho = 50;
        let colorhorca = "brown";
        let colorcara ="tan";
        let colorcuerpo ="tan";
        let colornudo ="#F60";
        let centrocuerpox = 70;
        let pasos = [
            dibujarsoga,
            dibujarcabeza,
            dibujarcuerpo,
            dibujarbrazoderecho,
            dibujarbrazoizquierdo,
            dibujarpiernaderecha,
            dibujarpiernaizquierda,
            dibujarlazo
        ];
        let actual = 0;
        function dibujarsoga (){
            ctx.lineWidth = 8;
            ctx.strokeStyle = colorhorca;
            ctx.beginPath();
            ctx.moveTo (2,180);
            ctx.lineTo (40,180);
            ctx.moveTo (20,180);
            ctx.lineTo(20,40);
            ctx.moveTo (2,40);
            ctx.lineTo (80,40);
            ctx.stroke();
            ctx.closePath();

        }
        function dibujarcabeza (){
            ctx.lineWidth = 3;
            ctx.strokeStyle = colorcara;
            ctx.save(); //before scaling of circle to be oval
            ctx.scale (.6,1);
            ctx.beginPath ();
            ctx. arc (centrocuerpox /.6,80,10,0,Math.PI*2, false);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }

        function dibujarcuerpo (){
            ctx.strokeStyle = colorcuerpo;
            ctx.beginPath ();
            ctx.moveTo (centrocuerpox, 90);
            ctx.lineTo (centrocuerpox, 125);
            ctx.stroke();
            ctx.closePath();
        }

        function dibujarbrazoderecho (){
            ctx.beginPath ();
            ctx.moveTo (centrocuerpox, 100);
            ctx.lineTo (centrocuerpox+20, 110);
            ctx.stroke();
            ctx.closePath();
        }

        function dibujarbrazoizquierdo (){
            ctx.beginPath ();
            ctx.moveTo (centrocuerpox, 100);
            ctx.lineTo (centrocuerpox-20, 110);
            ctx.stroke();
            ctx.closePath();
        }

            function dibujarpiernaderecha (){
            ctx.beginPath ();
            ctx.moveTo (centrocuerpox, 125);
            ctx.lineTo (centrocuerpox+10, 155);
            ctx.stroke();
            ctx.closePath();


        }

        function dibujarpiernaizquierda (){
            ctx.beginPath ();
            ctx.moveTo (centrocuerpox, 125);
            ctx.lineTo (centrocuerpox-10, 155);
            ctx.stroke();
            ctx.closePath();

        }      
        function dibujarlazo (){
            ctx.strokeStyle =colornudo;
            ctx.beginPath ();
            ctx.moveTo (centrocuerpox-10, 40);
            ctx.lineTo (centrocuerpox-5, 95);
            ctx.stroke();
            ctx.closePath();
            ctx.save();
            ctx.scale (1,.3);
            ctx.beginPath();
            ctx.arc (centrocuerpox, 95/.3,8,0,Math.PI*2,false);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
            dibujarcuello();
            dibujarcabeza();


        }
        function dibujarcuello () {
            ctx.strokeStyle = colorcuerpo;
            ctx.beginPath();
            ctx.moveTo (centrocuerpox, 90);
            ctx.lineTo (centrocuerpox, 95);
            ctx.stroke();
            ctx.closePath();

        }
        function init () {
            ctx = document.getElementById('canvas').getContext ('2d');
            configurarjuego ();
            ctx.font ="bold 20pt Ariel";
        }

        function configurarjuego (){
            let i;
            let x;
            let y;
            let idunica;
            let an = alfabeto.length;
            for (i=0; i<an; i++) {

                idunica = "a"+String(i);
                d = document.createElement('alfabeto');
                d.innerHTML = (
                    "<div class = 'letras' id = '"+idunica+"'>"+alfabeto[i]+"</div>");
                    document.body.appendChild(d);
                    construirelemento = document.getElementById(idunica);
                    x =alfabetox + alfabetoancho*i;
                    y = alfabetoy;
                    construirelemento.style.top = String(y)+"px";
                    construirelemento.style.left = String(x)+"px";
                    construirelemento.addEventListener ('click', elementoelegido, false);
            }
            let elec = Math.floor (Math.random() * palabras.length);
            secreto = palabras[elec];
            for (i=0; i<secreto.length;i++){
                idunica = "s"+String(i);
                d = document.createElement('secreto');
                d.innerHTML = (
                    "<div class ='blancos' id = '"+idunica+"'> __ </div>");
                    document.body.appendChild(d);
                    construirelemento = document.getElementById(idunica);
                    x= secretox + secretoancho*i;
                    y = secretoy;
                    construirelemento.style.top = String(y)+"px";
                    construirelemento.style.left = String(x)+"px";
            }

            pasos [actual]();
            actual++;
            return false;
        }

        function elementoelegido(ev) {
            let not = true;
            let elegido = this.textContent;
            let i;
            let j;
            let idunica;
            let construirelemento;
            let out;
            for (i=0; i<secreto.length; i++)
            {
                if (elegido ==secreto[i]){
                    id ="s"+String(i);
                    document.getElementById(id).textContent = elegido;
                    not = false;
                    letrasacertadas++;
                    if (letrasacertadas ==secreto.length)
                    {
                        ctx.fillStyle = colorhorca;
                        out ="¡Has ganado!";
                        ctx.fillText (out,200,80);
                        ctx.fillText ("Recarga la página para jugar de nuevo.", 200,120);
                        for (j=0; j<alfabeto.length;j++){
                            idunica = "a"+String(j);
                            construirelemento = document.getElementById(idunica);
                            construirelemento.removeEventListener('click', elementoelegido, false);
                        }
                    }
                }
            }
            if (not) {
                pasos[actual]();
                actual++;
                if (actual>=pasos.length)
                {
                    for (i=0;i <secreto.length; i++){
                        id = "s"+String(i);
                        document.getElementById(id).textContent = secreto[i];
                    }
                    ctx.fillStyle = colorhorca;
                    out = "¡Has perdido!";
                    ctx.fillText (out, 200,80);
                    ctx.fillText ("Recarga la página para jugar de nuevo.", 200,120);
                    for (j=0; j<alfabeto.length; j++){
                        idunica = "a"+String(j);
                        construirelemento = document.getElementById(idunica);
                        construirelemento.removeEventListener('click', elementoelegido, false);
                    }
                }
            }
            let id = this.id;
            document.getElementById(id).style.display = "none";
        }
    

        
    </script>
</head>
<body onload="init ();">
    <h1>Colgado</h1></br>
    <p>
        <canvas id="canvas" width="700" height="400">
            Tu navegador no soporta el elemento canvas de HTML5.
        </canvas>
    </br>
    </p>
    
</body>
</head>
</html>
7
задан 20.02.2019, 21:59
0 ответов