CodePen Embed - Code dump


<html lang="en">
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

        <script defer src="Games.js"></script>
        <link rel="stylesheet" href="Games.css" />
        <meta charset="UTF-8" />
        <meta name="description" content="Try out free games" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>games</title>
    </head>
    <body>
        <div class="Character">
            <div class="Owner">
                <img class="Image" src="Images/Bubble.jpg" />
            </div>
        </div>

        <div class="Contain">
            <div class="TitleCard hide"></div>
            <div class="TheCards hide">Cards:</div>
            <div class="TheResult hide">Sum:</div>
            <div class="TheEnd hide">Status:</div>
            <div class="CardDeck"></div>
            <div class="ForButton">
                <button class="TheButton"></button>
                <div class="Intro"></div>
            </div>
        </div>
    </body>
</html>

body {
    max-width: 800px;
    margin: auto;
}

.Owner {
}

.Image {
    animation-fill-mode: forwards;
    height: 200px;
    margin-bottom: 30px;
    position: absolute;
    background-repeat: repeat;
}

class Dealer {
    constructor() {
        this.animatio = gsap.from(".Owner", {
            opacity: -1,

            duration: 3,
            onComplete: Deal,
            callbackScope: this,
        });
        this.message = "Greetings!";
        function Deal() {}
    }
}

class chat {
    constructor() {
        this.animate = gsap.to(".Image", {
            y: "-50px",
            x: "300px",

            onComplete: Card,
            callbackScope: this,
        });

        this.msg = "welcome";

        function Card() {}
    }
}
let c = new chat();

let f = new Dealer();

//===============Chat Bubble=================================================
let Owner = document.querySelector(".Owner");
let Character = document.querySelector(".Character");
let Chat = document.querySelector(".Image");

//==============Dealer picture==============================================
//let Owner = document.querySelector(".Owner");
Owner.classList.add("Owner");
ForOwner(Owner);
function ForOwner(a) {
    a.style.backgroundImage = "url(Images/Dealer.jpg)";
    a.style.minHeight = "300px";
    a.style.backgroundRepeat = "no-repeat";
    a.style.backgroundPosition = "center";
    a.style.margin = "20px";
}

//-------------Test for BlackJack---------------------------

let container = document.querySelector(".Contain");
container.style.margin = "20px";
container.style.border = "solid";
container.style.backgroundImage = "url(Images/BlackJack.jpg)";

let TitleCard = document.querySelector(".TitleCard");

//============== TItle: BlackJack ===========================
ForTitle(TitleCard);

function ForTitle(A) {
    A.innerText = "BlackJack";
    A.style.color = "Purple";
    A.style.textAlign = "center";
    A.style.fontSize = "30px";
    A.style.display = "none";
}
//===========================================================

//=============FOR CARDS=====================================
let TheCards = document.querySelector(".TheCards");

ForCards(TheCards);

function ForCards(A) {
    A.style.color = "white";
    A.style.textAlign = "center";
    A.style.fontSize = "20px";
    A.style.margin = "10px";
    A.style.display = "none";
}
//============================================================

//============THE SUM=========================================
let TheResult = document.querySelector(".TheResult");
let CardDeck = document.querySelector(".CardDeck");

ForResult(TheResult);

function ForResult(A) {
    A.style.color = "white";
    A.style.textAlign = "center";
    A.style.fontSize = "20px";
    A.style.margin = "10px";
    A.style.display = "none";
}

ForCard(CardDeck);

function ForCard(A) {
    A.style.backgroundRepeat = "no-repeat";
    A.style.height = "75px";
    A.style.width = "50px";
    A.style.border = "solid";
    A.style.display = "none";
    A.style.marginTop = "30px";

    A.style.marginLeft = "20px";
    A.style.backgroundImage = "url(Images/Deck.jpg)";
}
//============================================================

//==================THE STATUS================================
let TheStatus = document.querySelector(".TheEnd");

