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

Ce cours n'est pas disponible en Français (France)

Nous sommes actuellement en train de le traduire dans plus de langues.
Packt

Game Time 2024 – Build a JavaScript Game with Random Order

Inclus avec Coursera Plus

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.
niveau Intermédiaire

Expérience recommandée

7 heures à compléter
Planning flexible
Apprenez à votre propre rythme
Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.
niveau Intermédiaire

Expérience recommandée

7 heures à compléter
Planning flexible
Apprenez à votre propre rythme

Ce que vous apprendrez

  • 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.

Compétences que vous acquerrez

  • Catégorie : JSON
  • Catégorie : Cascading Style Sheets (CSS)
  • Catégorie : Javascript
  • Catégorie : Debugging
  • Catégorie : Algorithms
  • Catégorie : HTML and CSS
  • Catégorie : Game Design
  • Catégorie : Responsive Web Design
  • Catégorie : Animations
  • Catégorie : Hypertext Markup Language (HTML)
  • Catégorie : UI Components

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Récemment mis à jour !

mai 2025

Évaluations

7 devoirs

Enseigné en Anglais

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

 logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

Il y a 6 modules dans ce cours

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.

Inclus

6 vidéos1 lecture1 devoir

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.

Inclus

17 vidéos1 devoir1 plugin

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.

Inclus

8 vidéos1 devoir1 plugin

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.

Inclus

7 vidéos1 devoir1 plugin

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.

Inclus

10 vidéos1 devoir1 plugin

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.

Inclus

1 vidéo2 devoirs

Obtenez un certificat professionnel

Ajoutez ce titre à votre profil LinkedIn, à votre curriculum vitae ou à votre CV. Partagez-le sur les médias sociaux et dans votre évaluation des performances.

Instructeur

Packt - Course Instructors
Packt
752 Cours127 403 apprenants

Offert par

Packt

En savoir plus sur Mobile and Web Development

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.
Étudiant(e) depuis 2018
’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’
Jennifer J.
Étudiant(e) depuis 2020
’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’
Larry W.
Étudiant(e) depuis 2021
’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’
Chaitanya A.
’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’
Coursera Plus

Ouvrez de nouvelles portes avec Coursera Plus

Accès illimité à 10,000+ cours de niveau international, projets pratiques et programmes de certification prêts à l'emploi - tous inclus dans votre abonnement.

Faites progresser votre carrière avec un diplôme en ligne

Obtenez un diplôme auprès d’universités de renommée mondiale - 100 % en ligne

Rejoignez plus de 3 400 entreprises mondiales qui ont choisi Coursera pour les affaires

Améliorez les compétences de vos employés pour exceller dans l’économie numérique

Foire Aux Questions