This project was inspired by the old fortune teller machines that gives you a random fortune for a quarter.
View Live Demo
Table of Contents
For this project I used Vanilla JS so I could fully master and understand what it has to offer, I created this based off of the real Fortune Teller machines you would usually find in an older arcade. Using Zoltar which originated in the movie "Big" as the face of the project.
I then manipulate the DOM to place a random fortune after Zoltar has spoken wisdom, which is randomized and played using Howler The random fortunes come from an array and generates a unique set of lucky numbers for each fortune.
- JavaScript
- CSS
I create a new fortune card by manipulating DOM and adding in new div's every time the script runs. For information on the design go to Fortune Card Design
For the fortunes I store a long array of fortunes (actual fortunes I got from a Zoltar desk toy, and some that I've gotten from a real machine), and get a randomNumber from the length of the state array, I then return the random fortune into the body of the new generated card.
6 Lucky Numbers need to be generated with each card, so I got an array of random numbers from 1-100 and then styled the numbers to be presentable and placed it in a string.
Example: [8,16,22,11,2,1] => "Your Lucky Numbers: 08, 16, 22, 11, 02, 01."
It then gets returned into the footer of the new generated card.
With sounds I needed a predictable way to run events when the audio starts/stops. So I chose to use Howler which is a JS library that helps with that and more.
The sounds go in order from Coin Slot, Random Phrase, to Ticket Dispense. These sounds trigger each other by playing after each one ends, and adding and removing animation class names that are needed for that phase in the audio.
For example, when the Coin Slot sound ends Zoltar's machine turns on, and so does the Random Phrase. After all of that is done it turns itself off and Dispenses Ticket with sound.
At the end it resets its state and sets up for the next random fortune.
For making Zoltar I wanted to use all CSS, but allowed myself to use an image for the main Image.
I cut the Zoltar image into 3 layers. (the body, and both hands).
I cut them this way so I can animate his right hand with CSS over the crystal ball and place his other hand over a CSS made table using z-index to create more depth in the 2D image.
For the positioning of this project I am using flex-box and relative and absolute positioning.
For the text I used a JS library to help with the curve that the fortune-telling machines usually have. I Chose CircleType which is a text curving library to solve this issue.
For the lamps I created 3 divs and shaped them with CSS into what resembles a lamp, I then created another div with a yellow box-shadow under the lamps that fades in and out with the color change in the lamp shades.
The CSS animation changes the background color of the lamp shades, as well as the background lights opacity changing with the shades.
The crystal ball is made from two divs and shaped to resemble a crystal ball, it then "turns on" with the rest of the decor, when it is on it cycles through colors with a CSS animation that cycles through a set color scheme.
When Zoltar is done talking/hasn't started talking it will stay white.
For the card I used pure CSS and added in web-fonts to get as close as possible to the classic look of the card
Fonts used:
- Reikna (for the headers)
- Enchanted Land (for the body)
The fortune card contents are positioned with flex-box.
Open Zoltar when you're facing troubles, open Zoltar when you're curious. Get fortunes (without the quarters!)
John Farina - [email protected]
My Website: johnfarina.co
Project Link: github.com/john-farina/Zoltar