Основная механика: эффективно переключать состояния слоя и начальную позицию, чтобы имитировать появление бесконечных падающих шаров.

Предстоящие игры и/или игровые механики из этой серии

Настройтесь на утро четверга для новой записи в этой серии. Буду рад прочитать ваши предложения в комментариях.

  1. Выбор персонажа в штаб-квартире рейда [четверг, 23 июня]
  2. Бесконечный бегун [четверг, 30 июня]
  3. Guitar Hero [четверг, 7 июля]
  4. Карточный матч [четверг, 14 июля]
  5. Змея [четверг, 21 июля]
  6. Улавливатель мячей [четверг, 28 июля]
  7. Аркадный джойстик [четверг, 4 августа]
  8. Раздвижные блоки [четверг, 11 августа]
  9. Вертикальный платформер [четверг, 18 августа]
  10. Понг [четверг, 25 августа]
  11. Буря [четверг, 1 сентября]

Ссылка на прототип Framer

Как работает эта игра

Игрок управляет перетаскиваемым прямоугольником на экране, который может двигаться влево или вправо. Через случайные промежутки времени появится круг, который начнет падать из точки вдоль верхнего края экрана вниз. Игрок должен расположить прямоугольник под падающим кругом до того, как нижняя часть круга пересечет верхнюю часть прямоугольника, чтобы набрать очко и продолжить игру.

Элементы игры

  • Перетаскиваемый объект игрока и его границы
  • Многократно падающий круг
  • Магия, благодаря которой все это происходит

Перетаскиваемый объект игрока и его границы

# 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 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 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 выделена здесь

  • Слушатели событий
  • Состояния слоя
  • Глобальные переменные
  • Вспомогательные методы
  • Поток управления