Repetição de imagem - Jquery

[AprendendoC]

Buenas galera, to com problema aqui..

é o seguinte, quando termina a function levelUm() e chamo a function levelDois() ele tah me mostrando na tela varias vezes a imagem da levelDois()

alguem saberia como resolver este problema??

<script>
           $(document).ready(function(){
               var focos = 0;
               var pontos = 0;
               function levelUm(){
                   $("#level").html("Level : 1");
                   $("#focos").html("Focos : " + focos);
                   $("#pontos").html("Pontos : " + pontos);
                   $("img").attr("src", "dengue1.jpg");
                   $("img").click(function(e){
                       if((e.pageX > 574 && e.pageX < 652) && (e.pageY > 517 && e.pageY < 592)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "350px", left: "230px"});
                           $("<div id='msg'>").attr("title", "Garrafas").appendTo("#box").html("").dialog();
                       }else if((e.pageX > 596 && e.pageX < 647) && (e.pageY > 489 && e.pageY < 612)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "300px", left: "240px"});
                           $("<div id='msg'>").attr("title", "Vasos").appendTo("#box").html("Encha de Areia até a borda os pratinhos dos vasos de planta!").dialog();
                       }else if((e.pageX > 498 && e.pageX < 516) && (e.pageY > 473 && e.pageY < 488)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "275px", left: "130px"});
                       }else if((e.pageX > 550 && e.pageX < 580) && (e.pageY > 429 && e.pageY < 459)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "230px", left: "180px"});
                       }else if((e.pageX > 462 && e.pageX < 545) && (e.pageY > 240 && e.pageY < 290)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "65px", left: "120px"});
                       }else if((e.pageX > 795 && e.pageX < 875) && (e.pageY > 328 && e.pageY < 341)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "130px", left: "450px"});
                       }else if((e.pageX > 883 && e.pageX < 965) && (e.pageY > 314 && e.pageY < 344)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "120px", left: "530px"});
                       }else if((e.pageX > 900 && e.pageX < 938) && (e.pageY > 416 && e.pageY < 461)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "240px", left: "540px"});
                       }else if((e.pageX > 965 && e.pageX < 1002) && (e.pageY > 484 && e.pageY < 500)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "285px", left: "605px"});
                       }else if((e.pageX > 1040 && e.pageX < 1060) && (e.pageY > 480 && e.pageY < 500)){
                           focos++;
                           $("#focos").html("Focos : " + focos);
                           $("#pontos").html("Pontos : " + (pontos = pontos + 5));
                           $("<img id='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "285px", left: "670px"});
                       }
                       if(focos == 10){
                           $("<div id='msg'>").attr("title", "Garrafas").appendTo("#box").html("show").dialog();
                           levelDois(); // quando chamo a function levelDois() ele me mostra na tela varias vezes a imagem dengue2.jpeg
                       }
                   });

               }// levelUm
               function levelDois(){
                   $("#level").html("Level : 2");
                   $("#focos").html("Focos : " + focos);
                   $("#pontos").html("Pontos : " + pontos);
                   $("img").attr("src", "dengue2.jpg");
               }
               levelUm();
           });
       </script>

Edited June 17, 2013 at 05:36 AM by AprendendoC

[brunoais]

É difícil entender esse código.

Estás demasiado agarrado ao jQuery e a 1 liner's. Tenta fazer isso de maneira que faça mais sentido

Qual é o objectivo do que o que estás a fazer com esse código todo?

[AprendendoC]

és um jogo onde a pessoa tem que achar o foco da dengue... dai quando ela clica nas coordenadas(e.pageX & e.pageY) estou a setar pontos e a quantidade de focos e uma mensagem de prevenção sobre o foco, basicamente e um jogo para achar onde estao os focos da dengue.

o problema e que quando chamo o levelDois() ele me mostra na tela a imagem $("img").attr("src", "dengue2.jpg"); varias vezes.

Edited June 17, 2013 at 01:46 PM by AprendendoC

[yoda]

Se mostra mais que uma vez essa imagem, é porque está certo, é isso que estás a pedir ... a não ser que tenhas apenas uma tag <img>, ele vai apresentar mais que uma vez.

[AprendendoC]

bem acho que nao me expressei muito bem em meu problema...

esse print e da fase 1

esse e da fase 2

quando ele entra na fase dois esta a repetir a imagem referente a fase, esse que o problema ele deveria substituir a imagem da fase 1 pela da fase 2, mas sem repetir a imagem da fase 2.

[AprendendoC]

problema resolvido, usei uma variavel booleana, e funcionou certinho! Grato aos que tentaram ajudar!