DP - Treasure Finding Game

by path411

HTML

<div id="Intro">
    Try to find the treasure chest with your magic compass!
</div>
<div id="Arrows">
    <a id="Arrows-North" class="arrow" data-direction="North" href="#">&uarr;</a>
    <a id="Arrows-South" class="arrow" data-direction="South" href="#">&darr;</a>
    <a id="Arrows-West" class="arrow" data-direction="West" href="#">&larr;</a>
    <a id="Arrows-East" class="arrow" data-direction="East" href="#">&rarr;</a>
</div>

<div id="Distance">
    You are still <span id="Distance-Value">0</span>m away from the chest!
</div>
<div id="GameEnd">
    You have found the chest! <a id="PlayAgain" href="#">Play Again?</a>        
</div>

CSS

#Intro {
    margin-top:10px;
}
#Arrows {
    margin-left:50px;
    margin-top:10px;
}
    .arrow {
        text-decoration:none;
        padding:5px 10px ;
        background-color:#dddddd;
        color:#333333;
    }
    .arrow:hover {
        background-color:#666666;
        color:#ffffff;
    }
#Distance {
    margin-top:10px;
}
#GameEnd {
    display:none;
}

JavaScript

(function() {

    var GAME_SIZE = 100; // Dimensions
    
    var chestloc;
    var playerloc;
    
    var $gameend;
    var $distancevalue;

    function Init() {
        $gameend = $('#GameEnd');
        $distancevalue = $('#Distance-Value');
        
        BindEvents();
        NewGame();        
    }
    
            function MovePlayer(direction) {
                var xd = 0;
                var yd = 0;
                switch(direction) {
                    case 'North':
                        yd += 1;
                    break;
                    case 'South':
                        yd -=1;
                    break;
                    case 'West':
                        xd -= 1;
                    break;
                    case 'East':
                        xd += 1;
                    break;
                }
                
                playerloc.x += xd;
                playerloc.y += yd;
                
                CheckDistance();
            }
                function CheckDistance() {
                    // Calculate distance between player and chest
                    var xds = Math.pow((chestloc.x-playerloc.x), 2);
                    var yds = Math.pow((chestloc.y-playerloc.y), 2);
                    var distance = Math.sqrt(xds + yds).toFixed(3);
                    
                    
                    ShowDistance(distance);
                    
                    if(distance == 0) {
                        EndGame();
                    }
                }
                
                    function EndGame() {
                        $gameend.show();
                    }
                    
                    function ShowDistance(distance) {
                        $distancevalue.text(distance);
                    }
                
            function NewGame() {
                GenerateNewGame();
                CheckDistance();
            }
            
                function GenerateNewGame() {
 ...