Build A Game With Javascript With Random Ordering - 2024

A JavaScript game course for everyone! A complete course on building a random card memory game, from scratch! LETS GO

What you'll learn

Build a fully functional random card game using pure JavaScript, HTML, JSON and CSS

Master the Fisher-Yates shuffle algorithm to randomly arrange your game cards

Create game mechanics such as card flipping and matching logic

Learn to apply 3D transformations like rotateY() to enhance visual effects in your game

Understands fragments, and how to add them to the Document Object Model (DOM)

Gain a solid understanding of JavaScript, variables, functions, and event handling

Discover how to fetch and utilize external JSON data to populate your game

Use CSS transitions and transformations to provide immediate visual feedback during gameplay, enhancing user engagement

Gain proficiency in using the Fetch API to retrieve and manipulate external data, allowing dynamic content in your game

Employ randomization techniques, such as shuffling cards, to add unpredictability and excitement to your memory card game

Understand array destructuring, ternary operators, decrement operators and more!

Requirements

A basic understanding of JavaScript, HTML and CSS would be helpful

A Mac or PC, so you can code alongside with me

Description

GAME TIME!Unleash your inner game developerBuild a fully functional memory card game, from scratchUnderstand JSON, Fetch, Fisher-Yates Algo, Animations, 3D Transformations & MoreUse pure JavaScript, HTML and CSS without libraries or modulesHands-on, interactive course designed for YOU, to take YOU through the entire process of creating a fully functional memory card game from scratchDive into complex code, made easyAre you ready for an exhilarating journey into the world of coding as we build a Random Memory Card Game using only pure HTML, CSS, and JavaScript?WHAT YOU'LL LEARNBuild a Game from the Ground Up: Forget libraries and modules! In this hands-on course, you’ll learn to craft every aspect of the game using only HTML, CSS, and JavaScript. By focusing on pure code, you'll gain a deeper understanding of how each component works together to create an engaging user experience.Master Complex Tasks: Coding can be complex, but it doesn’t have to be daunting! I’ll guide you through various methods and techniques for tackling intricate tasks. You’ll become adept at problem-solving and thinking like a developer, giving you the confidence to tackle any coding challenge that comes your way.CSS 3D Transformations: Get ready to dazzle players with stunning visuals! We’ll explore CSS 3D transformations to create an eye-catching flip effect for your cards. You’ll discover the magic of the preserve-3d property, which allows your cards to flip in style, adding depth to your game.Randomization with Fisher-Yates Algorithm: Want to keep players on their toes? Learn how to implement the Fisher-Yates random shuffle algorithm to randomize your card array. This powerful technique not only enhances gameplay but also equips you with skills applicable in various coding scenarios—think gaming, random selections, and more!Understand JSON: Unlock the potential of data handling by exploring JSON (JavaScript Object Notation). You’ll learn how to reference JSON files in your JavaScript code, making it easy to manage game data.Fetch API & Async/Await: Level up your JavaScript skills with the Fetch API! We’ll cover both traditional .then() statements and the modern async/await syntax for seamless data fetching.Track Progress with Counters & Flags: Every great game needs feedback! We’ll implement counters to track player progress and display failure images when matches aren’t made. This will help create a more engaging experience as players strive for success.Celebrate Wins with Confetti: What’s more exciting than winning? We’ll add a delightful winning effect that showers players with confetti when they complete all matches. This fun touch will make your game memorable and encourage players to come back for more!Random Matching Game MechanicsEach new game will feature a fresh set of cards, ensuring that no two games are ever the same! You’ll learn how to implement this randomness effectively, keeping gameplay exciting and unpredictable.* WHAT MAKES THIS COURSE UNIQUE? This course is not just about coding; it’s about creating an experience. By the end of our journey, you will have built a fully functional memory card game that showcases your newfound skills. Plus, you'll walk away with valuable knowledge that can be applied across various projects in your development career.Game Logic Implementation: Discover how to implement game mechanics such as card flipping, matching logic, and win/lose conditions. You'll gain practical experience in managing game states and user interactions.Data Handling: Learn how to fetch and utilize external data. You'll work with JSON data to populate your game with unique cards, enhancing your understanding of data structures.User Experience Design: Explore best practices for designing an engaging user interface. You'll implement animations, transitions, and visual feedback to create an immersive gaming experience.READY TO PLAY? Don’t miss out on this opportunity to enhance your coding skills while having fun! Join us in creating something amazing—your very own Random Memory Card Game awaits! Let’s code something spectacular together!COURSE HIGHLIGHTS? Hands-On Project: Each section includes practical exercises where you'll build components of the game step by step, culminating in a fully playable memory card game.Quizzes, Coding Exercises and Tests: I have incorporated tests, quizzes and even coding exercises to get you up to speed, fast. Expert Guidance: Benefit from personalized feedback and mentorship from me, who is passionate about teaching.I look forward to seeing you in class! Let's make learning fun—one card at a time!Clyde

