Course Highlights
  • Build a complete JavaScript game from scratch
  • Understand how HTML, CSS, and JavaScript work together
  • Understand how the <canvas> element works

Overview

Take your JavaScript learning experience to the next level and start building interactive games.

What Is Provided in the Contents of the Course?

  • Learn how to create a whole JavaScript game, working your way up from basic ideas to complex game elements.
  • Examine how to create immersive games using HTML, CSS, and JavaScript, paying particular attention to the <canvas> element.
  • Practice using HTML canvas for loops, arrays, objects, custom functions, mouse controls, and other topics in real-world coding assignments.

What Will I Learn?

  • Develop a solid understanding of the HTML canvas element to provide the foundation for creating successful games.
  • Learn about the essential components of JavaScript, such as arrays and objects for loops, and create custom functions to improve your coding skills.
  • Incorporate mouse controls into your game to give your works a more lively and captivating aspect.
  • Learn about basic to sophisticated game components as you proceed through a structured two-hour session.

What Is the Course Formatted Like?

  • Explore 26 lectures organized into four subject sections that address advanced features, scoring, collision detection, canvas manipulation, and mouse controls.
  • Make sure you grasp the theoretical topics covered in each subject by doing practical problems.

Who Can Enroll in This Course?

  • Though the course is appropriate for students at any level, it really inspires newcomers to take on the thrilling world of game production.
  • Although having some experience with HTML, CSS, and JavaScript is helpful, the course is beginner-friendly and can be completed by anybody with little to no prior knowledge.
Curriculum

3 Topics
Prerequisites
Tips
Attribution to MDN

3 Topics
Set up and Basic Shape Creation
More Practice with the Canvas
Extra Information About the Canvas

15 Topics
Creating and Moving the Ball
Canvas Grid System and Draw function
Collision Detection
Updating the Collision Detection
Creating the Paddle
Game over State
Review of Arrays and Objects
A Note Before Starting the Next Lecture
Creating the Brick Field
Brick Field Collision Detection
Keeping Track of the Score
Adding Mouse Controls
Mouse Controls: Exercise Solution
Adding Player Lives
Adding the drawLives() Function

5 Topics
Adding Levels
Increasing Game Difficultly and Adding Pause Screen
Randomizing Ball Start
Update: New URL for Ball Image
Replacing Ball with Image

  Write a Review

JavaScript Game Development: Create Your Own Breakout Game

Go to Paid Course
Frequently Asked Questions
It is! The course's step-by-step methodology makes it possible for even beginners to follow along and create their breakthrough game. It's aimed at kids of all aptitude levels.
The training progresses from fundamental ideas to more complex elements in an organized two-hour manner. There are 26 lectures spread across 4 divisions.
An internet connection and a computer are all that are required; no complex programming environments or other software downloads are required.
The course provides a complete introduction to HTML and CSS, so even individuals with minimal experience may find value in it, but some prior knowledge is beneficial.
The course covers sophisticated game programming capabilities, mouse controls, arrays, objects, loops, and custom function generation in HTML canvas.