'Making A Game' - Learning to Code

I'm having trouble figuring out why I can't move on the map. If anyone has any input on what I need to correct, please help me. I've tried chat GPT but it doesn't help much.

If you want in on it, I welcome whatever help may be out there to help me code this in my spare time. If you want to check out the link it is at www.geocities.ws/paulmoon410/game under the folder 'From Scratch'

Please take it easy on me.

This is the index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moon - Text-Based D&D Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div id="gameOutput"></div>
    
    <script>
        // Function to display menu options
        function displayMenu() {
            const menu = `
                Welcome to Moon!
                
                    New Game
                    Load Game
                    Options
                    Exit
                
            `;
            document.getElementById('gameOutput').innerHTML = menu;
        }
        
       // Function to start a new game
       function startNewGame() {
            // Redirect to moongame.html
            window.location.href = 'moongame.html';
        }
        
        // Function to load a saved game
        function loadGame() {
            // Add code to load a saved game
            console.log('Loading game...');
        }
        
        // Function to show options
        function showOptions() {
            // Add code to show game options
            console.log('Showing options...');
        }
        
        // Function to exit the game
        function exitGame() {
            // Add code to exit the game
            console.log('Exiting game...');
        }
        
        // Display menu options when the page loads
        displayMenu();
    </script>
</body>
</html>

Then this is the moongame.html


<div id="gameContainer">
    
    <h1>Welcome to the Town Center</h1>
    <p>You find yourself in the bustling town center of Moon. What would you like to do?</p>
    <ul>
        <li><a href="#" onclick="exploreTown('north')">Go North</a>li>
        <li><a href="#" onclick="exploreTown('east')">Go East</a>li>
        <li><a href="#" onclick="exploreTown('south')">Go South</a>li>
        <li><a href="#" onclick="exploreTown('west')">Go West</a>li>
    </ul>
</div>

<script src="map.js"></script>
<script src="character.js"></script>
<script src="enpc.js"></script>
</html>

This is maps.js and where I'm really working right now.


// map.js

// Define the game map
const gameMap = generateMap(100, 100, 10000, 10000);

// Function to generate a game map with varying population density
function generateMap(centerX, centerY, width, height) {
    const map = {};

    // Define population density based on distance from the center
    const maxDistance = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
    
    // Generate locations
    for (let x = 0; x < width; x++) {
        for (let y = 0; y < height; y++) {
            const distanceToCenter = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
            const populationDensity = 1 - (distanceToCenter / maxDistance); // Population density decreases as distance from center increases
            if (Math.random() < populationDensity) {
                // Location is populated
                map[`${x}_${y}`] = {
                    description: `You are at (${x}, ${y}). It is a populated area.`,
                    locations: generateAdjacentLocations(x, y, width, height)
                };
            }
        }
    }

    return map;
}

// Function to generate adjacent locations for a given coordinate
function generateAdjacentLocations(x, y, width, height) {
    const locations = {};
    if (x > 0) locations.west = `${x - 1}_${y}`;
    if (x < width - 1) locations.east = `${x + 1}_${y}`;
    if (y > 0) locations.north = `${x}_${y - 1}`;
    if (y < height - 1) locations.south = `${x}_${y + 1}`;
    return locations;
}

// Function to explore a location and navigate the world
function exploreTown(x, y) {
    const currentLocation = `${x}_${y}`; // Current location coordinates
    if (gameMap[currentLocation]) {
        // Location exists
        displayLocation(currentLocation);
    } else {
        console.log('Invalid location.');
    }
}

// Function to display the description of a location
function displayLocation(location) {
    const description = gameMap[location].description;
    document.getElementById('gameContainer').innerHTML = `
        Location: ${location}
        ${description}
        What would you like to do?
        
            ${generateNavigationLinks(location)}
        
    `;
}

// Function to generate navigation links for adjacent locations
function generateNavigationLinks(location) {
    const adjacentLocations = gameMap[location].locations;
    let links = '';
    for (const direction in adjacentLocations) {
        links += `Go ${direction.charAt(0).toUpperCase() + direction.slice(1)}
`;
    }
    return links;
}