Friday, October 22, 2010

Creating a Ping Pong game using AS3

Today we will create a pong game in Actionscript 3.

Here's what we will be creating (click the screen to start the game):


I'm only using one class for the whole game - PongGame.as, which is located in cl.kirill (so the path is cl.kirill.PongGame). Here's the code I have on my timeline:

import cl.kirill.PongGame;
var Pong:PongGame = new PongGame(stage);

I pass the stage to my class so I can refer to it later.

Here is the full code:

package cl.kirill
{
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.text.TextField;

public class PongGame
{
private var _stage;
public var PlayerPaddle:Sprite = new Sprite();
public var EnemyPaddle:Sprite = new Sprite();
public var Ball:Sprite = new Sprite();
public var LineDrawing:Sprite = new Sprite();
public var plScore:Number = 0;
public var enScore:Number = 0;
public var plScoreShow:TextField = new TextField();
public var enScoreShow:TextField = new TextField();
public var Playing:Boolean = false;
private var BallMoveX:Number = 0;
private var BallMoveY:Number = 0;

public function PongGame(the_stage:Stage)
{
_stage = the_stage;
trace("Game init");

_stage.addChild(PlayerPaddle);
PlayerPaddle.graphics.beginFill(0x000000);
PlayerPaddle.graphics.drawRect(0,0,10,70);
PlayerPaddle.x = 10;
PlayerPaddle.y = 10;
PlayerPaddle.graphics.endFill();
_stage.addEventListener(Event.ENTER_FRAME, PlayerMovement);

_stage.addChild(EnemyPaddle);
EnemyPaddle.graphics.beginFill(0x000000);
EnemyPaddle.graphics.drawRect(0,0,10,70);
EnemyPaddle.x = 380;
EnemyPaddle.y = 10;
EnemyPaddle.graphics.endFill();
_stage.addEventListener(Event.ENTER_FRAME, EnemyMovement);

_stage.addChild(Ball);
Ball.graphics.beginFill(0x000000);
Ball.graphics.drawRect(0,0,10,10);
Ball.x = 195;
Ball.y = 195;
Ball.graphics.endFill();
_stage.addEventListener(Event.ENTER_FRAME, BallMove);

_stage.addChild(LineDrawing);
LineDrawing.graphics.lineStyle(1, 0x000000);
LineDrawing.graphics.moveTo(5,5);
LineDrawing.graphics.lineTo(5, 5);
LineDrawing.graphics.lineTo(395, 5);
LineDrawing.graphics.lineTo(395, 395);
LineDrawing.graphics.lineTo(5, 395);
LineDrawing.graphics.lineTo(5, 5);
LineDrawing.graphics.moveTo(200,5);
LineDrawing.graphics.lineTo(200, 400);

_stage.addEventListener(MouseEvent.CLICK, startGame);

_stage.addChild(plScoreShow);
plScoreShow.selectable = false;
plScoreShow.x = 100;
plScoreShow.y = 15;
plScoreShow.text="0"
;
_stage.addChild(enScoreShow);
enScoreShow.selectable = false;
enScoreShow.x = 300;
enScoreShow.y = 15;
enScoreShow.text = "0";
}

private function startGame(MouseEvent):void
{
if (! Playing)
{
trace("Game started!");
Playing = true;
BallMoveX = (Math.random()-0.5)*10;
BallMoveY = (Math.random()-0.5)*10;
}
}

private function PlayerMovement(MouseEvent):void
{
if (_stage.mouseY > 30 && _stage.mouseY < 355)
{
PlayerPaddle.y = _stage.mouseY - 35;
}
}

private function EnemyMovement(Event):void
{
if (Ball.y > 30 && Ball.y - 35 < EnemyPaddle.y + 5)
{
EnemyPaddle.y -=  5;
}

if (Ball.y < 355 && Ball.y - 35 > EnemyPaddle.y + 5)
{
EnemyPaddle.y +=  5;
}
}

private function BallMove(Event):void
{
Ball.x +=  BallMoveX;
Ball.y +=  BallMoveY;

if (Ball.y <= 5 && BallMoveY < 0)
{
BallMoveY *=  -1;
}

if (Ball.y >= 385 && BallMoveY > 0)
{
BallMoveY *=  -1;
}

if (Ball.hitTestObject(PlayerPaddle) && BallMoveX < 0)
{
BallMoveX *=  -1;
if (BallMoveX < 8)
{
BallMoveX++;
}
BallMoveY = -Math.round((PlayerPaddle.y + 35 - Ball.y)/5);
}

if (Ball.hitTestObject(EnemyPaddle) && BallMoveX > 0)
{
BallMoveX *=  -1;
if (BallMoveX > 8)
{
BallMoveX--;
}
BallMoveY = -Math.round((EnemyPaddle.y + 35 - Ball.y)/5);
}

if (Playing && Ball.x < 0)
{
EnemyWin();
}
if (Playing && Ball.x > 400)
{
PlayerWin();
}

}

private function PlayerWin():void
{
trace("Player wins!");
Ball.x = Ball.y = 195;
BallMoveX = Math.random() * 16 - 8;
BallMoveY = Math.random() * 16 - 8;
plScore++;
plScoreShow.text = plScore.toString();
}

private function EnemyWin():void
{
trace("Enemy wins!");
Ball.x = Ball.y = 195;
BallMoveX = Math.random() * 16 - 8;
BallMoveY = Math.random() * 16 - 8;
enScore++;
enScoreShow.text = enScore.toString();
}

}

}

It may look big, but it is really simple. The first half of the code manages drawing and creating everything on stage, adding the listeners and just preparing the game.

I have the startGame() function that starts the game once the player clicks the screen - the ball gets random speed for Y and X axises and moves with that speed.

PlayerMovement and EnemyMovement handle the manual movement of the left paddle and automatic movement for the right paddle.

The BallMove function is the most complex one - it manages bouncing and checks if the ball goes off screen.

Two functions - EnemyWin and PlayerWin are used when the ball goes off screen.

Some code pieces might look complicated, but they really aren't if you read them twice.

Hope this was helpful. Thanks for reading!

3 comments:

Anonymous said...

very nice

Anonymous said...

can i ask if what is that import thing above?can i use it?reply asap ^^

Anonymous said...

It was a little hard to finish the code, but it worked, and it was good...


THANKS

Post a Comment