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

피자를 쫓아라 (Chase the Pizza)

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

🎯 학습 목표:

  • 스프라이트 간의 상호작용(겹침/충돌) 이벤트를 이해합니다.
  • 랜덤(Random) 기능을 사용하여 게임의 예측 불가능성을 더합니다.
  • 카운트다운 타이머를 설정하여 긴장감 있는 게임을 만듭니다.
1

게임 소개

배고픈 플레이어가 피자를 찾아다닙니다!

시간이 다 되기 전에 가능한 한 많은 피자를 먹는 것이 목표인 게임을 만들어보세요.

Game animation
2

배경과 플레이어 만들기

먼저 게임의 무대와 주인공을 만들어봅시다.

  1. ||scene:장면|| 카테고리에서 ||scene:배경색 설정|| 블록을 가져와 ||loops:시작하면|| 블록 안에 넣으세요.
  2. ||sprites:스프라이트|| 카테고리에서 ||variables(sprites):[mySprite]를 스프라이트는 [ ]로, 종류는 [Player]로 설정|| 블록을 가져와 연결하세요.
  3. 회색 사각형을 클릭하여 여러분만의 캐릭터를 그리거나 갤러리에서 선택하세요.
Add sprite 
let mySprite: Sprite = null
// @highlight
scene.setBackgroundColor(13)
// @highlight
mySprite = sprites.create(img`
. . . . . 5 5 5 5 5 5 . . . . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . 5 5 5 5 5 5 5 5 5 5 5 5 . .
. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 .
. 5 5 5 f f 5 5 5 5 f f 5 5 5 .
5 5 5 5 f f 5 5 5 5 f f 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 f 5 5 5 5 5 5 5 5 5 5 f 5 5
5 5 5 f 5 5 5 5 5 5 5 5 f 5 5 5
. 5 5 5 f 5 5 5 5 5 5 f 5 5 5 .
. 5 5 5 5 f f f f f f 5 5 5 5 .
. . 5 5 5 5 5 5 5 5 5 5 5 5 . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . . . . 5 5 5 5 5 5 . . . . .
`, SpriteKind.Player)
3

캐릭터 움직이기

주인공이 키보드나 조이스틱에 반응하도록 해봅시다.

► ||controller:컨트롤러|| 카테고리에서 ||controller:[mySprite]를 버튼으로 이동|| 블록을 가져와 연결하세요.

이제 시뮬레이터나 키보드의 화살표 키(W, A, S, D)를 사용하여 캐릭터를 움직여보세요!

Add move block 
let mySprite: Sprite = null
// @highlight
scene.setBackgroundColor(13)
mySprite = sprites.create(img`
. . . . . 5 5 5 5 5 5 . . . . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . 5 5 5 5 5 5 5 5 5 5 5 5 . .
. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 .
. 5 5 5 f f 5 5 5 5 f f 5 5 5 .
5 5 5 5 f f 5 5 5 5 f f 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 f 5 5 5 5 5 5 5 5 5 5 f 5 5
5 5 5 f 5 5 5 5 5 5 5 5 f 5 5 5
. 5 5 5 f 5 5 5 5 5 5 f 5 5 5 .
. 5 5 5 5 f f f f f f 5 5 5 5 .
. . 5 5 5 5 5 5 5 5 5 5 5 5 . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . . . . 5 5 5 5 5 5 . . . . .
`, SpriteKind.Player)
// @highlight
controller.moveSprite(mySprite)
4

피자(음식) 만들기

이제 우리가 쫓아다닐 맛있는 피자를 추가해봅시다.

  1. ||sprites:스프라이트||에서 또 다른 ||variables(sprites):[mySprite]를 스프라이트 설정...|| 블록을 가져옵니다.
  2. 변수 이름 ||variables(noclick):[mySprite]||를 클릭하고 새로운 변수 이름...을 선택해 ||variables(noclick):[pizza]||로 바꿔주세요.
  3. 가장 중요한 것! 종류(Kind)를 Player에서 Food로 변경해야 합니다.
  4. 이미지 에디터에서 맛있는 피자를 그리거나 갤러리에서 선택하세요.
Pizza setup 
let pizza: Sprite = null
// @highlight
scene.setBackgroundColor(13)
mySprite = sprites.create(img`
. . . . . 5 5 5 5 5 5 . . . . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . 5 5 5 5 5 5 5 5 5 5 5 5 . .
. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 .
. 5 5 5 f f 5 5 5 5 f f 5 5 5 .
5 5 5 5 f f 5 5 5 5 f f 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 f 5 5 5 5 5 5 5 5 5 5 f 5 5
5 5 5 f 5 5 5 5 5 5 5 5 f 5 5 5
. 5 5 5 f 5 5 5 5 5 5 f 5 5 5 .
. 5 5 5 5 f f f f f f 5 5 5 5 .
. . 5 5 5 5 5 5 5 5 5 5 5 5 . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . . . . 5 5 5 5 5 5 . . . . .
`, SpriteKind.Player)
// @highlight
controller.moveSprite(mySprite)
// @highlight
pizza = sprites.create(img`
. . . . . . b b b b . . . . . .
. . . . . . b 4 4 4 b . . . . .
. . . . . . b b 4 4 4 b . . . .
. . . . . b 4 b b b 4 4 b . . .
. . . . b d 5 5 5 4 b 4 4 b . .
. . . . b 3 2 3 5 5 4 e 4 4 b .
. . . b d 2 2 2 5 7 5 4 e 4 4 e
. . . b 5 3 2 3 5 5 5 5 e e e e
. . b d 7 5 5 5 3 2 3 5 5 e e e
. . b 5 5 5 5 5 2 2 2 5 5 d e e
. b 3 2 3 5 7 5 3 2 3 5 d d e 4
. b 2 2 2 5 5 5 5 5 5 d d e 4 .
b d 3 2 d 5 5 5 d d d 4 4 . . .
b 5 5 5 5 d d 4 4 4 4 . . . . .
4 d d d 4 4 4 . . . . . . . . .
4 4 4 4 . . . . . . . . . . . .
`, SpriteKind.Food)
5

