К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Game Time 2024 – Build a JavaScript Game with Random Order · LearnSpace
Назад в каталог
courseraПрограммирование

Game Time 2024 – Build a JavaScript Game with Random Order

Курс от Packt
Средний≈ 7.8 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

Updated in May 2025. This course now features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. This course teaches you how to build a JavaScript-based card game with random card ordering mechanics. By the end of the course, you will be able to create a fully functional game, applying key skills like HTML structure, CSS Grid for layout, JavaScript asynchronous programming with async/await, the Fetch API for data retrieval, and the Fisher-Yates shuffle algorithm for randomization. You'll also gain expertise in DOM manipulation, CSS animations, and adding interactive features such as dynamic card flipping and game logic with counters. The course is divided into six sections. In the first section, you'll learn to write the HTML, style with CSS, and implement CSS Grid for a responsive layout. You'll also explore CSS root variables and best practices for naming conventions. The second section focuses on populating your game board with cards, using JSON to store card data, and integrating JavaScript for dynamic card referencing. You'll also master advanced techniques for efficient DOM updates. In section three, you’ll implement card flip effects and randomize the card order using the Fisher-Yates shuffle. Section four delves into logic for matching cards, counters, and restricting clicks. The fifth section introduces visual effects like falling stars and a losing image overlay. By the end, you’ll have a polished game ready for testing. This is an intermediate-level course. Developers with basic HTML, CSS, and JavaScript knowledge who want to skill up will find it helpful.

Навыки, которые вы освоите

Cascading Style Sheets (CSS)AnimationsHypertext Markup Language (HTML)AlgorithmsJSONFrontend PerformanceEvent-Driven ProgrammingResponsive Web DesignAnimation and Game DesignCode ReusabilityGame DesignHTML and CSSWeb Design and DevelopmentVideo Game Development

Программа курса

6 модулей · 61 учебных материалов

01Setting up the project code8 материалов

Setting up the project code

Course IntroВидеоFull Course ResourcesЧтениеWriting the HTMLВидеоWriting CSS, and explaining REM vs EMВидео

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

Game Time 2024 – Build a JavaScript Game with Random Order
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 7.8 ч

6 модулей

Язык: Английский

Субтитры: Арабский, Французский, Итальянский, Бразильский португальский, Корейский, Индонезийский, Испанский, Японский, Казахский

Часть программы вашего университета
Using the CSS grid system to display the cardsВидео
Defining CSS root variablesВидео
More about CSS root and naming conventionsВидео
Setting up the project code - AssessmentЗадание
02Populate our CSS grid with cards19 материалов

Populate our CSS grid with cards

Create a JSON file that contains an array with card objectsВидеоHow to reference a JSON file from our main JavaScript fileВидеоUsing async/await with FetchВидеоCORS, File Protocol, and what files a local development server can accessВидеоTraditional Fetch and the Array.map() methodВидеоUsing the flatmap() function to create our cards arrayВидеоUsing the spread syntax to create an arrayВидеоElements are automatically added to the CSS grid layoutВидеоHow cards will be referenced in our codeВидеоDirectly adding cards to the DOMВидеоUsing appendChild() to add our cards to the DOMВидеоWhat are the problems with adding items directly to the live DOM on each loopВидеоWhat is a document fragment?ВидеоUsing fragments to add cards to the live DOMВидеоTesting code and accessing the childElementCount propertyВидеоStyling back of the card with CSSВидеоStyling front of the card with CSSВидеоDynamic JavaScript Card GridDIALOGUEPopulate our CSS grid with cards - AssessmentЗадание
03Adding flip effect, and using the Fisher-Yates shuffle10 материалов

Adding flip effect, and using the Fisher-Yates shuffle

Adding the click event listener dynamicallyВидеоUsing CSS 3D transformations to rotate our card 180 degrees on the Y-axisВидеоSetting up the shuffle functionВидеоFisher-Yates (or Knuth) shuffle algorithmВидеоApplying the Fisher-Yates shuffle to our cards arrayВидеоLogging an array directly in the console, logs a reference to it in memoryВидеоSolving the issue by creating a shallow copy of the array using spread syntaxВидеоUsing the destructuring assignment to improve our codeВидеоUnderstanding Event Listeners in JavaScriptDIALOGUEAdding flip effect, and using the Fisher-Yates shuffle - AssessmentЗадание
04Adding logic for matched and unmatched cards, and counters9 материалов

Adding logic for matched and unmatched cards, and counters

Using THIS keyword to define the first and second cardВидеоAdding a flag to disallow the user to click on more than 2 cards at onceВидеоDataset property, and ternary operator in JavaScript to implement matching logicВидеоUsing the setTimeout() function to define the unflipCard functionВидеоResetting our variables and cardsВидеоUsing removeEventListener() method, and adding a background colorВидеоPrecluding the user from clicking on the same card twice, and resetting flagsВидеоImplementing JavaScript Logic for Matching Card GameDIALOGUEAdding logic for matched and unmatched cards, and counters - AssessmentЗадание
05Coding falling stars, and adding a losing image overlay12 материалов

Coding falling stars, and adding a losing image overlay

Adding a counter for tries remainingВидеоUsing the decrement operator and performing a simple IF checkВидеоCreating the HTML structure to contain our losing imageВидеоUsing CSS position and also using the request Animation Frame() methodВидеоCreating a falling star using JavaScriptВидеоApplying CSS animations and CSS keyframesВидеоTesting code, and using the remove() method to remove stars from the DOMВидеоUsing counters, setInterval and clearIntervalВидеоTesting final codeВидеоApplying a CSS transition to the background color of our back cardВидеоCoding falling stars, and adding a losing image overlay - AssessmentЗаданиеJavaScript Event Handling and Dynamic ContentDIALOGUE
06Outro3 материалов

Outro

OutroВидеоFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание