Ludo game source code html javascript css example

By /

Ludo is a classic board game that originated in India and has gained worldwide popularity. The game involves four players racing their tokens from start to finish based on dice rolls. Recreating Ludo as a web application involves designing the game board, implementing game logic, and ensuring interactive gameplay.

Setting Up the Project

To begin, create a new project directory and set up the following files:

  • index.html: The main HTML file.
  • styles.css: The CSS file for styling.
  • script.js: The JavaScript file for game logic.

Designing the Game Board with HTML and CSS

The Ludo board consists of a square board with four colored areas (red, green, yellow, blue), each containing a home area and a path leading to the center. We’ll use HTML to structure the board and CSS for styling.

HTML Structure (index.html):

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ludo Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="board">
        <!-- Red Home -->
        <div class="home red-home">
            <div class="token red"></div>
            <div class="token red"></div>
            <div class="token red"></div>
            <div class="token red"></div>
        </div>
        <!-- Green Home -->
        <div class="home green-home">
            <div class="token green"></div>
            <div class="token green"></div>
            <div class="token green"></div>
            <div class="token green"></div>
        </div>
        <!-- Yellow Home -->
        <div class="home yellow-home">
            <div class="token yellow"></div>
            <div class="token yellow"></div>
            <div class="token yellow"></div>
            <div class="token yellow"></div>
        </div>
        <!-- Blue Home -->
        <div class="home blue-home">
            <div class="token blue"></div>
            <div class="token blue"></div>
            <div class="token blue"></div>
            <div class="token blue"></div>
        </div>
        <!-- Paths and center will be added here -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Styling (styles.css):

