Create a 2D Breakout Game Using JavaScript and HTML | PART 2 | JavaScript Project For Beginners смотреть онлайн

________________ BE MORE PRODUCTIVE ________________
Logitech G915 TKL Keyboard : https://amzn.to/40e32TG
SteelSeries TKL keyboard : https://amzn.to/40gxKvy

Dell UltraSharp 31.5" 4K Monitor : https://amzn.to/3JPfD9x
LG Monitor 38" Curved UltraWide QHD+ : https://amzn.to/3z9A4sY

Logitech MX Master 3 Advanced Wireless Mouse : https://amzn.to/3K9LmDL
Logitech MX Ergo Wireless Trackball Mouse : https://amzn.to/40CstPb
________________________________________________________

Code Explained Says Hi.

Welcome to another tutorial, where we're going to create a game called "2D Breakout" using JavaScript and HTML 5, the tutorial is created especially for beginners in JavaScript. We will discuss the logic behind every line of code, And try to break down things as much as we can. and after that, we will open our text editors and start typing the code.

In the 2D Breakout game, you need to break all the bricks using a bouncing ball, a ball that you need to prevent from leaving the game area using the paddle.

This tutorial will be long, that's why I chose to split it into two parts.

*** WATCH THE FIRST PART: https://youtu.be/FyZ4_T0GZ1U ***
In the first part, we will be able, to draw the paddle and the ball, we will be able to control the paddle using the left and the right arrows on the keyboard, we will make the ball moves, and we will also implement the collision detection logic, so when the ball hits a wall it must change the direction.

When the ball hit the paddle, the ball should go in a definite direction based on where the ball hit the paddle so the paddle won't act like a wall. which means you can determine where the ball goes when you hit it with the paddle.

In the second part, we will implement the bricks in the game, add a collision detection function, when the ball hit a brick, the brick must disappear and then increment the player's score.

The player has 3 lives, when he loses a life, we reset the ball position and give him a chance to continue playing, when he loses all the 3 lives, it's a game over, we show him a game over message, and a "play again" button to play over.

To win the game, the player has to break all the bricks on each level, and he has to complete 7 levels, when he passes from a level to another, the number of bricks increases and also the speed of the ball.

We will also implement some sounds in the game, and we will create a button for when you want to turn ON/OFF the sounds.

If you want to follow along with me when I type in the code, you'll need to download the starter template from GitHub.
-----------------------------------------------------------------------------------------------------
| LINKS |
-----------------------------------------------------------------------------------------------------

DOWNLOAD SOURCE CODE + STARTER TEMPLATE:
https://www.codeexplained.dev/2020/06/2D-Breakout-Game-Using-JavaScript.html

-----------------------------------------------------------------------------------------------------
| SHOW ME SOME SUPPORT |
-----------------------------------------------------------------------------------------------------
Paypal: https://paypal.me/CodeExplained
Patreon: https://www.patreon.com/CodeExplained

-----------------------------------------------------------------------------------------------------
| RECOMMENDED TUTORIALS |
-----------------------------------------------------------------------------------------------------

Create a To Do List App Using JavaScript.
https://www.youtube.com/watch?v=b8sUhU_eq3g

Ping Pong Game Using JavaScript
https://youtu.be/nl0KXCa5pJk

Create a Multiple Choice Quiz Using JavaScript
https://youtu.be/49pYIMygIcU

Tetris Game Using JavaScript
https://youtu.be/HEsAr2Yt2do

Snake Game Using JavaScript
https://youtu.be/9TcU2C1AACw

Flappy Bird Game Using JavaScript
https://youtu.be/L07i4g-zhDA

-----------------------------------------------------------------------------------------------------
| SOCIAL MEDIA |
-----------------------------------------------------------------------------------------------------

Facebook: https://www.facebook.com/Code.Explained.Official
Twitter: https://twitter.com/code_explained
Instagram: https://www.instagram.com/Code.Explained.Official
Website: https://www.codeexplained.org

-----------------------------------------
| HASH TAGS |
-----------------------------------------
#javascript #2dbreakout #beginners #tutorial #game