Creating a Simple "Bat Ball Stump" Game Using JavaScript

Hello everyone!

I'm excited to share a small project I recently worked on: a fun and interactive game called "Bat Ball Stump". It's a simple game that I implemented using basic HTML, CSS, and JavaScript. If you are interested in web development or just want to try out a new project, this might be a great starting point!

The Idea Behind the Game

The "Bat Ball Stump" game is similar to the classic "Rock, Paper, Scissors" game. The rules are straightforward:

Bat beats Ball
Ball beats Stump
Stump beats Bat

The Code

Let's dive into the code and see how it all works.

HTML

The HTML structure is quite simple. We have a title, three buttons for the user to make a choice, and a script tag where our JavaScript code will reside.

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bat Ball Stump Game</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Bat Ball Stump Game</h1>
    <button onclick="playGame('bat')">Bat</button>
    <button onclick="playGame('ball')">Ball</button>
    <button onclick="playGame('stump')">Stump</button>
    <script src="script.js"></script>
</body>
</html>

CSS

The CSS is minimal, just enough to center-align the content:

cssCopy codebody {
    text-align: center;
}

JavaScript

Here’s where the magic happens. The JavaScript code includes functions to handle the game logic and determine the outcome of each round.

javascriptCopy codefunction playGame(userChoice) {
    let computerChoice = getComputerChoice();
    console.log(`User chose ${userChoice}`);
    console.log(`Computer chose ${computerChoice}`);
    if (computerChoice === userChoice) {
        console.log('It\'s a tie!');
    }
    else if (isWinningChoice(userChoice, computerChoice)) {
        console.log('User won!');
    }
    else {
        console.log('Computer won!');
    }
}

function getComputerChoice() {
    let randomNumber = Math.random() * 3;
    let computerChoice;
    if (randomNumber > 0 && randomNumber <= 1) {
        computerChoice = 'bat';
    }
    else if (randomNumber > 1 && randomNumber <= 2) {
        computerChoice = 'ball';
    }
    else {
        computerChoice = 'stump';
    }
    return computerChoice;
}

function isWinningChoice(userChoice, computerChoice) {
    if (userChoice === 'bat' && computerChoice === 'ball') {
        return true;
    }
    else if (userChoice === 'ball' && computerChoice === 'stump') {
        return true;
    }
    else if (userChoice === 'stump' && computerChoice === 'bat') {
        return true;
    }
    else {
        return false;
    }
}

How It Works

User Choice: The user selects one of the three options: Bat, Ball, or Stump.
Computer Choice: The computer randomly selects one of the three options.
Determining the Winner: The game checks if the user's choice beats the computer's choice based on predefined rules.
Displaying the Result: The result is logged in the console (this can be enhanced to display on the web page).

Future Enhancements

While this basic version logs results to the console, there are numerous ways to enhance the game:

Display the results directly on the webpage.
Add animations and sound effects for a more engaging experience.
Implement a scoring system to keep track of the user's and computer's wins.
Make the game mobile-friendly with responsive design.

Conclusion

This project was a fun way to practice and improve my JavaScript skills. I encourage you all to try it out, tweak the code, and add your own features. It's a great way to learn and get more comfortable with web development.

Feel free to reach out if you have any questions or need any help with the code. Happy coding!

Posted on LinkedIn by [Krish Gupta]

View the project on GitHub (https://github.com/Krish9006/html-css-project)

Thank you for reading! Please like, comment, and share if you found this post helpful.

#WebDevelopment #JavaScript #Coding #BeginnerProjects #HTML #CSS #LinkedInLearning #CodeNewbie