Game in JavaScript problem with alert coming up too fast when clicking

Question

I got a game where you are supposed to catch the burglar. The problem I have is that the alertbox "Too bad, the burglar got away with your money!" comes too fast when one click the startthegame-button.

How do I do to get the alertbox to alert only after that the game has started and 10 seconds have passed?
I want the game to run only one time. So after the game has ended the person playing has to refresh the page to be able to start playing again.

Any help is much appreciated!

<!DOCTYPE html>
    <html lang="sv">
    
    <head>
        <meta charset="utf-8">
        <title> BURGLAR-STOPPING </title>
    
        <style>
            #burglar {
                position: absolute;
                top: 150px;
                left: 60px;
            }
        </style>
    
    </head>
    
    <body>
        <h1>Get the burglar! </h1>
        <h3> You have only 10 seconds before the burglar runs away with all your money! </h3>
    
        <div id="burglar"  onclick="stopIt();"> BURGLAR </div>
    
        <input type="button" value="Start the game" onclick="startthegame();time();">
    
        <script>
            var x = 150;
            var y = 300;
            var course = "right";
            var randomUp = Math.floor(Math.random() * 166);
    
            var t = function startthegame() {
                setInterval(moveMe, 0);
            }
    
            function stopIt() {
                clearInterval(t);
                alert("Yes, You got the burglar!");
            }
    
            function moveMe() {
    
                if (course == "right") {
                    x = x + 2;
                } else if (course == "left") {
                    x = x - 2;
                } else if (course == "down") {
                    y = y + 1;
                } else if (course == "up") {
                    y = y - 1;
                }
    
                document.getElementById("burglar").style.left = x + "px";
                document.getElementById("burglar").style.top = y + "px";
    
                if (x == 1050 && course == "right") {
                    course = "down";
                } else if (y == 500 && course == "down") {
                    course = "left";
                } else if (x == 150 && course == "left") {
                    course = "up";
                } else if (y == randomUp && course == "up") {
                    course = "right";
                }
            }
    
            function startthegame() {
                setInterval(moveMe, 0);
            }
    
            function time() {
                setTimeout(time, 10000);
                alert("Too bad, the burglar got away with your money!");
            }
        </script>
    
    </body></html>

Does this answer your question? [Executing JavaScript after X seconds](https://stackoverflow.com/questions/8252638/executing-javascript-after-x-seconds) — Heretic Monkey, Dec 28 '20 at 16:52

epascarello · Answer 1 · 2020-12-28T16:40:51.833

Your code is creating a timeout to call itself and it then alerts the string. It is NOT making the alert at 10 sconds.

function time() {
  setTimeout(time, 10000);
  alert("Too bad, the burglar got away with your money!");
}

should be

var endTimer;
function time() {
  endTimer = setTimeout(function () { alert("Too bad, the burglar got away with your money!"); }, 10000);
}

Now you are trying to cancel the timeout, but the t is a reference to the function, not the interval

var t = function startthegame() {
  setInterval(moveMe, 0);
}

should be

var t; 
function startthegame() {
  t = setInterval(moveMe, 0);
}

And for some reason you defined startthegame twice.

so we have

var x = 150;
var y = 300;
var course = "right";
var randomUp = Math.floor(Math.random() * 166);

var hasRun = false;

var moveTimer;
function startthegame() {
  if (hasRun) return;
  hasRun = true;
  moveTimer = setInterval(moveMe, 1);
}

function stopTimers () {
  if (moveTimer) clearInterval(moveTimer);
  if (endTimer) clearTimeout(endTimer);
}

function stopIt() {
  stopTimers();
  alert("Yes, You got the burglar!");
}

function moveMe() {

  if (course == "right") {
    x = x + 2;
  } else if (course == "left") {
    x = x - 2;
  } else if (course == "down") {
    y = y + 1;
  } else if (course == "up") {
    y = y - 1;
  }

  document.getElementById("burglar").style.left = x + "px";
  document.getElementById("burglar").style.top = y + "px";

  if (x == 1050 && course == "right") {
    course = "down";
  } else if (y == 500 && course == "down") {
    course = "left";
  } else if (x == 150 && course == "left") {
    course = "up";
  } else if (y == randomUp && course == "up") {
    course = "right";
  }
}


var endTimer

function time() {
  endTimer = setTimeout(function() {
    alert("Too bad, the burglar got away with your money!");
    stopTimers();
  }, 10000);
}

<html lang="sv">

<head>
  <meta charset="utf-8">
  <title> BURGLAR-STOPPING </title>

  <style>
    #burglar {
      position: absolute;
      top: 150px;
      left: 60px;
    }
  </style>

</head>

<body>
  <h1>Get the burglar! </h1>
  <h3> You have only 10 seconds before the burglar runs away with all your money! </h3>

  <div id="burglar" onclick="stopIt();"> BURGLAR </div>

  <input type="button" value="Start the game" onclick="startthegame();time();">


</body>

</html>

Thank you sooo much for your help! You are the best @epascarello ! A truly good christmas to you! :D Thanks! — mqgajver, Dec 28 '20 at 16:59

Game in JavaScript problem with alert coming up too fast when clicking

1 Answers1