Display of Javascript alert()

Question

I have a javascript game and it gives alert "Game Over!" when the game over condition is met, which is a distance being greater than another distance. The distance grows more and more so the condition is met again and again and the browser asks for "Prevent this page creating from additional dialogs". When I click OK and refresh the browser with F5 or Ctrl + F5. The "Game Over!" alert comes no more, one has to restart the browser. Either I have to pause everything on the game on game over or somehow enable alert() if the page is refreshed.

Would be glad for your tips! Below is my code:

function run(t) {
   requestAnimationFrame(run);
   if (t === undefined) {
      t=0;
   }
   var h = t - tprev;   // time step 
   tprev = t;


   SmileyApp.xpos += SmileyApp.xspeed * h/1000;  // update position according to constant speed for Yellow Smiley
   SmileyApp.ypos += SmileyApp.yspeed * h/1000;  // update position according to constant speed

    for (var i=0; i<SmileyReds.length; i++){
   SmileyReds[i].xpos += SmileyReds[i].xspeed * h/1000;  // update position according to constant speed for Red Smileys
   SmileyReds[i].ypos += SmileyReds[i].yspeed * h/1000;  // update position according to constant speed
    }
   // Yellow Smiley edge hit control
   if (lineDistance(350, 350, SmileyApp.xpos, SmileyApp.ypos) + SmileyApp.radius > 300) {
     alert("Game Over");
     //swal("Game Over");
     //break;
     //Object.freeze(canvas);
     fade(canvas);
   }

    for (var i=0; i<SmileyReds.length; i++){
      if (lineDistance(350, 350, SmileyReds[i].xpos, SmileyReds[i].ypos) + SmileyReds[i].radius > 300) {
      // Red Smiley collusion with circle edge
      // bounce formula : v2 = v1 − [2 (n · v1) n]

        nx = 350 -  SmileyReds[i].xpos ;
        ny = 350 -  SmileyReds[i].ypos ;
        var len = Math.sqrt(nx * nx + ny * ny)
        nx = nx / len;
        ny = ny / len;
      //new calc
       v_newx = SmileyReds[i].xspeed - (2 *( nx * SmileyReds[i].xspeed + ny * SmileyReds[i].yspeed ) ) * nx;
       v_newy = SmileyReds[i].yspeed - (2 *( nx * SmileyReds[i].xspeed + ny * SmileyReds[i].yspeed ) ) * ny;

       SmileyReds[i].xspeed = v_newx;
       SmileyReds[i].yspeed = v_newy;
        }
        // Red - Yellow Smiley collusion
     if (lineDistance(SmileyApp.xpos, SmileyApp.ypos, SmileyReds[i].xpos, SmileyReds[i].ypos) < 2*SmileyApp.radius ) {
        alert("Game Over");
        }

    }// for loop end

   // redraw smileys at new position
   ctx.clearRect(0,0,canvas.height, canvas.width);
   drawBigCircle();
   drawSmiley(SmileyApp.xpos, SmileyApp.ypos, SmileyApp.radius);

   for (var i=0; i<SmileyReds.length; i++){
   drawSmileyRed(SmileyReds[i].xpos, SmileyReds[i].ypos, SmileyReds[i].radius);
   }
}

Yes, put some code. You could also stop increasing the 'distance' once the game over condition is met, — Jeff P Chacko
– Jeff P Chacko, Commented Feb 10, 2016 at 12:18
@jeffpc1993 I added my code, there are 2 game over conditions, first yellow smiley hitting the edge, second yellow smiley hitting one of hundred red smileys... to control the distance of hundreds of red smileys would be difficult. Im hoping for an easier solution. — Anarkie
– Anarkie, Commented Feb 10, 2016 at 13:29

Dan Lowe · Accepted Answer · 2016-02-10 13:31:55Z

1

Define a variable near the top of the function:

var gameHasEnded = false;

Then, use it to determine whether the game has already ended:

if (lineDistance(350, 350, SmileyApp.xpos, SmileyApp.ypos) + SmileyApp.radius > 300) {
    if (! gameHasEnded) {
        gameHasEnded = true;
        alert("Game Over");
        fade(canvas);
    }
}

answered Feb 10, 2016 at 13:31

Dan Lowe

57.5k20 gold badges133 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anarkie Over a year ago

Good idea but on the second run(F5) the same thing happens, because the alert is displayed 2nd time, the browser asks if it shall prevent the alert, but if sweet alert is used in this case then all would be good!

Collectives™ on Stack Overflow

Display of Javascript alert()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related