Coding Education Javascript STEM

Creating Magic 8 Ball Game in JavaScript

I’ll continue with the Magic 8 ball theme in this coding series. Previously, I posted a fun implementation in Scratch here. If you’re not familiar with it, that’s the best place to start as it has visual aspects and a video clip.

This time, I’ll implement the same concept in JavaScript. However, because I’m tired I’m not going to spend too much time on the bells-and-whistles here…besides, these are NOT programming courses, but ideas that inspire your own thoughts and creativity. So, I’ll leave plenty of room for improvement but will offer up a functioning application.

Look for implementation in other languages in my posts here.

Gameplay: Open this page in any browser to try it out. To keep things simple the source (html, script, css) are all in one single source file. Also, deliberately left out much of graphics. You can even ignore the opacity attributes and animations in the code which are not necessary for the game logic.

Source Code: The page link above has the full source.

Explanation: I create an array of strings with the possible responses from the Magic 8 ball in a variable called answers. I define some HTML elements for the question input and the answer to appear. Similarly as with Scratch implementation, we get a random index to the array to retrieve a string/response/answer. Using DIV element, we can show/hide the answer “field” as needed for esthetics.

Soon, I’ll demonstrate the same app written in Python and C/C++.  Just look for them here if you’re interested.


Leave a Reply

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

Back To Top