Blackjack Game

#html #css #javascript

How to create a blackjack game

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.

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
On the css file
You're only styling four tags. The whole body, the h1 tag , button-el, and the button tag.

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.
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
message-el
Set the font style and font size to italic and 22px respectively
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.

Lastly on the index.js file.

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. 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.