Javascript Breakout From Scratch

Create a JavaScript game from scratch

What you'll learn

Build a complete JavaScript game from scratch

How to create levels for the game using an image editor

Understand delta time and how to use it properly within a game loop

Understand how to work with the canvas rendering context

How to implement an AABB collision detection strategy and what AABB is

Learn how to lock a user's mouse to the canvas

Requirements

Beginner level understanding of JavaScript

Description

This course teaches you the basics of game development in JavaScript by building a Breakout clone from scratch with no game engine. Learn how to create a game loop, what delta time is, how to implement AABB collision detection and much more!Follow along with guest instructor, Dan Fletcher as he walks you through the fundamentals of game development and learn how to create a simple level editor system that allows you to turn your pixel art into levels within the game!Other details in this course that will be covered:- Controlling the angle of the ball depending on where it makes contact with the paddle- How to create a canvas in JavaScript- The basics of drawing shapes to the canvas- The basics of animating shapes on a canvas- How to lock a user's mouse to a game screen using the pointer lock API- How game loops use Delta time to lock the FPS of a game- Loading an image into a canvas insance- Reading image data from a canvas- AABB collision detection for detecting collision between the ball and bricks- Using JSDoc for type safe IDE feedback as you work- How to implement a clamp function to prevent a player's paddle from moving off canvas

Overview

Section 1: Introduction

Lecture 1 Introduction & The Goals Of This Course

Section 2: Project Setup & Prerequisites

Lecture 2 Prerequisites

Lecture 3 Installing Visual Studio Code

Lecture 4 Project Setup

Lecture 5 Local Server

Section 3: Drawing On The Canvas

Lecture 6 Introduction

Lecture 7 Basic Drawing

Lecture 8 Animating the Ball

Lecture 9 Understanding Delta Time

Lecture 10 Adding Delta Time To The Game

Section 4: Making The Paddle

Lecture 11 Introduction

Lecture 12 Locking the Mouse to the Canvas

Lecture 13 Drawing the Paddle

Lecture 14 Attaching the Paddle to the Mouse

Lecture 15 Clamping the Paddle to the Canvas

Lecture 16 Handling Ball and Paddle Collision

Lecture 17 Adding Ball Control

Section 5: Managing Game State

Lecture 18 Introduction

Lecture 19 Resetting the Ball

Lecture 20 Title Bar

Lecture 21 Losing the Game

Section 6: Drawing Bricks

Lecture 22 Introduction

Lecture 23 Brick Size and Layout

Lecture 24 How The Level Editor Will Work

Lecture 25 Reading Image Data To Draw Bricks

Lecture 26 Creating The Level Manager

Lecture 27 Switching Levels

Section 7: Wrapping Things up

Lecture 28 Introduction

Lecture 29 Destroying Bricks

Lecture 30 Switching Levels (again)

Lecture 31 Keeping Score

Lecture 32 Winning the Game

Beginner JavaScript developers with an interest in game development