아케이드 티딩 가이드 목록으로
🚀 직접 따라해보기

빠른 파리

💡 참고: 이 가이드는 메이크코드 아케이드 튜토리얼 Time Flies를 바탕으로 제작되었습니다.

🎯 학습 목표:

  • 스프라이트의 좌표(Position)를 설정하여 원하는 위치에 배치합니다.
  • 튕기기(Bounce on wall) 기능을 사용하여 캐릭터가 화면 밖으로 나가는 것을 방지합니다.
  • 조건문(If/Else)과 겹침(Overlap) 블록을 조합하여 타이밍 게임을 만듭니다.
1

개구리와 배경 만들기

파리를 잡을 주인공 개구리를 등장시켜 볼까요?

  1. ||scene:장면||에서 ||scene:배경 이미지 설정|| 블록을 가져와 숲이나 연못 배경을 그립니다.
  2. ||sprites:스프라이트||에서 ||variables(sprites):[frog]를 스프라이트 설정...|| 블록을 가져옵니다.
  3. 변수 이름을 frog(개구리)로 바꾸고 귀여운 개구리를 그려주세요.
  4. 개구리가 화면 중앙 아래쪽에 위치하도록 ||sprites:[frog] 위치 설정 x...|| 블록을 연결하고 좌표를 x: 85, y: 80으로 조정합니다.
Frog Animation 
scene.setBackgroundImage(sprites.background.lilypads)
// @highlight
let frog = sprites.create(img`
    . . . . . . . . . . 8 8 8 . . 8 8 8 . . . . . . . . . .
    . . . . . . . . . 8 5 7 7 8 8 5 7 7 8 . . . . . . . . .
    . . . . . . . . 8 5 7 7 7 7 7 7 7 7 7 8 . . . . . . . .
    . . . . . . . . 8 7 8 8 7 7 7 7 8 8 7 8 . . . . . . . .
    . . . . . . . . 8 7 8 f 7 7 7 7 8 f 7 8 . . . . . . . .
    . . . . . . . 8 7 7 7 7 7 7 7 7 7 7 7 7 8 . . . . . . .
    . . . . . . . 8 3 3 7 7 7 7 7 7 7 3 3 8 8 . . . . . . .
    . . . . . . 8 7 3 3 7 7 8 8 8 8 7 7 3 3 7 8 . . . . . .
    . . . . . . 8 7 7 7 7 8 d d d d 8 7 7 7 7 8 . . . . . .
    . . . . . . 8 d 8 8 8 d d d d d d 8 8 8 d 8 . . . . . .
    . . . . . . 8 d d d d d d d d d d d d d d 8 . . . . . .
    . . . . . . . 8 d d d d d d d d d d d d 8 . . . . . . .
    . . . . . . . . 8 8 8 8 8 8 8 8 8 8 8 8 . . . . . . . .
    . . . . . . . 8 5 7 7 7 7 7 7 7 7 7 7 5 8 . . . . . . .
    . . . . . . 8 5 7 7 7 7 7 7 7 7 7 7 7 7 5 8 . . . . . .
    . . . . . 8 5 7 7 7 7 7 d d d d 7 7 7 7 7 5 8 . . . . .
    . . . . 8 8 7 7 7 7 7 d d d d d d 7 7 7 7 7 8 8 . . . .
    . . . 8 5 8 7 7 7 8 d d d d d d d d 8 7 7 7 8 5 8 . . .
    . . . 8 7 8 7 7 8 d d d d d d d d d d 8 7 7 8 7 8 . . .
    . . . 8 7 8 7 7 8 d d d d d d d d d d 8 7 7 8 7 8 . . .
    . . . 8 7 8 7 7 8 d d d d d d d d d d 8 7 7 8 7 8 . . .
    . . . 8 7 8 7 7 7 8 d d d d d d d d 8 7 7 7 8 7 8 . . .
    . . . 8 7 7 8 7 8 d d d d d d d d d d 8 7 8 7 7 8 . . .
    . . 8 7 7 8 7 7 7 8 d d d d d d d d 8 7 7 7 8 7 7 8 . .
    . 8 8 8 8 7 8 7 8 7 8 d d d d d d 8 7 8 7 8 7 8 8 8 8 .
    c c c c c c c c c c c c c c c c c c c c c c c c c c c c
    . c c c c c c c c c c c c c c c c c c c c c c c c c c .
    . . c c c c c c c c c c c c c c c c c c c c c c c c . .
`, SpriteKind.Player)
// @highlight
frog.setPosition(85, 80)
2

