Practise Javascript: Code a Card Game in Phaser 3 from Udemy

If you need to practise your javascript...

If you want to learn some new ES6 stuff...

If you have ever wanted to create a card game...

Then this course is for you.

You will get experience using:

ES6
Classes
Arrays
Objects
Functions
Phaser 3
Figma
Bitmap Fonts (BMFont)

Card games are a great way to learn some javascript and phaser fundamentals.

The game includes:

Dragging and dropping
Tweening
Importing graphics and fonts
Buttons

If you have a computer and an internet connection, you have all you need to take this course. You don't need any expensive software and you certainly don't need any drawing or musical ability since all assets are provided. Of course if you want to use your own art and music... you can.

In less than 10 minutes you will be up and running, creating your very own card game.

You will then go on to create the full game with awesome graphics and a really unique RPG / card gameplay.

There is even a section on creating your own card designs in Figma.

Once you have created your game, it can be used as part of your resume or portfolio and will really make you stand out since it's not another boring 'To Do List'.

Full source code is included.

So why not practise JavaScript the fun way and code a card game.

I hope you enjoy the course.

What's inside

Syllabus

Introduction

What are we doing here?

Let's Get Started!

Installing Visual Studio

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses Phaser 3, a popular framework, which allows learners to build browser-based games with engaging visuals and interactive elements

Employs ES6 features, which are essential for modern JavaScript development and enhance code readability and maintainability

Includes a section on creating card designs in Figma, which is a valuable skill for UI/UX design and game asset creation

Provides full source code, which enables learners to examine the implementation details and adapt the code for their own projects

Requires Visual Studio, which may not be the preferred IDE for all learners, as some may prefer other options like VS Code or Sublime Text

Focuses on Phaser 3, which may require learners to have a foundational understanding of JavaScript concepts before diving into game development

Reviews summary

Practise javascript with phaser 3 game

According to available course information, this course offers learners an opportunity to practise JavaScript skills, particularly ES6 features, by building a card game from scratch using the Phaser 3 game framework. The syllabus indicates coverage of topics essential for game development, such as asset loading, class creation for game objects, and implementing interactive elements like dragging and dropping. A significant outcome is the creation of a complete, playable game project, which is highlighted as potentially useful for a portfolio. Review data was not available for this analysis, so specific student feedback, perceived strengths, weaknesses, or overall sentiment expressed by learners could not be assessed.

Opportunity to practice ES6 concepts.

"The course explicitly states its goal is to help learners practise JavaScript, covering ES6 features like Classes, Arrays, and Objects."

"Review data for this course was not provided, preventing analysis of how effectively students felt their JavaScript skills were reinforced through the project."

Teaches game development using Phaser 3.

"The course structure and description heavily emphasize using the Phaser 3 framework to create a functional card game."

"Review data for this course was not provided, so specific student feedback on the clarity or effectiveness of the Phaser 3 instruction could not be analyzed."

Builds a complete, playable game project.

"The course leads students through the process of creating a full card game from setup to implementation of core mechanics."

"Review data for this course was not provided, so feedback on the quality, uniqueness, or completeness of the final game project from students could not be incorporated."

Analysis could not include student reviews.

"Review data was not provided for this course. The analysis presented here is based solely on the course title, description, and syllabus."

"Specific student opinions, perceived strengths, weaknesses, difficulties encountered, or overall satisfaction mentioned in reviews could not be identified or reported."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Practise Javascript: Code a Card Game in Phaser 3 with these activities:

Review JavaScript Fundamentals

Show steps

Reinforce your understanding of core JavaScript concepts like ES6 syntax, classes, arrays, objects, and functions. This will provide a solid foundation for understanding the Phaser 3 game development framework used in the course.

Browse courses on ES6

Show steps

Review basic JavaScript syntax and data types.
Practice creating and manipulating arrays and objects.
Write functions and classes to encapsulate game logic.

Eloquent JavaScript, 3rd Edition

Show steps

Deepen your understanding of JavaScript fundamentals before diving into Phaser 3. This book provides a solid foundation in JavaScript programming, which is crucial for success in the course.

View Melania on Amazon

Show steps

Read the chapters on data structures and functions.
Work through the exercises at the end of each chapter.
Experiment with the code examples in a JavaScript environment.

Phaser 3 Tutorials

Show steps

Explore Phaser 3 tutorials to familiarize yourself with the game development framework. This will help you understand how to create and manipulate game objects, handle input, and manage game states.

Show steps

