Not returning focus to browser after alert pop-up

I 开发者_如何学Cam trying to do a little pacman game to train my JavaScript skills. To move pacman around, I use the onkeyup event function associated with a move function.

Still I am having a problem. Every time pacman dies (or game ends) I always use an alert box to alert the user of what happened. Still, after I press the OK button to make pacman move again I must click on the browser window to make it responsive to keyboard events.

Somehow I believe this is a windows focus problem, still, tried to use some focus around (after the alert box mainly) and doesn't seem to do the trick.

Can someone give me general pointers of what could be the solution for this?

PS: In the game construction I am using images created on the fly, having only 2 text tags on the page with id's.

EDIT: code associated in the onkeyup:

function muda_sentido(event) {

  //baixo
  if(event.keyCode == 40)
  {
      pacman_status = status[2];
      imagem_pacman.src = "Imagens/pacmanb.gif";
      imagens[pacman_pos[0]][pacman_pos[1]].src = "Imagens/pacmanb.gif";
  }
  //direita
  else if(event.keyCode == 39)
  {
      pacman_status = status[0];

      imagem_pacman.src = "Imagens/pacmand.gif";
      imagens[pacman_pos[0]][pacman_pos[1]].src = "Imagens/pacmand.gif";
  }
  //cima
  else if(event.keyCode == 38)
  {
      pacman_status = status[3];
      imagem_pacman.src = "Imagens/pacmanc.gif";
      imagens[pacman_pos[0]][pacman_pos[1]].src = "Imagens/pacmanc.gif";
  }
  //esquerda
  else if(event.keyCode == 37)
  {
      pacman_status = status[1];
      imagem_pacman.src="Imagens/pacmane.gif"
      imagens[pacman_pos[0]][pacman_pos[1]].src = "Imagens/pacmane.gif";
  }

}

html body contents is a double h2 tag (cannot add it to code format cause it appears messed up on the previewer) with an ID each.

And around the program I have something like:

alert("Pacman died!")

And the problem is after this.

2 EDIT: Managed to grab the piece of code that lies the alert box (just changed it now to look for it in only one place):

function pacman_morreu() {

    alert("O pacman morreu!");

    if(pacman_vidas==0)
    {
        alert("Game Over!");
        reinicia_tabuleiro();

    }
    else
    {
        pacman_vidas--;
        vidas.innerHTML = "Número de vidas: "+ pacman_vidas;
    }
    pintaEcra();
}

The functions listed inside the code will only do matrix manipulation operations (nothing special really).

EDIT 3: As requested, here goes:

function reinicia_tabuleiro() {

    pacman_vidas = 3;
    vidas.innerHTML = "Número de vidas: 3";
    pontuacao.innerHTML = "Pontuação: 0";
    pontos = 0;
    for(i=1;i<24;i++)
    {
        for(j=1;j<24;j++)
        {
            if(tabuleiro[i][j] == 0)
                tabuleiro[i][j] = 2;
        }
    }


}

---

Sorry dude, I don't see anything that would be causing this. What browser are you using? I'm doing similar tests on IE and FF and am getting window focus after clicking 'Ok' in the alert box. Have you tried using Firebug? It is a great program for debugging javascript. I would highly recommend it for this pacman project you are doing. You might have an error somewhere in your code that is causing this that isn't very apparent in the code shown above.

---

Well right now, I don't have solution to this problem but I have a workaround. Dont use alertbox, use lightbox(div with higher z-index value) and make the div show and hide based on condition in javascript. I hope this will help.

---

I just went through a similar problem with keydown and Firefox 5.0. The window focuses when the page loads and all my $(window).keydown(...) events worked fine.

Then after I show an alert, none of the events fire. It ends up that the window does not focus itself after I dismiss the alert. I was able to solve it by forcing the window to refocus when it blurs. I'm using jQuery so here's what it looks like for me:

$(window).blur(function(){
    setTimeout(function(){
        $(window).focus();
    }, 0);
});

The timeout is necessary since Firefox (& maybe other browsers) won't let you immediately focus during a blur event.

This may have unintended consequences since you're basically never letting the window blur. For example, clicking on the location bar won't even work because the window pulls focus back immediately. To dig a deeper hole, you might set a "refocus" flag for your callback so it knows whether to give up focus or not. Here's the basic idea:

var doRefocusWindow = false;

$(window).blur(function(){
    if(!doRefocusWindow) return;
    doRefocusWindow = false;
    setTimeout(function(){
        $(window).focus();
    }, 0);
});

...

doRefocusWindow = true;
alert("Game Over");