To deepen my understanding of JavaScript, I followed a few additional courses alongside my paid education plan. One of these courses helped me to create a simple version of the casino game Blackjack. I found the game a bit too simple, so I decided to take the project a step further by upgrading the game on my own. While working on the game I found that it would be even better to build a web-based casino, and so the project was born.

I began brainstorming possible games and features to include. Naturally, Blackjack was a must, but I wanted to expand the scope. I incorporated additional games such as a slot machine, roulette, and even the classic rock, paper, scissors. To ensure the project stayed focused and manageable, I applied the Moscow methodology, setting clear priorities and defining the most essential features for the concept as a whole.

To make the casino unique, I decided to give it a cool space theme with futuristic designs for the games. For example, the playing cards would have alien-style logos, and the slot machines would feature spaceships and space fighters. I worked on the designs while coding each game, testing different ideas through trial and error to find the best look. This process helped create a fun and exciting space-themed experience for the players.

Building the casino was quite a challenge, especially since I was still getting familiar with JavaScript. However, it turned out to be a great opportunity to grow and sharpen my skills. For this project, I didn’t follow a strict structure; I mainly started by creating the basic framework and expanded from there. There’s a lot of code I’d love to showcase in its entirety, but for now, here are some aspects I focused on while working on the project.

When players first enter the casino, they are prompted to choose a username and select a profile picture. If they leave either field blank or if exceed the character limit, an error message will appear.

                    
// Anonymous input check function
const submit = document.getElementById('submit').addEventListener('click', () => {
    if(userNameInput.value === ''){
    errorMessage('Please enter a username');
    return
    } else if (userNameInput.value.length > 8){
    errorMessage('Your username cannot be more than 8 characters');
    return
    }

    if(profilePictureSelected === true){
    mainSection.style.display = "grid";
    signUpSection.style.display = "none";
    } else {
    errorMessage('Please choose a profile picture');
    return
    }

...
                    
                

After signing up successfully, user settings and credits are stored in localStorage and updated after every game. To play, players simply place a bet, press confirm, and start. While a game is in progress, players cannot switch games or tamper with the functionality. New bets can only be placed after the current game finishes and the "place new bet" button is clicked.

                    
// Anonymous function to enforce game focus by disabling all actions except playing
confirmButtonRoulette.addEventListener('click', () => {
    gameOnGoing = true;
    if(betOneRoulette.checked) {
        credits -= 1;
        rouletteDisabled();
        creditsDeposit();
        setTimeout(() => {
            startRouletteGame();
        }, animationDurationShort);
    } else if (betTwoRoulette.checked) {

...

// Function that disables bet options
function rouletteDisabled() {
    betOneRoulette.disabled = true;
    betTwoRoulette.disabled = true;
    betFiveRoulette.disabled = true;
    confirmButtonRoulette.disabled = true;  
};                    
                    
                

All games use a random-factor to ensure fair winning chances. Payouts are adjusted based on odds. For example, in roulette, if a player selects a specific number, their chances of winning are 1 in 9, so the reward is multiplied by nine.

                    
// Function to evaluate the result and award credits
function checkRouletteResult(playerChoice) {

    ...

    resultRouletteFunc();
    if (randomRouletteNumber === playerChoice) {
        bigWinAudio.play();
        messageElRoulette.textContent = 'You won big time!';
        if (betOneRoulette.checked) {
            credits += 9;
        } else if (betTwoRoulette.checked) {
            credits += 18;
        } else if (betFiveRoulette.checked) {
            credits += 45;
        };
        creditsAccumulated();
    } else {
        loseRouletteAudio.play();
        messageElRoulette.textContent = 'You lost!';
    };
    }, 3000);
    localStorage.credits = credits;
};                
                    
                

Refactoring the code was absolutely necessary, as there were sections where I had repeated lines excessively. This was far from ideal, so I decided to embrace the DRY (Don't Repeat Yourself) principle as a guiding standard. Rewriting the code became an obvious step, especially since reocurring animations could be written as functions. This quickly saved me about a hundred lines of code.

                    
// Frequently used credit timeout functions
function creditsDeposit() {
    creditsText.style.color = 'red';
    creditsText.textContent = `Total credits: ${credits} CR`;
    setTimeout(() => {
        creditsText.style.color = 'white';
        creditsText.textContent = `Total credits: ${credits} CR`;
    }, animationDurationShort)
};

function creditsAccumulated() {
    creditsText.style.color = 'green';
    creditsText.textContent = `Total credits: ${credits} CR`;
    setTimeout(() => {
        creditsText.style.color = 'white';
        creditsText.textContent = `Total credits: ${credits} CR`;
    }, animationDurationShort)
};   
                    
                

As I continue learning PHP and MySQL, I plan to enhance the casino by implementing a real-time leaderboard. This feature will dynamically update scores, replacing the current hard-coded version in use today.

Astronauts like you can enter the casino from outer space, so what are you waiting for? How many credits can you obtain?