JavaScript HTML Game from Scratch Blackjack

Name: JavaScript HTML Game from Scratch Blackjack
Rating: 4.4 (130 reviews)

Learn how to create a web application from scratch. Apply JavaScript to HTML and CSS to build a Blackjack application

Created byLaurence Svekis

Last updated 11/2024

English

What you'll learn

Use JavaScript with HTML and CSS together
Create a Blackjack game from scratch
Apply logic and build a web based game using HTML, CSS and JavaScript

Course content

5 sections • 54 lectures • 4h 54m total length

JavaScript game introduction4:29
Course Resources2:35
Discover tools for building the JavaScript blackjack game from scratch: a code editor, Chrome and its dev tools, and a local index.html workflow to test and render in the browser.
JavaScript Creating Random Numbers4:25
Learn to generate random numbers in JavaScript with Math.random and Math.floor, converting decimals to integers to yield 1–100 and 1–52 card deck indices.
Creating a deck of Cards JavaScript5:00
Create a full 52-card deck by defining suits and ranks, looping through them, building cards, and preparing to pick a random card for display.
Source Code loops and random0:06
Output special Characters JavaScript HTML CSS3:07
Output content into a web page by selecting an element with getElementById, updating innerHTML to display a deck of cards with special characters, and apply font styling.
Adding Color to Characters ternary operator JavaScript4:56
Source Code0:21
How to generate a random card value using JavaScript8:41
Create a card object with suit, icon, background color, and card number, compute card values (ace as 1, face cards as 10), generate random cards for a blackjack game.
Source Code for random card values0:28

Creating a game Start JavaScript3:06
Shuffle Array values random order JavaScript6:54
Deal the cards setup player and dealer JavaScript Loop8:05
Output Dealer and Players Hand of cards JavaScript5:36
Source Code deal out cards0:50
Template for a Card CSS7:48
Using CSS to create a playing card7:20
Output Styled Cards into Gameplay JavaScript CSS7:37
Source Code output styled cards1:16
CSS JavaScript Cover Dealer Card5:31
Hide the dealer's first card with a cover element that matches card size and positioning, then implement blackjack flow with hit, hold, or double as the dealer draws to 17.
Adding gameplay elements HTML11:17
Add blackjack gameplay elements in HTML by implementing betting, a deal button, and player actions (hit, hold, double) with max bets and dynamic value displays for dealer and player.
Applying Styling CSS to buttons and updating game elements9:57
Hide buttons start game JavaScript3:08
Source Code1:51
Create next options for player JavaScript8:30
Player actions JavaScript5:53
Create player values and interactions JavaScript11:47
Implement player value calculation and interactions for a JavaScript blackjack game, adding cards on hit, handling hold and double, and updating totals with ace adjustments.
Dealer Logic JavaScript play the game9:42
Blackjack values and calculations JavaScript6:34
Determine who won adjust values JavaScript10:09
Working prototype source code2:52

Gameplay adjustments and tweaks JavaScript7:07
User styling and dashboard design CSS HTML4:55
Setting click event JavaScript3:03
Wire a max bet button to the max bet function, update the display using document.getElementById, show the dollar value, and validate input to prevent oversized bets.
Limit min max for input field values JavaScript onchange event3:09
Apply a JavaScript onchange event listener to constrain an input field between zero and available dollars, updating the displayed value and change message to ensure fair blackjack gameplay.
Fix button tweak double JavaScript6:39
Testing and tweaks to debug application JavaScript9:57
Final test run through of gameplay4:03

Game instructions and game play outline4:09
Explore the blackjack game built with JavaScript and HTML, including deal logic, betting, hit/hold/double actions, dealer versus player play, and a code review that tightens the source with array-based cards.
Clean up source code final tweaks JavaScript7:17
HTML source Code index.html0:22
CSS review code3:31
CSS Source Code style.css0:41
JavaScript code review part 110:52
JavaScript Code review part 25:55
JavaScript Source Code2:12

Requirements

Basic HTML
Basic CSS
Basic JavaScript

Description

Learn how to build a playable Blackjack web based application from scratch!

Using HTML, CSS and JavaScript this course will show you how to create a game from scratch. One of the best ways to learn how to use JavaScript is to apply it to projects. This course show you the steps and process from a blank file to building out the entire game.

This course is designed for beginners with some basic JavaScript, HTML and CSS experience required. We will be reviewing only the JavaScript functionality required to build the game and demonstrating how to apply the code. This course does not cover HTML, CSS and JavaScript in their entirety but covers the use of them in relation to building a game.

Start with the basics of what is needed, apply logic and build out a working web application. Test your application, tweak fine tune and get it working as designed.

Start off building a deck of cards in JavaScript
Learn how to generate values of cards to use within your application.
Prepare to build the game. Define the game rules and what you need in order to get that functionality.
Learn how to build a playing card visually with CSS
Create the game play using JavaScript applying logic
Add player actions and decision points
create the logic for the dealer
Put it all together to play Blackjack

Source Code is included, step by step instruction to demonstration how to build an application.

Taught by an instructor with over 18 years of web development experience.

I'm here to help you learn how to write JavaScript and ready to answer any questions you may have.

This course showcases how to build a fun interactive application. When you are ready

Who this course is for:

Web developers
Web application developers
Anyone who wants to learn how to apply JavaScript
Anyone who wants to Build a web based game from scratch

JavaScript HTML Game from Scratch Blackjack

What you'll learn

Explore related topics

Course content

Introduction to building a web based game10 lectures • 34min

Creating the game21 lectures • 2hr 16min

Code Tweaks and fine tuning JavaScript HTML CSS7 lectures • 39min

Source Code review and exploration8 lectures • 35min

Bonus Section8 lectures • 51min

Requirements

Description

Who this course is for: