'Making A Game' - Learning to Code

avatar
(Edited)

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 = `
                <h2>Welcome to Moon!</h2>
                <ul>
                    <li><a href="#" onclick="startNewGame()">New Game</a></li>
                    <li><a href="#" onclick="loadGame()">Load Game</a></li>
                    <li><a href="#" onclick="showOptions()">Options</a></li>
                    <li><a href="#" onclick="exitGame()">Exit</a></li>
                </ul>
            `;
            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">
    (html comment removed:  The content will be dynamically updated by JavaScript )
    <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>
(html comment removed:  Link the JavaScript files )
<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 = `
        <h1>Location: ${location}</h1>
        <p>${description}</p>
        <p>What would you like to do?</p>
        <ul>
            ${generateNavigationLinks(location)}
        </ul>
    `;
}

// Function to generate navigation links for adjacent locations
function generateNavigationLinks(location) {
    const adjacentLocations = gameMap[location].locations;
    let links = '';
    for (const direction in adjacentLocations) {
        links += `<li><a href="#" onclick="exploreTown(${adjacentLocations[direction].split('_')[0]}, ${adjacentLocations[direction].split('_')[1]})">Go ${direction.charAt(0).toUpperCase() + direction.slice(1)}</a></li>`;
    }
    return links;
}
hive-188262 neoxian pimp thgaming blockchaingaming hivehustlers palnet waivio ctp lassecash archon
0
0
0.000
5 comments
avatar

The error must be around here, I think.

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

function exploreTown(x, y) {
    const currentLocation = `${x}_${y}`; // Current location coordinates
    if (gameMap[currentLocation]) {
        // Location exists
        displayLocation(currentLocation);
    } else {
        console.log('Invalid location.');
    }
}```
0
0
0.000
Reply
avatar

I'm about to sit down after dinner and play around with this to see if I can correct my error.

0
0
0.000
Reply