Search for Phaser 3 tutorials on the official Phaser website.
Follow a tutorial on creating a simple game scene.
Experiment with different Phaser 3 features and components.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Practice Array and Object Manipulation

Show steps

Sharpen your skills in manipulating arrays and objects, which are essential for managing game data and logic. This will make it easier to work with card data and game state in the Phaser 3 card game.

Show steps

Create arrays of card objects with different properties.
Implement functions to filter, sort, and transform card data.
Practice updating and accessing object properties dynamically.

Create a Simple Card Game Mockup

Show steps

Design and implement a basic card game mockup using HTML, CSS, and JavaScript. This will allow you to apply the concepts learned in the course and experiment with different game mechanics.

Show steps

Design the layout and appearance of the card game interface.
Implement basic card drawing and shuffling functionality.
Add simple game rules and scoring mechanisms.
Test and refine the game mechanics based on user feedback.

Document Your Card Game Development Process

Show steps

Create a blog post or video tutorial documenting your experience building the card game in Phaser 3. This will help you solidify your understanding of the concepts and share your knowledge with others.

Show steps

Outline the key steps involved in the card game development process.
Write clear and concise explanations of the code and concepts.
Include screenshots or video clips to illustrate the game mechanics.
Share your content on social media or online forums.

Contribute to a Phaser 3 Project

Show steps

Contribute to an open-source Phaser 3 project to gain experience working with a larger codebase and collaborating with other developers. This will help you improve your coding skills and learn best practices for game development.

Show steps

Find an open-source Phaser 3 project on GitHub or GitLab.
Review the project's documentation and contribution guidelines.
Identify a bug or feature that you can contribute to.
Submit a pull request with your changes.

Career center

Learners who complete Practise Javascript: Code a Card Game in Phaser 3 will develop knowledge and skills that may be useful to these careers:

HTML5 Game Developer

HTML5 game developers specialize in creating games that run in web browsers using HTML5, JavaScript, and related technologies. This course focuses on game development in Phaser 3, which is an HTML5 game framework. HTML5 game developers must master skills such as dragging and dropping, tweening, importing graphics and fonts, as well as button design, all of which are built into the course. The course's hands-on project of creating a card game provides a practical experience that is directly applicable to the work of an HTML5 game developer. Aspiring HTML5 game developers should take this course to gain hands-on experience and build a portfolio piece.

See salaries and explore the career path for HTML5 Game Developer

Game Developer

A game developer brings video games to life, designing gameplay, writing code, and creating engaging experiences for players. This course helps build a foundation in JavaScript and the Phaser 3 framework, which are valuable tools for creating 2D games. Game developers use tools like Phaser to implement game mechanics such as dragging and dropping, tweening, and handling player interactions. The hands-on experience of developing a card game will translate directly to the skills needed to create more complex game projects. The course's focus on creating unique gameplay can help aspiring game developers build a portfolio that showcases their creativity and technical abilities.

See salaries and explore the career path for Game Developer

Game Designer

Game designers are the architects of video games, responsible for conceiving game concepts, defining gameplay mechanics, and creating engaging narratives. This course helps build a foundation in game development by providing hands-on experience with JavaScript, Phaser 3, and game design principles. Game designers must consider the intricacies of card game design as covered in this course to incorporate dragging and dropping, tweening, and button design to create a compelling game experience. This course directly helps with game design and is not just about the production of the software.

See salaries and explore the career path for Game Designer

Interactive Developer

Interactive developers create engaging and immersive experiences for web, mobile, and other platforms. The course helps build a foundation in the core technologies used by interactive developers, such as Javascript, ES6, and interactive methods such as drag and drop. The course's focus on creating a card game will allow interactive developers to put their knowledge to use. The course should be taken by interactive developers who want to specialize in Javascript and ES6 design for video games.

See salaries and explore the career path for Interactive Developer

Creative Coder

Creative coders use code as a medium for artistic expression, creating interactive installations, generative art, and other innovative projects. This course helps build a foundation in JavaScript and the Phaser 3 framework, which can be used to create visually appealing and interactive experiences. Creative coders use this software to build the functionality, while implementing visual assets from Figma. Creating a card game involves designing and implementing interactive elements, animations, and visual effects, allowing creative coders to explore their artistic vision through code.

See salaries and explore the career path for Creative Coder

Front-End Developer

Front end developers are responsible for creating the user interface and user experience of websites and web applications. This course helps build a foundation in JavaScript, a core technology for front end development. Understanding ES6, classes, arrays, objects, and functions, as covered in the course, is crucial for building interactive and dynamic user interfaces. The course's practical application of these concepts through game development can help solidify understanding and provide tangible projects for a portfolio. Aspiring front end developers should take this course to enhance their JavaScript skills in a fun and engaging way.

