Welcome back to the AS3 Game Tuts pong tutorial series. So far in this series we’ve created a working pong game complete with a ball and two paddles. In this tutorial we are going to add a scoring system to the game.
This is it. The tutorial you’ve all been waiting for. The tutorial that will bring everything together. The tutorial which will make you cry out in joy– OK, maybe not, I’m getting a little too excited… but seriously this is a good one.
If you haven’t read the whole series yet, I recommend starting at the beginning.
Let’s get started.
So far, we’ve got the ball to move and bounce off walls. We’ve made the playerPaddle be controllable by the mouse. And we’ve told the cpuPaddle to move up or down depending upon the position of the ball. It’s time to turn this into a “real” game by letting the ball be blocked by the paddles.
The way Flash handles collisions between two objects on the stage is called hit testing. The way it works is that Flash keeps track of invisible bounding boxes around every object on the screen. These bounding boxes are the smallest possible rectangle that your object can fit inside. So for our paddles, the bounding box is exactly the same shape. But for the ball, instead of using the circular 30px by 30px shape we drew, Flash uses a 30px by 30px square.
Step Four: Program the Computer-controlled Paddle
OK, so the last tutorial was pretty short and sweet. So lets waste no time getting into the next step. This step is pretty important because we begin to look at a very important step in game programming: AI (which stands for Artificial Intelligence).
Any time when the computer itself needs to control something (like an enemy in a game) and perform certain actions depending on certain conditions, we call this AI. Now, our AI is fairly basic. We need the computer’s paddle to move up and down to try to block the ball from getting past. It would be easy to make the cpuPaddle ALWAYS block the ball — all we would do is constantly set the cpuPaddle.y to the ball.y position. But how do we give the computer the intelligence to act like a normal player, sometimes succeeding and other times failing?
Step Three: Program the Player-controlled Paddle
We got the ball to move and bounce off of the walls in our last tutorial. Now it’s time to program the player-controlled paddle. What does the playerPaddle need to do?
- Set it’s y-position to the y-position of the mouse
- Stay within the boundaries of the screen
- Block the ball from passing through it
This will be a pretty simple tutorial section.
Welcome to Part 2 of the Actionscript 3 Flash game tutorial series for Pong!
Enough talk, let’s code.
Step Two: Program the basic game loop and the ball
First things first, we need to name each instance of our game pieces — this is what we’ll use to refer to each object in the code. Name the paddle on the left “playerPaddle” (no quotes), the paddle on the right “cpuPaddle”, and the ball can just be named “ball”.
In 1972 Atari pioneered the video game industry with the release of Pong. If you think of classic games, Pong is almost always near the top of the list. So it is fitting that Pong should be at least one of your first flash games you make. In this tutorial, we are going to create a complete Pong game from start to finish.
This is intended for beginners, but if you have never programmed at all before you should check out my Getting Started tutorial first.
This is what we are going to create over the next 6 tutorials: