Object Oriented Programming in JavaScript: Build a Breakout Game (JavaScript Tutorial for Beginners)

Published: 07 November 2023
on channel: Piko Can Fly

1,040

In this step-by-step tutorial I will guide you through the creation of a Breakout game, where we'll learn the foundation of OOP in javaScript.

We'll break down the entire process, helping you grasp key OOP concepts. You'll gain a deeper understanding of JavaScript's object-oriented capabilities as you build a complete game from scratch.

What you will learn:
Object Creation: We'll start by creating objects for the game's elements, such as the ball, paddle, and bricks, using JavaScript classes.
Collision Detection: Master the art of collision detection as you ensure that the ball interacts correctly with the paddle and bricks.

Game Logic: Implement the game's logic, including the movement of game elements, scoring, win detection, and loss conditions.

OOP Principles: Explore key OOP principles such as encapsulation, to organize and structure your code effectively.

For your reference:
Github Repo:
https://github.com/PikoCanFly/BreakOu...

#javascript #learn #oop

Chapters:

00:00 - What we will do in this tutorial
00:15 - What are objects in OOP
00:25 - Object Oriented Breakout game
01:15 - Project Scaffolding
01:55 - Canvas Element
02:58 - The ball object
04:42 - draw method
09:00 - canvas context
09:18 - create a new instance of the ball object
10:21 - use draw method to draw ball
10:55 - game loop
12:40 - Request Animation Frame
13:15 - Define Paddle Class
16:00 - create paddle instance
17:14 - adding event listeners to control paddle with left and right keys
18:30 - ball collision detection
21:14 - paddle collision detection
24:30 - Brick Class

On this page of the site you can watch the video online Object Oriented Programming in JavaScript: Build a Breakout Game (JavaScript Tutorial for Beginners) with a duration of hours minute second in good quality, which was uploaded by the user Piko Can Fly 07 November 2023, share the link with friends and acquaintances, this video has already been watched 1,040 times on youtube and it was liked by 35 viewers. Enjoy your viewing!

10,660

268