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

Game Time 2024 – Build a JavaScript Game with Random Order

包含在 Coursera Plus

深入了解一个主题并学习基础知识。
中级 等级

推荐体验

7 小时 完成
灵活的计划
自行安排学习进度
深入了解一个主题并学习基础知识。
中级 等级

推荐体验

7 小时 完成
灵活的计划
自行安排学习进度

您将学到什么

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

要了解的详细信息

可分享的证书

添加到您的领英档案

最近已更新!

May 2025

作业

7 项作业

授课语言:英语(English)

了解顶级公司的员工如何掌握热门技能

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

该课程共有6个模块

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.

涵盖的内容

6个视频1篇阅读材料1个作业

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.

涵盖的内容

17个视频1个作业1个插件

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.

涵盖的内容

8个视频1个作业1个插件

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.

涵盖的内容

7个视频1个作业1个插件

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.

涵盖的内容

10个视频1个作业1个插件

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.

涵盖的内容

1个视频2个作业

位教师

Packt - Course Instructors
Packt
971 门课程234,954 名学生

提供方

Packt

从 Mobile and Web Development 浏览更多内容

人们为什么选择 Coursera 来帮助自己实现职业发展

Felipe M.
自 2018开始学习的学生
''能够按照自己的速度和节奏学习课程是一次很棒的经历。只要符合自己的时间表和心情,我就可以学习。'
Jennifer J.
自 2020开始学习的学生
''我直接将从课程中学到的概念和技能应用到一个令人兴奋的新工作项目中。'
Larry W.
自 2021开始学习的学生
''如果我的大学不提供我需要的主题课程,Coursera 便是最好的去处之一。'
Chaitanya A.
''学习不仅仅是在工作中做的更好:它远不止于此。Coursera 让我无限制地学习。'
Coursera Plus

通过 Coursera Plus 开启新生涯

无限制访问 10,000+ 世界一流的课程、实践项目和就业就绪证书课程 - 所有这些都包含在您的订阅中

通过在线学位推动您的职业生涯

获取世界一流大学的学位 - 100% 在线

加入超过 3400 家选择 Coursera for Business 的全球公司

提升员工的技能,使其在数字经济中脱颖而出

常见问题