Blackjack Game
Tags: html, css, javascript
Published: 2023-06-21 14:46:13

 

## How to create a blackjack game

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1iwhkhj0lb5t2qx5uig.PNG)

- **To create a blackjack game with html css and javaScript:**

First of all create a folder which you should name blackjack so as to be easy for you to find. Create three files in it save each as index.html, style.css and index.js respectively and open the files with your text editor.

- On the  html file, if you are using vscode just click on the exclamation mark and press enter, vscode will load the basic html tags for you which looks like this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/md1qg78ur0pcyekpi570.png)
You're good to go now change the title from document to **Blackjack** and link the html file to the css file then go to the body tag and create one h1 tag, in the tag type Blackjack below the h1 tag add three p tags, give the first p tag and id of **message-el** the second p tag an id of **cards-el** and the third p tag an id of **sum-el**. The text in the first p tag is **Want to play a round**, the second tag **Cards:** and the third tag **Sum:**.
 

- Now add two button tags which will be the **Start Game** and **New Game** button give the Start Game an onclick of **startGame()** and the New Game an onclick of **newGame()**. _Lastly_ add two more tags a p tag and the script tag which will link you to the javaScript file, give the p tag an id of **player-el** and the script tag src of **index.js**. Your html file should look like this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5svy69v6ttqnfqvhsgl3.png)

- **On the css file**
You're only styling four tags. The whole body, the h1 tag , button-el, and the button tag.

1. **Start by styling the body tag first**
Set the font to your desired font, the background image you like to use, set the background-size to cover, background-position to center and background-repeat to no-repeat. text-align to center this will make everything in the blackjack game to be at the center of the page, color and font-weight to white and bold respectively.  

2. **The h1 tag**
The only thing to do here is to change the color. You can use any color you want but I will be using goldenrod

3. **message-el** 
Set the font style and font size to italic and 22px respectively

4. **The button tag**
Give it a background color, width of 150px, border of 0px solid, padding top and bottom to 5px each, font weight to bold, border-radius to 2px, margin-bottom to 4px. Your css file should look like the codes in the image below.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm2bnsjubbz2muxt9hac.png)


- **Lastly on the index.js file.**

1. **The first step is to use the let key.** 
Set the card to non [] for now, the sum to zero, let hasBlackJack and isAlive to false and true respectively, message to "" since there is no message yet, player name and chips to whalez and 150. Then **let messageEl = document.getElementById("message-el"), let sumEl = document.querySelector("#sum-el"), let cardEl = document.getElementById("card-el"), let playerEl = document.getElementById("player-el"), playerEl.textContent = player.name + ": $" + player.chips.** 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykzh6mtbijtevzt7t7ka.png)_**Note this are the default settings that is you're telling javaScript to carry on this operation before either of the buttons were clicked**_


- Before you give start game and and new game function you will need random numbers to make the blackjack game more fun to play. To get random number from 1 to 13 on javaScript use _**Math.floor( Math.random() * 13) + 1**_ 
 

- Now create a get random card **function**, in it **let random =  Math.floor( Math.random() * 13) + 1**, use the **if** key so that if random number is greater than **10** it should **return 10**. Then use the **else if** key so as to **return 11** when random number is equal to **1** use **else** key to **return random number** if random number is not greater than **10** and not equal to **11**. 

- **Next Thing to do is to have another function which is render game.**
 
This will tell javaScript what it should do when sum is less than 20 or equal to 20, what it should do when sum is equal to 21 and what it should do when sum is more than 21.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/loygyeai5vvpu6kgnbnp.png)

- **Start Game function**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ywkbzucfp1jg4z90fl1.png)

- **New Game function**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4zp1wty9kgwgwee6eck.png)

_**The link to Blackjack Game**_
    https://adeyemoade.github.io/Black-jack-game/