날아다니는 파리 추가하기

개구리의 먹이가 될 파리를 만들고 움직이게 해봅시다.

► ||sprites:스프라이트|| 생성 블록을 하나 더 추가하고 변수 이름을 fly(파리), 종류를 Food(음식)로 변경합니다.

► 파리가 빠르게 날아다니도록 ||sprites:[fly] 속도 설정|| 블록을 연결합니다. vx와 vy에 100~200 사이의 값을 넣어보세요.

► 파리가 화면 밖으로 도망가지 못하게 ||sprites:[fly] 벽에 닿으면 튕기기||를 <켬>으로 설정하는 것을 잊지 마세요!

// @highlight
let fly = sprites.create(img`
    . . . 1 . 1 . 1 . .
    . . 1 . 1 . 1 . 1 .
    . . . 1 f 1 f 1 . .
    . f . f 1 f 1 f . .
    f f f f f f f f f .
    f f f f f f f f f f
    f f f f f f f f f .
    . f . f 1 f 1 f . .
    . . . 1 f 1 f 1 . .
    . . 1 . 1 . 1 . 1 .
    . . . 1 . 1 . 1 . .
`, SpriteKind.Food)
// @highlight
fly.setVelocity(200, 100)
// @highlight
fly.setBounceOnWall(true)
3

타이밍 맞춰 잡기! (조건문)

버튼을 눌렀을 때 파리를 잡았는지 확인하는 로직이 필요합니다.

► ||controller:컨트롤러||의 ||controller:[A] 버튼을 [누를 때]|| 블록을 빈 공간에 꺼냅니다.

► ||logic:논리|| 카테고리에서 ||logic:만약 [참] 이면 / 아니면|| 블록을 안에 넣습니다.

► 조건 부분인 <참> 자리에 ||sprites:<[frog]가 [fly]와 겹치면>|| 블록을 끼워 넣습니다. (스프라이트 카테고리의 '겹침' 관련 블록을 찾아보세요)

💡 팁: 만약 블록이 회색으로 보인다면 걱정하지 마세요. 전체 코드가 합쳐지면 정상적으로 작동합니다. 
let frog: Sprite = null
let fly: Sprite = null
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    // @highlight
    if (frog.overlapsWith(fly)) {

    } else {

    }
})
4

성공과 실패 규칙 정하기

파리를 잡았을 때와 놓쳤을 때 어떤 일이 일어날지 정해봅시다.

  1. 만약(if) 겹쳤다면(잡았다면):
    ||game:게임|| 카테고리의 ||game:게임 종료 <승리>|| 블록을 넣어 게임을 클리어하게 합니다.
  2. 아니면(else) (놓쳤다면):
    ||info:정보|| 카테고리의 ||info:생명치 변화 값 [-1]|| 블록을 넣어 생명을 깎습니다.
let frog: Sprite = null
let fly: Sprite = null
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    if (frog.overlapsWith(fly)) {
        // @highlight
        game.over(true)
    } else {
        // @highlight
        info.changeLifeBy(-1)
    }
})
5

긴장감 더하기 (타이머)

너무 오랫동안 기다릴 순 없죠! 제한 시간을 둬봅시다.

► ||info:정보|| 카테고리에서 ||info:카운트다운 시작 [10] (s)|| 블록을 가져와 시작하면 블록의 맨 마지막에 연결하세요.

이제 10초 안에 날아다니는 파리를 잡아야 합니다!