피자를 먹으면 점수 얻기

플레이어가 피자에 닿았을 때 점수를 얻도록 만들어봅시다.

► ||sprites:스프라이트|| 카테고리에서 ||sprites:스프라이트 종류가 [Player]인 [sprite]가 스프라이트 종류 [Food] [otherSprite]와 닿았을 때|| 블록을 빈 공간에 꺼내세요.

► 그 안에 ||info:정보|| 카테고리의 ||info:점수 변화 값 [1]|| 블록을 넣습니다.

sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    // @highlight
    info.changeScoreBy(1)
})
6

피자 위치 바꾸기

피자를 먹고 나면, 피자가 다른 곳으로 도망가야겠죠?

► ||sprites:스프라이트||에서 ||sprites:[pizza] 위치 설정 x...|| 블록을 가져와 닿았을 때 블록 안에 넣습니다.

► ||math:계산|| 카테고리의 ||math:[0]부터 [10]까지의 정수 랜덤값|| 블록을 사용하여 X와 Y 좌표를 랜덤하게 설정합니다.

💡 팁: 화면 전체를 사용하려면 랜덤값 범위를 0부터 ||scene:화면 너비||(160) 또는 ||scene:화면 높이||(120)로 설정하면 좋습니다. 
let pizza: Sprite = null
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    info.changeScoreBy(1)
    // @highlight
    pizza.setPosition(randint(0, scene.screenWidth()), randint(0, scene.screenHeight()))
})
7

제한 시간 설정

피자를 먹을 때마다 카운트다운을 다시 시작하여 긴장감을 줍시다!

► ||info:정보|| 카테고리에서 ||info:카운트다운 시작 [3] (s)|| 블록을 가져와 닿았을 때 블록의 맨 끝에 넣으세요.

이제 3초 안에 다음 피자를 먹지 못하면 게임 오버가 됩니다.

let pizza: Sprite = null
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    info.changeScoreBy(1)
    pizza.setPosition(randint(0, scene.screenWidth()), randint(0, scene.screenHeight()))
    // @highlight
    info.startCountdown(3)
})
🎉

완성!

축하합니다! '피자를 쫓아라' 게임을 완성했습니다.

친구들과 누가 더 많은 피자를 먹는지 대결해보세요.

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

Game animation 
let pizza: Sprite = null
let mySprite: Sprite = null
scene.setBackgroundColor(13)
mySprite = sprites.create(img`
. . . . . 5 5 5 5 5 5 . . . . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . 5 5 5 5 5 5 5 5 5 5 5 5 . .
. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 .
. 5 5 5 f f 5 5 5 5 f f 5 5 5 .
5 5 5 5 f f 5 5 5 5 f f 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
5 5 f 5 5 5 5 5 5 5 5 5 5 f 5 5
5 5 5 f 5 5 5 5 5 5 5 5 f 5 5 5
. 5 5 5 f 5 5 5 5 5 5 f 5 5 5 .
. 5 5 5 5 f f f f f f 5 5 5 5 .
. . 5 5 5 5 5 5 5 5 5 5 5 5 . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . . . . 5 5 5 5 5 5 . . . . .
`, SpriteKind.Player)
controller.moveSprite(mySprite)
pizza = sprites.create(img`
. . . . . . b b b b . . . . . .
. . . . . . b 4 4 4 b . . . . .
. . . . . . b b 4 4 4 b . . . .
. . . . . b 4 b b b 4 4 b . . .
. . . . b d 5 5 5 4 b 4 4 b . .
. . . . b 3 2 3 5 5 4 e 4 4 b .
. . . b d 2 2 2 5 7 5 4 e 4 4 e
. . . b 5 3 2 3 5 5 5 5 e e e e
. . b d 7 5 5 5 3 2 3 5 5 e e e
. . b 5 5 5 5 5 2 2 2 5 5 d e e
. b 3 2 3 5 7 5 3 2 3 5 d d e 4
. b 2 2 2 5 5 5 5 5 5 d d e 4 .
b d 3 2 d 5 5 5 d d d 4 4 . . .
b 5 5 5 5 d d 4 4 4 4 . . . . .
4 d d d 4 4 4 . . . . . . . . .
4 4 4 4 . . . . . . . . . . . .
`, SpriteKind.Food)

sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    info.changeScoreBy(1)
    pizza.setPosition(randint(0, scene.screenWidth()), randint(0, scene.screenHeight()))
    info.startCountdown(3)
})