Slot-Machine-Game Introduce the Project:
☐ Intro your game by paraphrasing the README.
Demonstrate the Project:
☐ Launch the game by clicking the link in the README.
☐ Play the game! If necessary, manipulate the values of variables in the console to ensure a quick win or loss.
☐ https://tatcn8.github.io/Slot-Machine-Photos/
Show/discuss your code:
☐ Briefly show the HTML & CSS.
☐ Show the JavaScript and discuss your favorite function.
☐ MY FAVORITE FUNCTION: is the pullbutton/slidebar transitionend event listener, it's so simple and clean looking, even though ALOT (i.e. everything) happens when it is called :)
Share the experience:
☐ What was your biggest challenge?
☐ MY BIGGEST CHALLENGE: My Biggest challenge was getting the timeouts to work properly, and calling the lotteryfunction after the final random photo generated. Was REALLY buggy before that. Getting the scoreboard to be styled properly was not easy either.
☐ What are your key learnings/takeaways?
☐ MY TAKEAWAY: I just can't believe I actually built something that actually works lol. Probably the biggest lesson/takeway for me was how to use 'display none' to hide a div, thus allowing things to look alot better than using style.opacity = 0...I also got alot more comfortable with building a HTML file (multiple divs, etc) and then styling them by adding classes (beginner stuff, I know...but hey, I am a beginner!)
Q & A + Feedback
**SLOT-LAND GAME INTRODUCTION: My game is called "Slot-Land" and it is a slot machine game. When the user clicks the "pull" button, a slide bar moves across the screen which triggers 3 random photos (there are 6 total) to generate. If all three photos are equal to each other, then the tokens are incremented by 2000 and the game is over. If two consecutive photos are equal (i.e. the first and second, or second and third) a "jackpot!" message appears, and tokens are incremented by 250 and play continues. If neither of the above conditions are satisfied, a "Try Again!" message appears and tokens are decremented by 100. When score is zero, the game is over and you lose. When the score reaches 2000, the game is over and you win.
**SCREENSHOTS: ☐ Initial screen
**TECHNOLOGIES USED: The game is basically a simple indexHTML file, styled with CSS, and made functional by JavaScript. Note: I thought about adding bootstrap, but since this is our first project, I thought it would be cool to have at least one app in my portfolio that was just simply HTML, CSS, and JS.
**GETTING STARTED: LINK TO THE GAME AND INSTRUCTIONS: Here is the link to the game: https://tatcn8.github.io/Slot-Machine-Photos/ Here are my instructions....HAVE FUN! :)
**NEXT STEPS: It could still be styled up a little "sexier" i.e. cooler fonts, an actual lever instead of a circle button, and also would like to a sound/noise when the button is clicked and the images are generating. Could create a function that allows 25 clicks, and then logs the highest score after 25 clicks. Could create "levels" where the odds of reaching 2000 tokens are slimmer and slimmer on each level.