scene.setBackgroundImage(sprites.background.lilypads)
let frog = sprites.create(img`
    . . . . . . . . . . 8 8 8 . . 8 8 8 . . . . . . . . . .
    . . . . . . . . . 8 5 7 7 8 8 5 7 7 8 . . . . . . . . .
    . . . . . . . . 8 5 7 7 7 7 7 7 7 7 7 8 . . . . . . . .
    . . . . . . . . 8 7 8 8 7 7 7 7 8 8 7 8 . . . . . . . .
    . . . . . . . . 8 7 8 f 7 7 7 7 8 f 7 8 . . . . . . . .
    . . . . . . . 8 7 7 7 7 7 7 7 7 7 7 7 7 8 . . . . . . .
    . . . . . . . 8 3 3 7 7 7 7 7 7 7 3 3 8 8 . . . . . . .
    . . . . . . 8 7 3 3 7 7 8 8 8 8 7 7 3 3 7 8 . . . . . .
    . . . . . . 8 7 7 7 7 8 d d d d 8 7 7 7 7 8 . . . . . .
    . . . . . . 8 d 8 8 8 d d d d d d 8 8 8 d 8 . . . . . .
    . . . . . . 8 d d d d d d d d d d d d d d 8 . . . . . .
    . . . . . . . 8 d d d d d d d d d d d d 8 . . . . . . .
    . . . . . . . . 8 8 8 8 8 8 8 8 8 8 8 8 . . . . . . . .
    . . . . . . . 8 5 7 7 7 7 7 7 7 7 7 7 5 8 . . . . . . .
    . . . . . . 8 5 7 7 7 7 7 7 7 7 7 7 7 7 5 8 . . . . . .
    . . . . . 8 5 7 7 7 7 7 d d d d 7 7 7 7 7 5 8 . . . . .
    . . . . 8 8 7 7 7 7 7 d d d d d d 7 7 7 7 7 8 8 . . . .
    . . . 8 5 8 7 7 7 8 d d d d d d d d 8 7 7 7 8 5 8 . . .
    . . . 8 7 8 7 7 8 d d d d d d d d d d 8 7 7 8 7 8 . . .
    . . . 8 7 8 7 7 8 d d d d d d d d d d 8 7 7 8 7 8 . . .
    . . . 8 7 8 7 7 8 d d d d d d d d d d 8 7 7 8 7 8 . . .
    . . . 8 7 8 7 7 7 8 d d d d d d d d 8 7 7 7 8 7 8 . . .
    . . . 8 7 7 8 7 8 d d d d d d d d d d 8 7 8 7 7 8 . . .
    . . 8 7 7 8 7 7 7 8 d d d d d d d d 8 7 7 7 8 7 7 8 . .
    . 8 8 8 8 7 8 7 8 7 8 d d d d d d 8 7 8 7 8 7 8 8 8 8 .
    c c c c c c c c c c c c c c c c c c c c c c c c c c c c
    . c c c c c c c c c c c c c c c c c c c c c c c c c c .
    . . c c c c c c c c c c c c c c c c c c c c c c c c . .
`, SpriteKind.Player)
frog.setPosition(85, 80)
let fly = sprites.create(img`
    . . . 1 . 1 . 1 . .
    . . 1 . 1 . 1 . 1 .
    . . . 1 f 1 f 1 . .
    . f . f 1 f 1 f . .
    f f f f f f f f f .
    f f f f f f f f f f
    f f f f f f f f f .
    . f . f 1 f 1 f . .
    . . . 1 f 1 f 1 . .
    . . 1 . 1 . 1 . 1 .
    . . . 1 . 1 . 1 . .
`, SpriteKind.Food)
fly.setVelocity(200, 100)
fly.setBounceOnWall(true)
// @highlight
info.startCountdown(10)
🎉

완성!

축하합니다! 빠른 파리 잡기 게임을 완성했습니다.

파리의 속도를 더 빠르게 하거나, 생명 개수를 조절하여 나만의 난이도로 만들어보세요.

