JavaScript Tutorial - Let's Create a Card Game

Опубликовано: 06 Октябрь 2024
на канале: Gavin Lon

8,658

181

♠️ In this JavaScript tutorial we create a basic card game.

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 randomise the positions of the cards contained in a css grid using JavaScript,
-localStorage functionality
And much More…

📜 Code Created in this Tutorial ♠️
https://github.com/GavinLonDigital/Hu...

🕐 Tutorial Time Indexes
-----------------------------------------
00:00:00 - Introduction
00:03:41 - Getting Started
00:05:15 - Live Server Extension
00:08:05 - Create Cards - HTML
00:12:59 - Create the Game Play Grid
00:18:10 - Create Cards Dynamically - JS Code
00:27:01 - Initialise Card Positions
00:32:54 - Load Game and Start Game
00:36:58 - Stack Cards
00:40:08 - Flip Cards
00:43:29 - Shuffle Cards
00:47:43 - Deal Cards
00:52:52 - Choose Card
01:15:11 - Styling and Layout
01:22:43 - Animation
01:30:54 - Responsive Layout
01:34:58 - Local Storage

*********Brilliant**********
The first 200 people to sign up for an Annual Subscription
using the link below will get 20% off
https://brilliant.sjv.io/ZdYgBz

Support the Channel :)
------------------------------------
Buy me a Coffee ☕️
https://www.buymeacoffee.com/GavinLon

PayPal
https://www.paypal.com/paypalme/GavinLon

BitCoin
12JZYMiRq5YRDN5R5zuyYt7jMN8eTpkgns

Additional
----------------
Live Server Extension
https://marketplace.visualstudio.com/...

Visual Studio Code
https://code.visualstudio.com

Using backtick characters in JavaScript (string interpolation and Template literals)
https://developer.mozilla.org/en-US/d...

Free Courses
----------------------
Blazor (Webassembly) Shopping Cart Application full playlist
   • Blazor (WebAssembly) and Web API on ....

Full playlist - Let's Build an ASP .NET Core MVC Web Application on .Net 5
   • Part 1 - Overview - Let's Build an AS...

Full playlist - Advanced C# Course
   • Introduction - Advanced C# Tutorial (...

Full playlist - C# for Beginners Course
   • C# for Beginners - Part 1 - Introduct...

A video on .NET 6 created by this channel
   • .NET 6 (.NET Framework, .NET Core, an...

C# LINQ Video Series
-----------------------------------
   • C# LINQ (Part 1 - Introduction) - Adv...

C# Delegates Video Series
-------------------------------------------
   • C# Delegates (Part 1 - Introduction) ...

My Top 10 Reasons to Learn C# in 2022
   • My Top 10 Reasons to Learn C# in 2022

C# Asynchronous Programming Video Series
   • C# Asynchronous Programming (Part 1 -...