Framer for Games: Pong

Core mechanic: Adding states to a layer via a loop and switching states automatically

Upcoming games and/or game mechanics in this series

Tune in Thursday mornings for a new entry in this series. I’d love to read your suggestions in the comments.

1. Raid HQ Character Selection [Thursday, June 23]
2. Endless Runner [Thursday, June 30]
3. Guitar Hero [Thursday, July 7]
4. Card Match [Thursday, July 14]
5. Snake [Thursday, July 21]
6. Dropping Ball Catcher [Thursday, July 28]
7. Arcade Joystick [Thursday, August 4]
8. Sliding Blocks [Thursday, August 11]
9. Vertical Platformer [Thursday, August 18]
10. Pong [Thursday, August 25]
11. Tempest [Thursday, September 1]

Link to Framer Prototype

Pong is the “Hello world” of games

• Player and opponent
• Single game object
• 2D game stage
• Individual scores

How the ball moves

By way of a loop, the ball layer is assigned 100 new states where a new x and y position are set. X position will be either far left or far right side of the screen depending an even or odd iteration. Y position will be a random value between screen top and bottom.

# Game ball movement
for i in [0..100]
 if i % 2 == 0
  returning = true
 else
  returning = false
 ball.states.add
  "#{i}":
   x: if returning then Screen.width - ball.width * 2 else ball.width
   y: Utils.randomNumber(0, Screen.height - ball.height)

Each time the ball changes its state, its position is checked against whether its y position is between the top and bottom of the paddle that it shares a screen edge with. If its not, then the player didn’t get to the ball in time, thus the enemy’s score should go up by one.

ball.on Events.StateDidSwitch, ->
 ball.states.next()
 if ball.x < Screen.width / 2 && 
   (ball.maxY > playerPaddle.maxY || ball.y < playerPaddle.y)
  enemyScore += 1
  Utils.labelLayer(enemyScoreArea, enemyScore)
  enemyScoreArea.style = fontSize: "144px"

The game is also completely unfair because the enemy paddle follows the movement of the ball.

ball.on "change:y", ->
 enemyPaddle.midY = ball.midY

The rest is just basic layers, to be honest.

All in all, Pong — recreated in under 70 lines of code. Pretty cool.

Framer/CoffeeScript mechanics highlighted here

• Event listeners
• Layer states
• Control flow
• Global variables