아래는 완성된 전체 블록 코드입니다.

Game Win 
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    if (frog.overlapsWith(fly)) {
        game.over(true)
    } else {
        info.changeLifeBy(-1)
    }
})
let frog: Sprite = null
let fly: Sprite = null
scene.setBackgroundImage(sprites.background.lilypads)
frog = sprites.create(img`
    . . . . . . . . . . 8 8 8 . . 8 8 8 . . . . . . . . . .
    . . . . . . . . . 8 5 7 7 8 8 5 7 7 8 . . . . . . . . .
    . . . . . . . . 8 5 7 7 7 7 7 7 7 7 7 8 . . . . . . . .
    . . . . . . . . 8 7 8 8 7 7 7 7 8 8 7 8 . . . . . . . .
    . . . . . . . . 8 7 8 f 7 7 7 7 8 f 7 8 . . . . . . . .
    . . . . . . . 8 7 7 7 7 7 7 7 7 7 7 7 7 8 . . . . . . .
    . . . . . . . 8 3 3 7 7 7 7 7 7 7 3 3 8 8 . . . . . . .
    . . . . . . 8 7 3 3 7 7 8 8 8 8 7 7 3 3 7 8 . . . . . .
    . . . . . . 8 7 7 7 7 8 d d d d 8 7 7 7 7 8 . . . . . .
    . . . . . . 8 d 8 8 8 d d d d d d 8 8 8 d 8 . . . . . .
    . . . . . . 8 d d d d d d d d d d d d d d 8 . . . . . .
    . . . . . . . 8 d d d d d d d d d d d d 8 . . . . . . .
    . . . . . . . . 8 8 8 8 8 8 8 8 8 8 8 8 . . . . . . . .
    . . . . . . . 8 5 7 7 7 7 7 7 7 7 7 7 5 8 . . . . . . .
    . . . . . . 8 5 7 7 7 7 7 7 7 7 7 7 7 7 5 8 . . . . . .
    . . . . . 8 5 7 7 7 7 7 d d d d 7 7 7 7 7 5 8 . . . . .
    . . . . 8 8 7 7 7 7 7 d d d d d d 7 7 7 7 7 8 8 . . . .
    . . . 8 5 8 7 7 7 8 d d d d d d d d 8 7 7 7 8 5 8 . . .
    . . . 8 7 8 7 7 8 d d d d d d d d d d 8 7 7 8 7 8 . . .
    . . . 8 7 8 7 7 8 d d d d d d d d d d 8 7 7 8 7 8 . . .
    . . . 8 7 8 7 7 8 d d d d d d d d d d 8 7 7 8 7 8 . . .
    . . . 8 7 8 7 7 7 8 d d d d d d d d 8 7 7 7 8 7 8 . . .
    . . . 8 7 7 8 7 8 d d d d d d d d d d 8 7 8 7 7 8 . . .
    . . 8 7 7 8 7 7 7 8 d d d d d d d d 8 7 7 7 8 7 7 8 . .
    . 8 8 8 8 7 8 7 8 7 8 d d d d d d 8 7 8 7 8 7 8 8 8 8 .
    c c c c c c c c c c c c c c c c c c c c c c c c c c c c
    . c c c c c c c c c c c c c c c c c c c c c c c c c c .
    . . c c c c c c c c c c c c c c c c c c c c c c c c . .
`, SpriteKind.Player)
frog.setPosition(85, 80)
fly = sprites.create(img`
    . . . 1 . 1 . 1 . .
    . . 1 . 1 . 1 . 1 .
    . . . 1 f 1 f 1 . .
    . f . f 1 f 1 f . .
    f f f f f f f f f .
    f f f f f f f f f f
    f f f f f f f f f .
    . f . f 1 f 1 f . .
    . . . 1 f 1 f 1 . .
    . . 1 . 1 . 1 . 1 .
    . . . 1 . 1 . 1 . .
`, SpriteKind.Food)
fly.setVelocity(200, 100)
fly.setBounceOnWall(true)
info.startCountdown(10)