Regarding the alert function in my javascript game

By Harry

    <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>

Source: Stack Overflow

    

Share it with your friends!

    Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/19/9652219/html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273