Основная механика: эффективно переключать состояния слоя и начальную позицию, чтобы имитировать появление бесконечных падающих шаров.
Предстоящие игры и/или игровые механики из этой серии
Настройтесь на утро четверга для новой записи в этой серии. Буду рад прочитать ваши предложения в комментариях.
- Выбор персонажа в штаб-квартире рейда [четверг, 23 июня]
- Бесконечный бегун [четверг, 30 июня]
- Guitar Hero [четверг, 7 июля]
- Карточный матч [четверг, 14 июля]
- Змея [четверг, 21 июля]
- Улавливатель мячей [четверг, 28 июля]
- Аркадный джойстик [четверг, 4 августа]
- Раздвижные блоки [четверг, 11 августа]
- Вертикальный платформер [четверг, 18 августа]
- Понг [четверг, 25 августа]
- Буря [четверг, 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 выделена здесь
- Слушатели событий
- Состояния слоя
- Глобальные переменные
- Вспомогательные методы
- Поток управления