Packt
Game Time 2024 – Build a JavaScript Game with Random Order
Packt

Game Time 2024 – Build a JavaScript Game with Random Order

Included with Coursera Plus

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

6 hours to complete
3 weeks at 2 hours a week
Flexible schedule
Learn at your own pace
Earn a Certificate
With paid plans
Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

6 hours to complete
3 weeks at 2 hours a week
Flexible schedule
Learn at your own pace
Earn a Certificate
With paid plans

What you'll learn

  • Learn how to build a dynamic card game using HTML, CSS, and JavaScript

  • Master JavaScript concepts like async/await, the Fetch API, and Fisher-Yates shuffle.

  • Understand how to optimize DOM manipulation using document fragments and efficient event handling.

  • Gain practical experience with CSS Grid and advanced styling techniques for responsive designs.

Details to know

Shareable certificate

Add to your LinkedIn profile

Recently updated!

May 2025

Assessments

6 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

 logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal
Coursera Career Certificate

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

Coursera Career Certificate

There are 6 modules in this course

In this module, we will kick off the project by setting up the essential HTML structure, diving into the fundamentals of CSS for layout and design, and introducing important styling concepts such as REM vs EM and CSS Grid. You'll also learn how to manage consistent styles with root variables and best practices for a clean, scalable CSS setup.

What's included

6 videos1 reading1 assignment

In this module, we will focus on populating the CSS grid with dynamically loaded cards from a JSON file. You will learn how to reference, retrieve, and process data using async/await, Fetch, and array methods like map() and flatMap(). Additionally, we'll explore efficient DOM manipulation techniques, such as using document fragments, to enhance performance when adding cards to the grid.

What's included

17 videos1 assignment

In this module, we will implement interactivity with dynamic event listeners and use CSS 3D transformations for a smooth flip effect. You'll also learn how to randomize the card order using the Fisher-Yates shuffle algorithm and troubleshoot common array-related issues in JavaScript. Finally, we’ll simplify our code with destructuring assignment and other best practices.

What's included

8 videos1 assignment

In this module, we will add the necessary logic for detecting matched and unmatched cards. You will learn how to use flags to limit user interactions, apply the ternary operator for logic checks, and implement setTimeout() for timed actions. Additionally, we’ll explore how to reset game states and prevent repeated clicks, enhancing the overall gameplay experience.

What's included

7 videos1 assignment

In this module, we will add an exciting visual effect by coding falling stars and implementing a losing image overlay for when the game ends. You'll learn how to use JavaScript and CSS animations to create the falling star effect, and manage game timing with setInterval and clearInterval to control the gameplay. Testing and cleanup of the animation elements will also be covered to ensure smooth performance.

What's included

10 videos1 assignment

In this module, we will wrap up the course by reviewing the concepts and skills you’ve gained in building your JavaScript-based game. We will summarize the techniques used throughout the course and reflect on how to apply them to future projects, ensuring you're ready to take on new challenges in game development.

What's included

1 video1 assignment

Instructor

Packt - Course Instructors
Packt
717 Courses107,704 learners

Offered by

Packt

Why people choose Coursera for their career

Felipe M.
Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
Jennifer J.
Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
Larry W.
Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
Chaitanya A.
"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Career resources

Coursera Plus

Unlock access to 10,000+ courses with a subscription

Explore roles and skills, learn more effectively with Coursera Coach, and earn recognized credentials

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Frequently asked questions