Regarding the alert function in my javascript game

Question

    <html>
      <head>
        <title>Maze Game</title>
            <link rel="stylesheet" type="text/css" href="styleSheet.css">


            <script type="text/javascript">

            function leftwards() 
            {
                var element = document.getElementById("girl");
                element.style.left = parseInt(element.style.left) - 10 + 'px';
            }

            function rightwards() 
            {
                var element = document.getElementById("girl");
                element.style.left = parseInt(element.style.left) + 10 + 'px';
            }

            function upwards() 
            {
                var element = document.getElementById("girl");
                element.style.top = parseInt(element.style.top) - 10 + 'px';
            }

            function downwards() 
            {
                var element = document.getElementById("girl");
                element.style.top = parseInt(element.style.top) + 10 + 'px';
            }

            function moveLocation(event) 
            {                    
                switch (event.keyCode) 
                {
                    case 37:
                        leftwards();
                    break;

                    case 39:
                        rightwards();
                    break;

                    case 38:
                        upwards();
                    break;

                    case 40:
                        downwards();
                    break;
                }
            };

            function mazeLoop()
            {
                if((Math.pow(Math.abs(top-590),2)+Math.pow(Math.abs(left-670),2)<=900))
                {
                  alert("DONE!");
                }
                else
                {
                  moveLocation();
                  setTimeout("mazeLoop()",10);
                }
            }
            </script>
      </head>

      <body onload="mazeLoop();" onkeydown="" onkeyup="moveLocation(event)">
        <h1>Find the destination</h1>
            <hr><br>
            <img src="maze.jpg" class="maze" alt="maze" width="730">
            <img id="girl" src="girl.jpg" style="position: absolute; left: 620; top: 140; bottom: auto;" height="30" width="30">

      </body>
    </html>

Hello my dear Stack Overflow friends, I am currently working on a javascript Maze Game (code above), which is basically done with keyboard moving, and when it is done , it should actually pop up the alert message. But when I test the code, it would say there is error on the reference for the "left" in the following line:

function mazeLoop()
            {
                if((Math.pow(Math.abs(top-590),2)+Math.pow(Math.abs(left-670),2)<=900))
                {
                  alert("DONE!");
                }
                else
                {
                  moveLocation();
                  setTimeout("mazeLoop()",10);
                }
            }

I do not know if sharing my styleSheet code will be useful in solving this issue , but they are :

    <style>
            body{
            background-color: powderblue;
            font-size: 30px;}

            h1{
            color: #E1BEE7;
            font-size: 50px;
            text-align: center;
            font-family: Verdana;
            text-decoration: underline;}

            h2{
            color: #C0CA33;
            font-size: 35px;
            text-align: center;
            position: absolute;
            left: 8%;}

            .button {
            background-color: #C0CA33;
            color: white;
            padding: 8px 30px;
            text-align: center;
            display: inline-block;
            font-size: 30px;}

            .maze{
            position: absolute;
            width: 730px;
            top: 25%;
            left: 22%;}

            #girl{
            position: absolute;
            left: 620;
            right: 500;
            top: 140;
            bottom: auto;}
    </style>

What is the value of `top` and `left` in your `if` condition can you check by console ? — Vinod Louis, Apr 24 '17 at 05:52
Adding one observation, Using alerts in the final/production code is not at all a good practice. — Sarin Jacob Sunny, Apr 24 '17 at 06:00
@VinodLouis alright, I am checking out this with my friend ! — Harry, Apr 24 '17 at 06:00
@gurvinder372 thanks . Then do I need to initially set up the value of top and left just like how I declare variable in java? — Harry, Apr 24 '17 at 06:01

score 1 · Accepted Answer · edited May 23 '17 at 11:54

You haven't declared top or left anywhere. The only reason you're not seeing this error for top is that browsers have a built-in global called top (a reference to the top-level window).

You must declare variables. You must also assign them meaningful values before using them in a calculation.

In general, avoid globals. Globals are a Bad Thing™. For instance, you can't use top as a global, because you're not allowed to assign to it.

To avoid using globals:

Wrap your code in a scoping structure. For now, that means an inline-invoked function expression:
```
(function() {
    // Your code here
})();
```
Up-to-date browsers would let you use just a freestanding block, because of the semantics of ES2015+, but lots of browsers in the wild still require a function instead.
Don't use onxyz-attribute-style event handlers (e.g., like your onkeyup="moveLocation(event)"), because they require that the functions they call be globals, and...globals are a Bad Thing™. Instead, read up on modern event handling, via addEventListener and similar. (If you have to support IE8, my answer here shows you how to handle the fact it doesn't support addEventListener.)

@JaromandaX alright, so do I need to set up the variables just like left = any value , and top = any value ? — Harry, Apr 24 '17 at 06:02

Regarding the alert function in my javascript game

1 Answers1