Build An Arcade PONG Game With JavaScript

Build and deploy an arcade PONG game with JavaScript from scratch. Perfect for beginners who want to learn JavaScript and game logic! By the end of this video, you’ll have built the best PONG game on YouTube and learned a ton about JavaScript, HTML, and CSS.

⭐️ What You'll Learn:
- Fun sound effects using Musiclab.
- Easy-to-follow game logic breakdowns.
- Cool CSS transformations for our game board.
- Moving paddles and ball with key presses.
- Collision detection and high score tracking.

⭐️ Prerequisites:
- Some prior experience in HTML, and CSS.
- You are eager to dive into JavaScript.

⭐️ Tools and Technologies Covered:
- Version Control: Utilize GitHub for seamless collaboration and project management.
- Github Desktop: Efficiently update your repository with ease using Github Desktop.
- Code Editor: Leverage Visual Studio Code as your primary code editor for enhanced productivity.
- Deployment: Learn how to deploy your website for free using Netlify, making it accessible to users worldwide.

✅ Assets / Finished Code Link:
https://github.com/Ade-mir/pong-game

✅ Deployed site:
https://the-best-pong-game-on-youtube...

✅ Sound creator:
https://musiclab.chromeexperiments.com/

📌 Install VS Code
   • How to Install and Setup VS Code on Mac  

📌 Setup Prettier Code Formatter
   • How to use Prettier in VS Code - Code...  

📌 Learn CSS flexbox
   • Everything You Need To Know About CSS...  

📌 Build your next awesome project
https://www.tubebuddy.com/quicknav/la...

💛 GitHub: https://github.com/
💛 GitHub Desktop: https://desktop.github.com/
💛 Visual Studio Code: https://code.visualstudio.com/
💛 Netlify: https://www.netlify.com/

📒 Timestamps:
00:00 - What we are building / Finished Arcade PONG Game
02:08 - Project setup
04:33 - Installing extensions
05:11 - Installing Prettier
06:15 - Creating the HTML
08:01 - Adding a Google Font
26:06 - Adding our StyleSheet
32:58 - Game Area Theory
51:29 - Pong game logic
55:18 - Creating our JavaScript
56:57 - startGame function
1:04:43 - gameLoop function
1:07:47 - updatePaddle1 function
1:09:52 - handleKeyDown function
1:12:51 - handleKeyUp function
1:14:00 - paddle logic explained
1:35:49 - Collision handling
1:43:37 - updatePaddle2 function
1:46:00 - moveBall function
2:00:46 - updateScoreboard function
2:02:34 - resetBall function
2:04:45 - pauseGame function
2:06:57 - playSound function
2:13:19 - Deploying with Netlify