JavaScript Tutorial – Create a Card Game

By freeCodeCamp.org
Published: Dec 14, 2022

“
Improve your JavaScript skills by creating a basic card game with HTML and CSS.

This tutorial not only covers creating a basic card game using JavaScript
but also:
• How to create dynamic user interactive code using vanilla JavaScript
• Creating some animation effects
• Responsive layout design using CSS grid, CSS FlexBox and media queries
• How to dynamically change the positions of grid cells, so as to randomize the positions of the cards contained in a css grid using JavaScript,
• localStorage functionality
• And much More…

Code: https://github.com/GavinLonDigital/HuntTheAceJSGame

Gavin Lon created this tutorial. Check out his channel: @GavinLon

Contents
• (0:00:00) Introduction
• (0:05:26) Getting Started
• (0:07:00) Live Server Extension
• (0:09:50) Create Cards – HTML
• (0:14:44) Create the Game Play Grid
• (0:19:55) Create Cards Dynamically – JS Code
• (0:28:46) Initialise Card Positions
• (0:34:39) Load Game and Start Game
• (0:38:43) Stack Cards
• (0:41:53) Flip Cards
• (0:45:14) Shuffle Cards
• (0:49:28) Deal Cards
• (0:54:37) Choose Card
• (1:16:56) Styling and Layout
• (1:24:28) Animation
• (1:32:39) Responsive Layout
• (1:36:43) Local Storage

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…

[READ MORE]

”