So I made a pong clone closely following this guide. You could literally copy and paste the end code and have one yourself but that's not how you learn things so that's not what I did.
The first cool thing is that this uses HTML5's canvas attribute. It lets you place a "canvas", something to draw on, on your web page. You define its width and height and then you can have objects be drawn in it.
Once you're drawing stuff, you'll want to start animating it. Which introduces time as an element and really makes the computer feel more "alive".
What blew my mind was that computers aren't doing anything special in the screen, they're just redrawing pixels. Over and over! Even as I type this, the whole screen (maybe just what’s changing on the screen) rerenders 60 times every second. I really didn't get that about video games. Or TV, or animation, or anything really.
This program uses the prototypical pattern of construction. Basically, I save memory by sharing similar functions. For example, the computer paddle and the player paddle both need similar shapes and functions to interact with the ball. Instead of giving them their own properties, they share those parts, so I'm not rewriting code or using extra memory.
The computer paddle is controlled very simply. It's like the most basic AI I can think of. It just attempts to match the x position of the ball, except the paddle has a max speed. So if the ball is moving fast enough to the left or right, it can slip past the computer. It's a little disappointing to know that there really isn't any "thinking" involved, but I'm guessing that's the way most AI works.
The guide does most of the heavy lifting on the game. I added the score functionality and the power up. I also added the ability to move along the y-axis, but removed after playing with it and realizing it if I don’t add any new gameplay mechanics to actually use the y axis, then it just doesn’t make sense and adds unnecessary complication.
Originally I wanted to start learning Angular.js, a popular JavaScript framework, for this project, but then bailed when I figured learning both game mechanics,(animations, Axis Aligned Bounding Boxes, player input) and a whole new framework was a lot all at once. But I took the Model View Controller paradigm present in Angular, and made my own version of data binding based on my Udacity learnings.
You can play it here and see the source code here.
The first cool thing is that this uses HTML5's canvas attribute. It lets you place a "canvas", something to draw on, on your web page. You define its width and height and then you can have objects be drawn in it.
Once you're drawing stuff, you'll want to start animating it. Which introduces time as an element and really makes the computer feel more "alive".
What blew my mind was that computers aren't doing anything special in the screen, they're just redrawing pixels. Over and over! Even as I type this, the whole screen (maybe just what’s changing on the screen) rerenders 60 times every second. I really didn't get that about video games. Or TV, or animation, or anything really.
This program uses the prototypical pattern of construction. Basically, I save memory by sharing similar functions. For example, the computer paddle and the player paddle both need similar shapes and functions to interact with the ball. Instead of giving them their own properties, they share those parts, so I'm not rewriting code or using extra memory.
The computer paddle is controlled very simply. It's like the most basic AI I can think of. It just attempts to match the x position of the ball, except the paddle has a max speed. So if the ball is moving fast enough to the left or right, it can slip past the computer. It's a little disappointing to know that there really isn't any "thinking" involved, but I'm guessing that's the way most AI works.
The guide does most of the heavy lifting on the game. I added the score functionality and the power up. I also added the ability to move along the y-axis, but removed after playing with it and realizing it if I don’t add any new gameplay mechanics to actually use the y axis, then it just doesn’t make sense and adds unnecessary complication.
Originally I wanted to start learning Angular.js, a popular JavaScript framework, for this project, but then bailed when I figured learning both game mechanics,(animations, Axis Aligned Bounding Boxes, player input) and a whole new framework was a lot all at once. But I took the Model View Controller paradigm present in Angular, and made my own version of data binding based on my Udacity learnings.
You can play it here and see the source code here.