cssCopy codebody {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.board {
    display: grid;
    grid-template-columns: repeat(15, 40px);
    grid-template-rows: repeat(15, 40px);
    gap: 2px;
    background-color: #fff;
    border: 2px solid #000;
}

.home {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    padding: 10px;
}

.red-home {
    background-color: #ffcccc;
    grid-column: 1 / span 6;
    grid-row: 1 / span 6;
}

.green-home {
    background-color: #ccffcc;
    grid-column: 10 / span 6;
    grid-row: 1 / span 6;
}

.yellow-home {
    background-color: #ffffcc;
    grid-column: 10 / span 6;
    grid-row: 10 / span 6;
}

.blue-home {
    background-color: #ccccff;
    grid-column: 1 / span 6;
    grid-row: 10 / span 6;
}

.token {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: auto;
}

.red { background-color: red; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.blue { background-color: blue; }

This setup creates a 15×15 grid representing the Ludo board, with designated areas for each player’s home. The tokens are styled as colored circles.

Implementing Game Logic with JavaScript

The game logic involves managing player turns, dice rolls, token movements, and win conditions. We’ll use JavaScript to handle these functionalities.

JavaScript Logic (script.js):

javascriptCopy code// Initialize game state
let currentPlayer = 0;
const players = ['red', 'green', 'yellow', 'blue'];
const tokens = {
    red: [0, 0, 0, 0],
    green: [0, 0, 0, 0],
    yellow: [0, 0, 0, 0],
    blue: [0, 0, 0, 0]
};

// Function to roll the dice
function rollDice() {
    return Math.floor(Math.random() * 6) + 1;
}

// Function to move a token
function moveToken(player, tokenIndex, steps) {
    tokens[player][tokenIndex] += steps;
    // Update the UI to reflect the new position
    // Check for collisions or reaching the end
}

// Function to handle a player's turn
function playerTurn() {
    const diceRoll = rollDice();
    console.log(`${players[currentPlayer]} rolled a ${diceRoll}`);
    // Logic to decide which token to move
    // For simplicity, move the first token that can move
    for (let i = 0; i < 4; i++) {
        if (canMove(players[currentPlayer], i, diceRoll)) {
            moveToken(players[currentPlayer], i, diceRoll);
            break;
        }
    }
    // Check for win condition
    if (checkWin(players[currentPlayer])) {
        console.log(`${players[currentPlayer]} wins!`);
        // End the game or reset
    } else {
        // Move to the next player
        currentPlayer = (currentPlayer + 1) % 4;
    }
}

// Function to check if a token can move
function canMove(player, token
::contentReference[oaicite:0]{index=0}

JavaScript Logic (script.js continued):

javascriptCopy codefunction canMove(player, tokenIndex, steps) {
    const currentPosition = tokens[player][tokenIndex];
    const newPosition = currentPosition + steps;

    // Check if the token is still within bounds and not blocked
    if (newPosition > 57) return false; // 57 is the maximum position in Ludo

    // Additional logic for token collisions or starting conditions
    return true;
}

function checkWin(player) {
    // Check if all tokens of the player have reached the end
    return tokens[player].every(position => position === 57);
}

Integrating Gameplay

Add a button to roll the dice and handle the game’s flow interactively.

HTML:

htmlCopy code<div class="controls">
    <button id="rollDiceButton">Roll Dice</button>
    <p id="currentTurn">Current Player: Red</p>
    <p id="diceResult">Dice Roll: </p>
</div>

CSS:

cssCopy code.controls {
    margin-top: 20px;
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#currentTurn, #diceResult {
    margin: 10px 0;
    font-size: 18px;
}

JavaScript:

javascriptCopy codedocument.getElementById('rollDiceButton').addEventListener('click', () => {
    const diceRoll = rollDice();
    document.getElementById('diceResult').textContent = `Dice Roll: ${diceRoll}`;
    playerTurn();

    const nextPlayer = players[currentPlayer];
    document.getElementById('currentTurn').textContent = `Current Player: ${nextPlayer.charAt(0).toUpperCase() + nextPlayer.slice(1)}`;
});

Enhancing the User Interface

To make the game visually appealing, you can animate token movements and highlight active players or clickable tokens. Use CSS animations and additional JavaScript for this.

Example: Animate Token Movement

javascriptCopy codefunction animateTokenMovement(tokenElement, startPosition, endPosition) {
    // Logic to smoothly transition the token from startPosition to endPosition
    tokenElement.style.transition = 'transform 0.5s ease-in-out';
    tokenElement.style.transform = `translate(${endPosition.x}px, ${endPosition.y}px)`;
}

Testing and Debugging

Testing ensures a seamless user experience. Validate each feature step by step:

  • Test dice rolls for randomness.
  • Ensure tokens move as expected.
  • Handle edge cases like collisions and maximum token positions.

Use browser developer tools to debug any issues. Check the console for errors and ensure all elements behave as intended.

Conclusion

Creating a Ludo game using HTML, CSS, and JavaScript is a rewarding project. It helps improve your knowledge of DOM manipulation, event handling, and CSS grid layout. By following this guide, you now have a functioning Ludo game that can be played in a browser. You can further enhance it with additional features like multiplayer support, sound effects, or advanced animations.

Frequently Asked Questions (FAQ)

Q1. Can I add multiplayer support to this game?
Yes, you can implement multiplayer support by allowing players to take turns on the same device or using WebSockets for online multiplayer functionality.

Q2. How do I handle token collisions?
Add a check in the moveToken function to detect when a token lands on a space occupied by another player’s token. Reset the collided token to its starting position.

Q3. Can I make this game mobile-friendly?
Yes, use responsive design principles like CSS media queries to adjust the board and controls for smaller screens.

Q4. How can I add sound effects?
Use the HTML <audio> element and JavaScript to play sound effects during dice rolls, token movements, or player turns.

Q5. Can I save the game progress?
Yes, you can store the game state in localStorage or sessionStorage and restore it when the player returns.

Q6. What are the future improvements I can add?
You can enhance the game by integrating animations, adding AI for single-player mode, customizing board themes, or enabling social sharing of game results.

Also Read

Artificial intelligence and machine learning examples for students

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top