\\n\\n\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"7ng8m\",\"text\":\" \",\"type\":\"atomic\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[{\"offset\":0,\"length\":1,\"key\":2}],\"data\":{}},{\"key\":\"7qqcu\",\"text\":\"\\nThe above code will create a simple HTML page and add a division with the title as the slot machine.\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"fnvro\",\"text\":\"The divisions will contain 3 reels and a spin button and also we include an audio file to be played after each spin to make our game interactive.\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"819o3\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"3r8oq\",\"text\":\"Create a file called 'styles.css' and externally link it to the main HTML file as \",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[{\"offset\":21,\"length\":11,\"style\":\"BOLD\"}],\"entityRanges\":[],\"data\":{}},{\"key\":\"3m4dr\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"949ne\",\"text\":\"We have already done that in the HTML file!\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"2kj7u\",\"text\":\"Add the style code in the CSS file thus created.\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"22rst\",\"text\":\" \",\"type\":\"atomic\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[{\"offset\":0,\"length\":1,\"key\":3}],\"data\":{}},{\"key\":\"a9omq\",\"text\":\"body, html {\\n height: 100%;\\n margin: 0;\\n padding: 0;\\n  }\\n \\n .slot-machine {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n background-image: url('background.avif');\\n background-size: cover;\\n background-position: center;\\n height: 100vh;\\n  }\\n \\n .reel {\\n width: 200px;\\n height: 250px;\\n margin: 10px;\\n background-image: url('the\\\\ gamblers\\\\ logo.png');\\n background-position: center;\\n background-size: cover;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n  }\\n \\n .reel img {\\n width: 100%;\\n height: 100%;\\n object-fit: contain;\\n  }\\n \\n #spinButton {\\n display: block;\\n margin-top: 20px;\\n background-color: #f44336;\\n color: white;\\n border: none;\\n padding: 10px 20px;\\n font-size: 16px;\\n cursor: pointer;\\n transition: background-color 0.3s ease;\\n  }\\n \\n #spinButton:hover {\\n background-color: #c62828;\\n  }\\n \\n\\n @keyframes burstAnimation {\\n    0% {\\n transform: scale(1);\\n opacity: 1;\\n    }\\n    100% {\\n transform: scale(2);\\n opacity: 0;\\n    }\\n  }\\n .burst {\\n animation-name: burstAnimation;\\n animation-duration: 1s;\\n animation-fill-mode: forwards;\\n  }\\n .logo {\\n position: absolute;\\n top: 10px;\\n left: 10px;\\n  }\\n \\n .logo img {\\n width: 100px; /* Adjust the width and height as needed */\\n height: 100px;\\n  }\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"b6hqo\",\"text\":\" \",\"type\":\"atomic\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[{\"offset\":0,\"length\":1,\"key\":4}],\"data\":{}},{\"key\":\"ds9eq\",\"text\":\"This will style our page something like this!\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"for0a\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"dmmaf\",\"text\":\" \",\"type\":\"atomic\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[{\"offset\":0,\"length\":1,\"key\":5}],\"data\":{}},{\"key\":\"7bd9c\",\"text\":\"Now let's add the logic in the 'script.js' file which is also externally linked with our main HTML file by adding this line\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[{\"offset\":32,\"length\":9,\"style\":\"BOLD\"}],\"entityRanges\":[],\"data\":{}},{\"key\":\"b0e3p\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"7og3l\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"9f8g9\",\"text\":\"Update this logic in the javascript file:\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"anl6q\",\"text\":\" \",\"type\":\"atomic\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[{\"offset\":0,\"length\":1,\"key\":6}],\"data\":{}},{\"key\":\"bk8h3\",\"text\":\"const symbols = ['apple.png', 'mango.png', 'strawberry.png'];\\nconst reel1 = document.getElementById('reel1');\\nconst reel2 = document.getElementById('reel2');\\nconst reel3 = document.getElementById('reel3');\\nconst themeSong = document.getElementById('themeSong');\\n\\nlet spinning = false;\\n\\nfunction getRandomSymbol() {\\n const randomIndex = Math.floor(Math.random() * symbols.length);\\n return symbols[randomIndex];\\n}\\n\\nfunction spin() {\\n if (spinning) {\\n return; // Don't allow spinning while already spinning\\n  }\\n \\n spinning = true;\\n\\n const spins = 10; // Number of spins\\n const duration = 5000; // Duration of each spin in milliseconds\\n const interval = duration / spins;\\n\\n let spinCount = 0;\\n let intervalId;\\n\\n intervalId = setInterval(() => {\\n reel1.style.backgroundImage = `url(${getRandomSymbol()})`;\\n reel2.style.backgroundImage = `url(${getRandomSymbol()})`;\\n reel3.style.backgroundImage = `url(${getRandomSymbol()})`;\\n\\n spinCount++;\\n\\n if (spinCount === spins) {\\n themeSong.play();\\n clearInterval(intervalId);\\n spinning = false;\\n\\n // Play the theme song\\n //   themeSong.play();\\n    }\\n  }, interval);\\n}\\n\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"1d1o4\",\"text\":\" \",\"type\":\"atomic\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[{\"offset\":0,\"length\":1,\"key\":7}],\"data\":{}},{\"key\":\"4tfka\",\"text\":\"The first 5 line gets our images, division details from the HTML page, and the audio we included.\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"bf3t\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"etjmu\",\"text\":\"Then we define the state of the spin as false(i.e. not spinning at all/rest) we only make this true when the user hits the spin wheel button!\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"1tc71\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"2rn4e\",\"text\":\"The images we added in the logic have been assigned symbols/ variables. Now in the next random function, we randomize the output of those symbols and display them in the reels.\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"d2v00\",\"text\":\"Now when we hit the spin the spin function and random function get called and we just have to change the state of the spin to True! (wheels are spinning now)\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"3fd9e\",\"text\":\"After a 5 sec good ol' spin the music plays and we get to see the results on screen.\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"73r9c\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"8382l\",\"text\":\"Conclusion:- \",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[{\"offset\":0,\"length\":13,\"style\":\"BOLD\"}],\"entityRanges\":[],\"data\":{}},{\"key\":\"1cvff\",\"text\":\"Congratulations! You've successfully built a casino slot machine using HTML, CSS, and JavaScript. By following this guide, you've learned the essential steps to create an interactive and engaging slot machine game. Feel free to customize and expand upon the provided code.\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[{\"offset\":267,\"length\":4,\"key\":8}],\"data\":{}},{\"key\":\"uens\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"4k3e\",\"text\":\"HAPPY GAMBLIN' MATE! \",\"type\":\"header-four\",\"depth\":0,\"inlineStyleRanges\":[{\"offset\":0,\"length\":21,\"style\":\"BOLD\"}],\"entityRanges\":[],\"data\":{}},{\"key\":\"8mvoh\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"25gp\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"ajgoi\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"8goig\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}}],\"entityMap\":{\"0\":{\"type\":\"IMAGE\",\"mutability\":\"IMMUTABLE\",\"data\":{\"src\":\"//img1.wsimg.com/isteam/ip/f78b94a8-a480-47b3-b364-47e271a98ebe/slot%20machine.jpg\",\"loading\":false,\"left\":\"0%\",\"top\":\"0%\",\"width\":\"100%\",\"height\":\"100%\",\"rotation\":\"0\",\"editedAspectRatio\":\"1\",\"filter\":\"NONE\"}},\"1\":{\"type\":\"DIVIDER\",\"mutability\":\"IMMUTABLE\",\"data\":{}},\"2\":{\"type\":\"DIVIDER\",\"mutability\":\"IMMUTABLE\",\"data\":{}},\"3\":{\"type\":\"DIVIDER\",\"mutability\":\"IMMUTABLE\",\"data\":{}},\"4\":{\"type\":\"DIVIDER\",\"mutability\":\"IMMUTABLE\",\"data\":{}},\"5\":{\"type\":\"IMAGE\",\"mutability\":\"IMMUTABLE\",\"data\":{\"src\":\"//img1.wsimg.com/isteam/ip/f78b94a8-a480-47b3-b364-47e271a98ebe/slot%20page%201.png\",\"loading\":false,\"left\":\"0%\",\"top\":\"0%\",\"width\":\"100%\",\"height\":\"100%\",\"rotation\":\"0\",\"editedAspectRatio\":\"2.1565113500597373\",\"filter\":\"NONE\"}},\"6\":{\"type\":\"DIVIDER\",\"mutability\":\"IMMUTABLE\",\"data\":{}},\"7\":{\"type\":\"DIVIDER\",\"mutability\":\"IMMUTABLE\",\"data\":{}},\"8\":{\"type\":\"LINK\",\"mutability\":\"MUTABLE\",\"data\":{\"href\":\"https://github.com/psusmit/casino-slot-machine\",\"target\":\"\"}}}}","socialSharing":{"twitter":{"enabled":true,"profile":""},"facebook":{"enabled":true}}}};
Everything Is Zero One
Home
Services
FAQs and contact us
Blogs
Everything Is Zero One
Home
Services
FAQs and contact us
Blogs
More
  • Home
  • Services
  • FAQs and contact us
  • Blogs
  • Home
  • Services
  • FAQs and contact us
  • Blogs

our BlogS

Copyright © 2023 Everything Is Zero One - All Rights Reserved.

This website uses cookies.

We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.

Accept