Create Magic Eight Ball Game in HTML CSS & JavaScript

Create Magic Eight Ball Game in HTML CSS & JavaScript

Last Updated : 24 Jul, 2024

We are to assume that the person will give us a question as input and once the input question comes in, The Magic Eight ball generates a random answer to the question. We will add a feature where in case of no input the ball says, "Sorry but I can't work with that".

Preview Image:

8BallOP

How the game will work?

Firstly, We will take a question input that input will get processed by JavaScript. If no input is provided then the result will be "Sorry but I can't work with that".
If there is an input the user clicks on the ball, we will record it.
The ball will be shaken and make the number 8 on the ball disappear.
Once the shaking stops the answer appears and changes the color of the inner circle to green.
We will finally record the answer in our table and our job will be done.

Approach:

Make the basic structure of the page using HTML, with <div>, <p>, <input>, and other following tags that might be needed for the structure.
Add styling using CSS , basically adding margins and paddings to align the stuff perfectly, also properly sizing the objects, and making sure that the ball stays to a fixed size at max and a fixed size for minimum.
Then we need to make 4 animations as follows -
- Fade out animation ( To Fade out the text inside the ball before displaying answer ).
- Fade in animation ( To Fade in the text inside the ball for displaying the answer ).
- Shake animation ( To shake the ball when the person clicks it )
- Color changing animation ( To change the color of the center of the ball from white to green ).
Finally, for the JavaScript part we will store all the answers in an array and 1st answer will be stored 2 times to make that outcome twice as probable as compared to others.
We will be using Math.random() to select a random element from the answers array and send it in as an answer.
Finally we will be using setTimeout() function to control the flow of the app and control the timings for the animations. And to trigger the event when the ball is clicked we will be using addEventListener().

Example: The below code can be used to create the Eight ball game using HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
    <!-- Link to custom css -->
    <link rel="stylesheet" href="style.css" />
    <title>GFG - Magic 8 Ball</title>
</head>

<body>
    <header>
        <h1>GeeksforGeeks</h1>
        <h2>Magic 8 Ball Game</h2>
    </header>

    <main class="main">
        <div class="questionBox">
            <h3>Enter What you have in your mind!!!</h3>
            <input type="text" name="fortuneQuestion" 
                id="fortuneQuestion"
                placeholder="Enter a question here" />
        </div>
        <div id="ball">
            <div id="answer">
                <p class="answerText">8</p>
            </div>
        </div>
    </main>
    <footer class="footer">
        <table id="questionAnswerTable">
            <thead>
                <tr>
                    <th>Question</th>
                    <th>Answer</th>
                </tr>
            </thead>
            <tbody class="tableBody"></tbody>
        </table>
    </footer>
    <script src="script.js"></script>
</body>

</html>

CSS

/* Universal selector to set some styles for all elements */
* {
    margin: 0;
    padding: 0;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, 
      "Trebuchet MS", sans-serif;
}

/* Our Heading section */
header {
    margin: 6px;
    padding: 6px;
    text-align: center;
}

/* Main section box where the ball and the question is */
main {
    margin: 1svh;
    padding: 1svh;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0px 0px 4px 0px gray;
}

/* Heading inside the main section */
main h2 {
    margin: 1svh;
}

/* Question input box styling */
#fortuneQuestion {
    width: 50%;
    padding: 16px;
    margin: 2svh 1svw;
    border-radius: 12px;
    border: 1px solid #000;
    background-color: #e9e7e7;
    font-size: large;
    color: black;
}

#fortuneQuestion::placeholder {
    font-size: large;
}

/* Magic eight ball black part */
#ball {
    width: 50vw;
    height: 50vw;
    max-width: 500px;
    max-height: 500px;
    background: radial-gradient(circle, 
      rgb(78, 78, 78) 0%, black 100%);
    border-radius: 50%;
    margin: 5vw auto;
}

/* The white circle inside the Magic eight ball */
#answer {
    width: 20vw;
    height: 20vw;
    max-width: 200px;
    max-height: 200px;
    background-color: white;
    border-radius: 50%;
    position: relative;
    top: calc(50% - min(10vw, 100px));
    margin: auto;
    /* line-height: min(20vw, 200px); */
    display: flex;
    cursor: pointer;
}

/* The big 8 Text inside magic eight ball */
#answer>.answerText {
    color: black;
    font-size: min(15vw, 120px);
    margin: auto;
    padding: 1vw;
}

/* A small rotating animation whenever we hover on it */
#answer:hover {
    transform: rotate(360deg);
    transition: transform 0.3s;
}

/* Styles to be used once the answer is displayed */
#answer.answerDisplayed {
    background-color: lightgreen;
    box-shadow: inset 0px 0px 4px 0px green;
}

#answer.answerDisplayed>.answerText {
    font-size: medium;
    display: block;
    white-space: normal;
}

/* All the styling for the table that will log question ans answers */
#questionAnswerTable th {
    padding: 3svh 10vw;
    width: 100svw;
    background-color: lightgreen;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid green;
    font-size: large;
    text-align: center;
    color: black;
    box-shadow: 0px 0px 4px 0px gray;
}

#questionAnswerTable {
    border-collapse: separate;
    margin: 3vh;
    display: none;
}

#questionAnswerTable td {
    border: 1px solid green;
    padding: 1svh 10vw;
    width: 100svw;
    background-color: rgb(162, 249, 162);
    text-align: center;
    box-shadow: 0px 0px 4px 0px gray;
    white-space: normal;
}

.tableBody :nth-last-child(1)>td {
    border-radius: 0px 0px 10px 10px;
}

/* Shake animation */
@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.shake {
    animation: shake 1.5s;
    animation-iteration-count: infinite;
}

