An introduction to game development tutorial using vanilla JavaScript and HTML5 canvas. Build a complete brick-breaker game while learning the fundamentals of game development.
💻 Code / Completed Project: https://codesandbox.io/s/z2pqr9620m
⭐️ Course Contents ⭐️
⌨️ (00:00) Introduction
⌨️ (00:32) Project Setup and Canvas
⌨️ (02:07) Drawing on the Canvas
⌨️ (04:25) Clearing the Canvas
⌨️ (05:45) Creating the Player’s Paddle
⌨️ (11:42) The Game Loop
⌨️ (15:47) Handling Keyboard Input
⌨️ (17:56) Moving the Paddle
⌨️ (21:36) Stopping the Paddle
⌨️ (23:10) Drawing the Ball Image
⌨️ (26:59) Moving the Ball
⌨️ (32:11) Refactoring to the Game Class
⌨️ (38:54) Collision Detection between the Ball and Paddle
⌨️ (43:19) Loading Bricks
⌨️ (46:24) Building Levels
⌨️ (51:22) Collision Detection with Bricks
⌨️ (56:54) Pause Screen
⌨️ (1:02:08) A Simple Start Menu
⌨️ (1:06:09) Game Over
⌨️ (1:10:13) Completing Levels
🎥 Tutorial from Crhis Perko. Check out his YouTube channel: https://www.youtube.com/channel/UCraxnACLukXNgBnCq1zQnNg
🔗 Chris Perko’s blog: https://chrisperko.net
🐦 Chris on Twitter: https://twitter.com/chrisjperko
Original source
22 responses to “Intro to Game Development with JavaScript – Full Tutorial”
Hey guys! I hope you enjoy this video. Check out my channel for other tutorials! And if you have questions, feel free to reach out to me!
I had a error that said "Cannot read property 'getContext' of null
There's a mistake at 13:20. That should obviously be this.position.x += 5 * deltaTime;
When I try to load the black box, I get this message in my console:
GET file:///C:/Users/13159/Documents/FreeCodeRPG/src/rpg.js net::ERR_FILE_NOT_FOUND
OOP so great, I always code javascript don't have ruled. It makes my code so messy
For the ones having difficulty displaying the paddle. use
<script type ="module" src = "index.js"></script>
and
import Paddle from "/paddle.js";
instead of the codes provided in the video.
I have an error with
import Paddle from '/src/paddle'
Why there's no paddle in my local but appears with the same exact code in codesandbox?
why cant i import
thx bro
it helps a lot
Jesus loves you
Believe in him and repent
"Uncaught SyntaxError: Cannot use import statement outside a module" – any idea how to resolve this error?
My version is not responding to the collision on the sides of the object. So when the ball hits the left/right side of either paddle or bricks the ball is not bouncing. Has this happened to someone else too? any idea what could be causing it? I am comparing my code with the one on the video and looks similar to mine.
Guys if you want your paddle to move by mouse then just input this instead all of that code for left and right arrow key:
cvs.addEventListener('mousemove', (event) => {
paddle.position.x = event.offsetX;
})
Question: Why does having the if statements at 22:54 make the paddle not stutter?
Why the timestamp in the function at 15:42 ? it is only a parameter, but never set equal to anything
Also The Paddle's Not Coming To Center.
Also instead of doing var use let it is better at assigning variables.
Once I started doing the import export of the class Paddle, it wouldn't show the paddle on the screen. Not sure what to do
Hi there, really awesome tutorial.
Actually I found a bug:
the ball can enter the blocks from the sides making weird zigzagging an destroying a lot of blocks.
solution:
in the collision detection file you have to add the ball size to the leftsideofobject comparison instead of the right. (line 13&14)
I keep having this "Cannot set property 'innerHTML' of null". Any help
Thanks for this great turorial, very cool
The alerts while testing the input handler (the ones that say "move right" and "move left") keep coming nonstop after I press ok, even though I removed the alert line. Its like theres "ghost code" still executing. Any suggestions on how to fix this?