Overview

Section 1: Setting up the project code

Lecture 1 Course Intro

Lecture 2 Section intro

Lecture 3 Course structure and starting code

Lecture 4 Writing the HTML

Lecture 5 Writing CSS, and explaining REM vs EM

Lecture 6 Using the CSS grid system to display the cards

Lecture 7 Defining CSS root variables

Lecture 8 More about CSS :root and naming conventions

Lecture 9 Project Files

Section 2: Populate our CSS grid with cards

Lecture 10 Section intro

Lecture 11 Create a JSON file that contains an array with card objects

Lecture 12 How to reference a JSON file from our main JavaScript file

Lecture 13 Using async/await with Fetch

Lecture 14 CORS, File Protocol, and what files a local development server can access

Lecture 15 Local Development Server

Lecture 16 Traditional Fetch and the Array.map() method

Lecture 17 Using the flatmap() function to create our cards array

Lecture 18 Using the spread syntax to create an array

Lecture 19 Elements are automatically added to the CSS grid layout

Lecture 20 How cards will be referenced in our code

Lecture 21 Directly adding cards to the DOM

Lecture 22 Using appendChild() to add our cards to the DOM

Lecture 23 What are the problems with adding items directly to the live DOM on each loop

Lecture 24 What is a document fragment?

Lecture 25 Using fragments to add cards to the live DOM

Lecture 26 Testing code and accessing the childElementCount property

Lecture 27 Styling back of the card with CSS

Lecture 28 Styling front of the card with CSS

Lecture 29 Project files

Section 3: Adding flip effect, and using the Fisher-Yates shuffle

Lecture 30 Section intro

Lecture 31 Adding the click event listener dynamically

Lecture 32 Using CSS 3D transformations to rotate our card 180 degrees on the Y-axis

Lecture 33 Setting up the shuffle function

Lecture 34 Fisher-Yates (or Knuth) shuffle algorithm

Lecture 35 Applying the Fisher-Yates shuffle to our cards array

Lecture 36 Logging an array directly in the console, logs a reference to it in memory

Lecture 37 Solving the issue by creating a shallow copy of the array using spread syntax

Lecture 38 Using the destructuring assignment to improve our code

Lecture 39 Project files

Section 4: Adding logic for matched and unmatched cards, and counters

Lecture 40 Section intro

Lecture 41 Using THIS keyword to define the first and second card

Lecture 42 Adding a flag to disallow the user to click on more than 2 cards at once

Lecture 43 Dataset property, and ternary operator in JavaScript to implement matching logic

Lecture 44 Using the setTimeout() function to define the unflipCard function

Lecture 45 Resetting our variables and cards

Lecture 46 Using removeEventListener() method, and adding a background color

Lecture 47 Precluding the user from clicking on the same card twice, and resetting flags

Lecture 48 Project Files

Section 5: Coding falling stars, and adding a losing image overlay

Lecture 49 Section intro

Lecture 50 Adding a counter for tries remaining

Lecture 51 Using the decrement operator and performing a simple IF check

Lecture 52 Creating the HTML structure to contain our losing image

Lecture 53 Using CSS position:fixed and also using the requestAnimationFrame() method

Lecture 54 Creating a falling star using JavaScript

Lecture 55 Applying CSS animations and CSS keyframes

Lecture 56 Testing code, and using the remove() method to remove stars from the DOM

Lecture 57 Using counters, setInterval and clearInterval

Lecture 58 Testing final code

Lecture 59 Applying a CSS transition to the background color of our back card

Lecture 60 Project Code

Section 6: Course Test

Section 7: Outro

Lecture 61 Outro

Any aspiring developer wishing to learn how to work with data and build real web apps,Any developer wishing to improve their JavaScript, CSS, HTML and JSON coding skills,Anyone who wishes to learn more about web app development,A developer who wishes to learn how to truly randomize data that can be used in many applications