/* Fade out animation frames */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Fade in animation frames */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Color change animation frames */
@keyframes colorChange {
    0% {
        background-color: white;
        box-shadow: none;
    }

    100% {
        background-color: lightgreen;
        box-shadow: inset 0px 0px 4px 0px green;
    }
}

JavaScript

const eightBall =
    document.querySelector("main #ball");
const answerText =
    document.querySelector("#ball #answer .answerText");
const answerDiv =
    document.querySelector("#ball #answer");
const questionInput =
    document.querySelector("main .questionBox input");

const answers = [
    "Yes, definitely.",
    "Yes, definitely.",
    "It is certain.",
    "It is decidedly so.",
    "Without a doubt.",
    "You may rely on it.",
    "As I see it, yes.",
    "Most likely.",
    "Outlook good.",
    "Signs point to yes.",
    "Yes.",
    "Reply hazy, try again.",
    "Ask again later",
    "Better not tell you now.",
    "Cannot predict now.",
    "Concentrate and ask again.",
    "Don't bet on it.",
    "My reply is no.",
    "My sources say no.",
    "Outlook not so good.",
    "Very doubtful.",
];

const questionTable = 
    document.querySelector("footer #questionAnswerTable");
const tableBody = 
    document.querySelector("footer #questionAnswerTable tbody");

eightBall.addEventListener("click", () => {
    const question = questionInput.value.trim();
    let answer;
    if (question === "") {
        answer = "I can't tell with that information.";
    } else {
        const randomIndex = 
            Math.floor(Math.random() * answers.length);
        answer = answers[randomIndex];
    }
    eightBall.classList.add("shake");
    answerDiv.style.animation = "colorChange 1s";
    answerText.style.animation = "fadeOut 1s";
    setTimeout(() => {
        answerText.innerText = "";
        answerDiv.classList.add("answerDisplayed");
    }, 700);


    setTimeout(() => {
        eightBall.classList.remove("shake");
        answerText.innerText = answer;
        answerText.style.animation = "fadeIn 1s";
        setTimeout(() => {
            answerText.style.animation = "";
        }, 700);
        if (question !== "") {
            const row = document.createElement("tr");
            const questionCell = document.createElement("td");
            const answerCell = document.createElement("td");
            questionCell.textContent = question;
            answerCell.textContent = answer;
            row.appendChild(questionCell);
            row.appendChild(answerCell);
            tableBody.appendChild(row);
            questionTable.style.display = "block";
        }
    }, 1500);
});

Output:

Create Magic Eight Ball Game in HTML CSS & JavaScript

J

jagritgumber

Improve

Article Tags :

Similar Reads

Create a Math Sprint Game in HTML CSS & JavaScript

The math sprint game presents random math questions with four options. Players click the correct answer, and if correct, it's acknowledged; otherwise, an incorrect answer message is shown. A 20-second timer adds urgency, ending the game. The score (High Score) is displayed, along with buttons to sta

Create a Simon Game using HTML CSS & JavaScript

In this article, we will see how to create a Simon Game using HTML, CSS, and JavaScript. In a Simon game, if the player succeeds, the series becomes progressively longer and more complex. Once the user is unable to repeat the designated order of the series at any point, the game is over.Prerequisite

Create a snake game using HTML, CSS and JavaScript

Snake Game is a single-player game where the snake gets bigger by eating the food and tries to save itself from the boundary of the rectangle and if the snake eats their own body the game will be over.Game Rules:If the snake goes out of the boundary or eats its own body the game will be over.Prerequ

Create a Minesweeper Game using HTML CSS & JavaScript

Minesweeper is a classic puzzle game that challenges your logical thinking and deduction skills. It's a great project for developers looking to improve their front-end web development skills. In this article, we'll walk through the steps to create a Minesweeper game using HTML, CSS, and JavaScript.

Pin Ball Game using HTML CSS & JavaScript

Pinball is a classic arcade game that has been around since the 1930s. It involves the player using flippers to hit a ball around a table aiming to score points by hitting various targets and obstacles. PrerequisitesHTMLCSSJavaScriptApproachThe pinball game operates by moving a ball within a confine

Create an OTP Verification Form in HTML CSS & JavaScript

When the application is loaded, there is a button through which the user can generate the OTP. Once the user generates the OTP, the form for verification becomes visible, the user needs to enter the correct OTP that is generated. When the user enters the OTP in the input field, and if the OTP matche

Create a Coin Flip using HTML, CSS & JavaScript

We will display the styled INR coin to the user and there will be a styled button (Toss Coin). We will create the entire application structure using HTML and style the application with CSS classes and properties. Here, JavaScript will be used to manage the behavior of the Coin Flip and will be used

Simple HTML CSS and JavaScript Game

Tap-the-Geek is a simple game, in which the player has to tap the moving GeeksForGeeks logo as many times as possible to increase their score. It has three levels easy, medium, and hard. The speed of the circle will be increased from level easy to hard. I bet, it is very difficult for the players to

Whack-a-Mole Game using HTML CSS and JavaScript

Whack-A-Mole is a classic arcade-style game that combines speed and precision. The game is set in a grid of holes, and the objective is to "whack" or hit the moles that randomly pop up from these holes. In this article, we are going to create Whack-a-Mole using HTML, CSS and JavaScript.Preview Image

Design Joke Generator App in HTML CSS & JavaScript

We will go to learn how can we create a Joke generator app using HTML, CSS, and JavaScript. We will also add a feature to copy the generated joke. We will use API to fetch the jokes and will show those jokes on the screen. PrerequisitesHTMLCSSJavaScriptApproachCreate the Joke Generator Application U