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.

Create Magic Eight Ball Game in HTML CSS & JavaScript

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

Similar Reads

Preview Image:

...

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

,

, , 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()....

Contact Us