See salaries and explore the career path for Front-End Developer

Web Developer

Web developers are responsible for building and maintaining websites. The course's coverage of JavaScript, ES6, classes, arrays, objects, and functions are fundamental to web development. Web developers need to have a strong understanding of these concepts to create dynamic and interactive websites. The course's hands-on project of creating a card game can allow web developers to apply their knowledge and build a portfolio piece that showcases their skills. This course is also a fun and engaging way for web developers to level up their JavaScript skills.

See salaries and explore the career path for Web Developer

Educational Game Developer

Educational game developers design and create games that are specifically designed to educate or train players. The course helps build a foundation in game development using JavaScript and Phaser 3. Educational game developers can make use of the various techniques covered in this course. Taking this course provides a solid foundation for developing more complex mechanics.

See salaries and explore the career path for Educational Game Developer

Computer Programmer

A computer programmer writes code to create software applications, websites, and other digital products. This course helps build a foundation in JavaScript, a widely-used programming language. Computer programmers are expected to be proficient in classes, arrays, objects, and functions, which are skills that are built in this course. The course's focus on creating a card game provides a hands-on project that allows computer programmers to apply their knowledge and build a portfolio piece. The course should be considered for those who want to build a foundation in computer programming.

See salaries and explore the career path for Computer Programmer

Software Developer

Software developers are professionals who design, write, test, and maintain software applications. The course helps build a foundation in fundamental programming concepts using JavaScript. Software developers should be proficient in object oriented programming, and should consider this course's lessons in classes, arrays, objects, and functions to be a valuable foundation for their careers. Any developer who is interested in game design will find some utility from using this course.

See salaries and explore the career path for Software Developer

Software Engineer

Software engineers design, develop, and test software applications. While this role is broad, this course may be useful for those interested in front-end development or game development within a larger software engineering context. Gaining experience with JavaScript, ES6, classes, arrays, objects, and functions as covered in this course helps build a foundation for understanding the basics of software development. Completing this course will allow software engineers to explore game development as a hobby.

See salaries and explore the career path for Software Engineer

Mobile App Developer

Mobile app developers create applications for smartphones and tablets. While this course focuses on game development with Phaser 3, the underlying JavaScript skills are transferable to mobile app development, particularly for hybrid apps built with frameworks like Ionic or React Native. Mobile app developers use JavaScript concepts such as ES6, classes, and asynchronous programming to build interactive and responsive user interfaces. The course's emphasis on practical application and game development will allow mobile app developers to apply these general concepts to game development specifically.

See salaries and explore the career path for Mobile App Developer

User Interface Designer

User interface designers focus on the visual layout and interactive elements of digital products. While this course is primarily focused on game development, the experience of designing card layouts in Figma, importing graphics, and creating interactive buttons can help user interface designers to bring their ideas to life. The course's hands-on approach to creating a functional card game can broaden a user interface designer's toolkit and provide a unique perspective on user engagement. The course might be useful for user interface designers especially interested in creating interactive and engaging user interfaces.

See salaries and explore the career path for User Interface Designer

User Experience Designer

User experience designers focus on the overall experience a user has while interacting with a product, ensuring it is intuitive, efficient, and enjoyable. The course's project involves designing a card game, which requires careful consideration of user interaction, game mechanics, and visual feedback. User experience designers must develop an understanding of the importance of drag and drop, tweening, and button design to create a compelling game experience, all of which are concepts that a user experience designer can translate to applications for a wider scope of software. The course may be useful for user experience designers looking to broaden their skillset.

See salaries and explore the career path for User Experience Designer

Augmented Reality Developer

Augmented reality developers create interactive experiences that blend the real world with digital content. While this course focuses on 2D game development with Phaser 3, the underlying JavaScript skills are transferable to augmented reality development, particularly for web-based AR experiences. Augmented reality developers use similar concepts to make applications that make use of cameras and the real world. The hands-on experience of developing a game can also serve as a foundation for creating more complex AR applications. Augmented reality developers may find some use in the concepts taught by this course.

See salaries and explore the career path for Augmented Reality Developer

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Practise Javascript: Code a Card Game in Phaser 3.

Practise Javascript

Code a Card Game in Phaser 3

What's inside

Syllabus

Traffic lights

Save this course

Reviews summary

Practise javascript with phaser 3 game

Activities

Career center

Reading list

Share

Similar courses