Coding an HTML5 Canvas Game with JS in 5 min 30 sec

We’re gonna start with a blank file and write a video game, real quick going to do the simplest classic style of game. We can, which course is going to be a pong like game or gaming, a similar genre to games like pong and Ralph Baer’s, tennis game and so on, and we’re going to using html5 JavaScript for simplicity.

So no special tools, ideas, compilers that are needed when to wall node we’ll call this code as soon as the game gets started and first, we’re. Do is going to use document dot, get element by ID. That’s, going to let us retrieve our game.

Canvas up above we’re, going to do to get context, to grab our sort of graphic straw buffer or at least how we access it. You set interval to get an update function. Being called 30 times a second function update and inside here let’s.

Do a fill style. It’s, going to be black. We’re, going to black out the canvas start of each frame. We’re. Also going to draw a fill rectangle that’s, going to be the dimensions of the screen, canvas with canvas height, let’s, also get our paddles drawing and our ball.

So those are all going to be. We’re, going to have to create these variables in a second paddle, thickness, paddle height, so the same thing for paddle to Y canvas width, /, Panama’s, paddle thickness.

That should all do that. Oh, let’s. Go up top and create those variables and 1 1 equals 2 y equals Stern about that 42. Really matter equals 10 kind of some typos. Here we’re, also going to need some ball values.

So let’s make that 50. At first X, velocity Y velocity, we refer to our balls X, plus y velocity, because it’s, not my object. We have yet it’s, also Mike one for ball dimension. What’s rocket using collision, but it’ll, be handy for visual reasons.

Let’s, go and draw our ball, which is going to be ball X. Bar Y, ball, dimension, ball dimension and let’s. Be a little fancier here and Center. Our ball on that coordinate since raising a rectangle, distract happy with tap height.

Let’s, get the ball moving, so it’s, going to be plus equals X, velocity y velocity and let’s, get the ball bouncing. So if the ball goes up above the top of the screen and the ball is on its way upward so avoid a collision issue later, then we’re, going to reverse the Y velocity equals negative Y velocity.

Okay, it’s, going to look pretty similar. We’re going off the other side of the screen you’ll, see I’m just in a plain text: editor right! Nothing! Fancy! Here! I’m, not using any of anything. It gives me automatic indentation.

That would be unfair, and so now let’s. Do the sides these get a little more complicated, so its first test. If ball X goes less than the left side. We first want to know: is the ball wide between the top of the paddle and above the bottom owed paddle, because if it is, we can bounce it X.

Velocity equals equals negative X velocity, let ‘ S. Also then, find a delta y where that’s, going to be the ball Y paddle, 1 y plus half the height to give us our center with high posts. In that case, the Y velocity is going to equal dy times.

So I get a third of that that’s, just a dilution value for tuning purposes. Otherwise, it means that we missed it, and so in that case, we’re, going to award a point score to player 2, which we haven’t created a very bit.

We’re about to and it’s called reset having create the function, but we’re about to so let’s. Go ahead now and make our function reset function reset that’s going to Center. The ball canvas width divided by 2.

There’s. Our horizontal center recently changed keyboards mitt was the wrong time year to do this. There’s that we’ve got X, velocity is going to reverse. Well, I’ve lost this gifts, give it a same sort of reset value.

We also said we add some score numbers so score. One equals score two. I say we’re being kind of reckless here we’re, not doing a lot of prettiness, but we’re just going to show how little code it maybe actually takes anymore to make a game in 2015 and something Like html5 JavaScript on canvas, which is a platform I do recommend for beginners, although maybe not writing code in this kind of slapdash fashion here with short variable names and stuff, so there’s, going to be our score on the other side of the Screen we have one side accounted for, let’s, get the ball bouncing off the other side, and so it has to be the right side.

We’re, going to do greater than canva with and of course, we want to change which paddle we’re, looking at and doing the center of and who’s getting the point and then we also need to get Ai working so for a, I could make a separate function for this, but let’s.

Let’s, not bother! Let’s, make another AI speed value, so we can tune it more easily and will say that if paddle to wise, the center of it is above the ball. So it’s above it. So we need to move it down.

P to y plus equals a high speed and it’s, going to be called of a shaky paddle. If we have the ball going relatively straight, but it’s, going to be fine for this kind of purpose. Okay, so we ‘ Ve got the AI written, let’s also add some code to get the player to be able to move their paddle right.

So in that case, we’re, going to do C. Dot add event listener that’s, going to be Mouse, move going to write an anonymous function here. Maybe there’s, no name for the function just in line and we’re going to say paddle, one wise will equal Y dot client Y, which one account for scrolling, but not too bad.

Weird. If I subtract out half the height of the paddle, which would Center it – and so now there is our game, I want to refresh you’ll, see that AI is trying to chase it. When hits the ball, it controls it.

I’m going to let it pass me so you’ll, see it scores a point blank there’s its point. Hopefully this and makes it past Boop there’s, my point and if I knock the ball back, you’ll see we have some rudimentary ball control now.

This is again a very slapdash quick way to program it. I wouldn’t teach this technique this quickly for someone starting out. My technique, though, is similar, but a little better explained, and if you want to find that out, this is completely free.

You can do it tonight. I do have a three-hour version of what I just showed you here tonight, where I go into much more detail about explaining every single step of how and why this game code works. To do this very, very simple, classic game: a thousand people are taking it every month, 10,000 people are not taking it overall.

Let’s code, your first game. It’s. A free course on udemy literally, can finish tonight with text editor with a web browser standard stuff and you get to it from either going to code your first game comm without hyphens.

That will redirect you to do to my course or code. Your first game comm with hyphens whether without either way, will redirect you to this free udemy course. You can program your first game tonight, html5 JavaScript, and we started well on your way to having made your first program.

Products You May Like

Leave a Reply

Your email address will not be published. Required fields are marked *