Animate CC - Pong Game
Part 1 and Part 2
Part 1 and Part 2
Pong Part 1 -setup the stage
https://as3gametuts.com/2011/03/19/pong-1/
Actionscript 3.0 – stage: black – FPS: 60 – W 550xH 400
Ball (white is optional)
- edit the symbol and make the ball spin in 20 frame
- edit the symbol and make the ball spin in 20 frame
Draw a (white) circle – hold shift key – in properties –set size
to 10x10
– convert to symbol – ‘Ball’ – movie clip
Paddle
Draw a vertical (white) rectangle – in properties – set size
to W:10 x H: 50
– convert to symbol –‘paddle’ – movie clip
-duplicate symbol
-edit each paddle symbol and make the colours blink(#1) and change(#2)
-duplicate symbol
-edit each paddle symbol and make the colours blink(#1) and change(#2)
Add an extra paddle to the stage – drag from library
Position these items on the stage
In properties of the:
Paddle left (X: 20 Y: 200)
Ball (X: 275 Y: 200)
Paddle right (X: 530 Y: 200)
Pong Part 2 - the ball moves
Name your games pieces:
Paddle left : -in properties- <instance name>: playerPaddle
– note the capital P for Player
Paddle Right : -in properties- <instance name>: cpuPaddle
– note the capital P for Player
Ball : -in properties- <instance name>: ball –
note the lower case b for ball
ADD the CODE
CLICK ON THE BALL – press F9
Paste the following
var ballSpeedX:int = -3;
var ballSpeedY:int = -2;
init();
function init():void
{
stage.addEventListener(Event.ENTER_FRAME,
loop);
}
function loop(e:Event):void
{
ball.x += ballSpeedX;
ball.y += ballSpeedY;
//because the ball's
position is measured by where its CENTER is...
//...we need add or
subtract half of its width or height to see if that SIDE is hitting a wall
//first check the left
and right boundaries
if(ball.x <=
ball.width/2){ //check if the x position of the left side of the ball is less
than or equal to the left side of the screen, which would be 0
ball.x
= ball.width/2; //then set the ball's x position to that point, in case it
already moved off the screen
ballSpeedX
*= -1; //and multiply the ball's x speed by -1, which will make it move right
instead of left
} else if(ball.x >= stage.stageWidth-ball.width/2){ //check to see
the right side of the ball is touching the right boundary, which would be 550
ball.x
= stage.stageWidth-ball.width/2; //reposition it, just in case
ballSpeedX
*= -1; //multiply the x speed by -1 (now moving left, not right)
}
//now we do the same
with the top and bottom of the screen
if(ball.y <=
ball.height/2){ //if the y position of the top of the ball is less than or
equal to the top of the screen
ball.y
= ball.height/2; //like we did before, set it to that y position...
ballSpeedY
*= -1; //...and reverse its y speed so that it is now going down instead of up
} else if(ball.y >= stage.stageHeight-ball.height/2){ //if the
bottom of the ball is lower than the bottom of the screen
ball.y
= stage.stageHeight-ball.height/2; //reposition it
ballSpeedY
*= -1; //and reverse its y speed so that it is moving up now
}
}
-add your name and a title on a different layer
Now: Type CTRL-ENTER to test
Use WINDOW KEY + G – record your
part 2 stage in action
Upload to https://ezgif.com/ convert to a GIF and Post it.
https://as3gametuts.com/2011/08/31/pong-3/
https://as3gametuts.com/2011/09/13/pong-4/
https://as3gametuts.com/2011/09/24/pong-5/
https://as3gametuts.com/2011/09/28/pong-6/