ForStatus(TheStatus);

function ForStatus(A) {
    A.style.color = "white";
    A.style.textAlign = "center";
    A.style.fontSize = "20px";
    A.style.display = "none";
}

//=====================================================================

//==========================FOR BUTTON===========================================
let ContainerForButton = document.querySelector(".ForButton");

ForContainer(ContainerForButton);

function ForContainer(A) {
    A.style.display = "Flex";
    A.style.justifyContent = "center";
    A.style.height = "100px";
    A.style.alignItems = "center";
}

let TestButton = document.querySelector(".TheButton");

ForTestButton(TestButton);

function ForTestButton(A) {
    A.style.margin = "10px";
    A.innerText = "Start Game";
    A.style.color = "green";
}

let Intro = document.querySelector(".Intro");

ForIntro(Intro);

function ForIntro(A) {
    A.innerText = "Want to play BlackJack?";
    A.style.margin = "10px";
    A.style.color = "white";
    A.style.fontSize = "20px";
}

// =======================STARTING THE GAME========================================
TestButton.addEventListener("click", Test2);

let CreateButton = document.createElement("button");
let ParentForCards = document.createElement("div");
let ChildForCards = document.createElement("div");

function Test2() {
    ContainerForButton.append(CreateButton);
    ContainerForButton.append(ParentForCards);
    ParentForCards.append(ChildForCards);
    ChildForCards.classList.add("Card");
    ParentForCards.classList.add("GameCards");

    ForParent(ParentForCards);

    function ForParent(A) {
        A.style.border = "flex";
        A.style.margin = "10px";
        A.style.border = "solid";
        A.style.padding = "10px";
        A.style.height = "80px";
        A.style.width = "50px";
        A.style.backgroundrepeat = "no-repeat";
    }

    ForCreateButton(CreateButton);

    function ForCreateButton(A) {
        A.style.color = "blue";
        A.innerText = "Draw a Card";
    }

    Intro.style.display = "none";
    TestButton.style.display = "none";
    ContainerForButton.style.border = "solid";
    ContainerForButton.style.justifyContent = "flex-start";

    //Title
    TitleCard.style.display = "block";
    //Cards
    TheCards.style.display = "block";
    //Sum
    TheResult.style.display = "block";
    //CardDecks
    CardDeck.style.display = "block";
    //Status
    TheStatus.style.display = "Block";
}
//================================================================

//========================FOR "DRAW A CARD" BUTTON========================================
CreateButton.addEventListener("click", Test3);

function Test3() {
    let Random = Math.floor(Math.random() * 3);

    if (Random === 2) {
        CreateButton.style.color = "blue";
        ChildForCards.style.backgroundImage = "url(Images/TwoCard.jpg)";
        ChildForCards.style.height = "75px";
        ChildForCards.style.width = "45px";
        ChildForCards.style.margin = "10px";

        gsap.from(".Card", {
            duration: 1,
            y: "-100px",
            x: "-100px",
        });
    }
    /*if (Random === 3) {
        CreateButton.style.color = "yellow";
        ChildForCards.style.backgroundImage = "url(Images/ThirdCard.jpg)";
        ChildForCards.style.height = "75px";
        ChildForCards.style.width = "45px";
    }*/
    if (Random === 4) {
        CreateButton.style.color = "lightBlue";
    }
    if (Random === 5) {
        CreateButton.style.color = "purple";
    }
    if (Random === 6) {
        CreateButton.style.color = "black";
    }
    if (Random === 7) {
        CreateButton.style.color = "orange";
    }
    if (Random === 8) {
        CreateButton.style.color = "brown";
    }
    if (Random === 9) {
        CreateButton.style.color = "lightGreen";
    }
    if (Random === 10) {
        CreateButton.style.color = "lightpurple";
    }
}

Run Pen

This Pen is owned by Angel on CodePen.

See more by @Growly on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.