Framer for Games: Dropping Ball Catcher

Core mechanic: Effectively switching a layer’s states and start position to fake appearance of infinite dropping balls

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

How this game works

The player controls a draggable rectangle on the screen that can move left or right. In random intervals, a circle will appear and begin falling from a point along the top edge of the screen towards the bottom. The player must position the rectangle underneath the falling circle before the bottom of the circle passes the top of the rectangle, in order to score a point and continue the game.

Game elements

• Draggable player object and itsboundaries
• Repeatedly dropping circle
• The magic that makes it all happen

Draggable player object and its boundaries

# Create player layer
player = new Layer
 x: Align.center
 y: Align.bottom
 width: 100
 backgroundColor: "white"

# Make player draggable
player.draggable.enabled = yes

# Limit player to horizontal dragging
player.draggable.vertical = no

# Limit drag area to between edges of screen
player.draggable.constraints = 
 x: 0
 y: Screen.height - player.height
 width: Screen.width
 height: player.height

Dropping ball

# Dropping ball layer
projectile = new Layer
 width: 50, height: 50
 y: 150
 opacity: 0
 borderRadius: 25
 backgroundColor: "red"

# Set states for dropped ball and caught ball
projectile.states.add
 end:
  y: Screen.height
 caught:
  opacity: 0

Game logic

# Game Mechanics

# Custom function: Reset dropping ball to top of screen at random horizontal position
resetProjectile = ->
 projectile.x = Utils.randomNumber 0, (Screen.width - 50)
 projectile.y = 150
 projectile.opacity = 1

# Every two seconds: Reset dropping ball and transition its state
Utils.interval 2, ->
 resetProjectile()
 projectile.states.switch "end"

# Listen as ball drops (a.k.a. moves on y-axis)
projectile.on "change:y", ->
 # If ball and player object line up correctly...
 if (projectile.midY.toFixed(0) >= 1134 && projectile.midY.toFixed(0) <= 1140) && (projectile.midX.toFixed(0) > player.x && projectile.midX.toFixed(0) < player.maxX)
  # Transition ball state to caught (make it disappear until it resets)
  projectile.states.switchInstant "caught"
  # Increment player score by 1
  numCorrect += 1
 # If ball and player object do not line up
 else if projectile.maxY > Screen.height && (projectile.midX.toFixed(0) <= player.x || projectile.midX.toFixed(0) >= player.maxX)
  # Display gameover screen
  gameOver.visible = yes
  projectile.destroy()
  Utils.labelLayer(gameOver, "Collected: #{numCorrect}")
  gameOver.style = fontSize: "72px"

Framer/CoffeeScript mechanics highlighted here

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