JavaScript Breakout From Scratch
Learn the basics of game development in JavaScript by building a Breakout clone from scratch. Understand delta time, collision detection, canvas rendering, and more. Perfect for beginner JavaScript developers interested in game development.
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
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
Who this course is for:
- Beginner JavaScript developers with an interest in game development
