즙이 새는 레몬
🎯 학습 목표:
- 배경색(Background Color)을 설정하고 플레이어 캐릭터를 만듭니다.
- 게임 루프(Update Interval)를 사용하여 적(딸기)을 주기적으로 생성합니다.
- 랜덤(Random) 값을 이용해 적의 움직임을 예측 불가능하게 만듭니다.
- 충돌 시 스프레이 효과(Spray Effect)와 점수 변화를 구현합니다.
1
레몬 등장시키기
먼저 배경을 설정하고 주인공인 레몬을 만들어 봅시다.
||scene:장면||에서||scene:배경색 설정||을 가져와 보라색(10)으로 설정합니다.||sprites:스프라이트||에서||variables(sprites):[mySprite]를 ~로 설정||블록을 가져옵니다.- 레몬 이미지를 그리고,
||controller:컨트롤러||의||controller:[mySprite]를 버튼으로 이동||블록을 연결합니다.
// @highlight
scene.setBackgroundColor(10)
// @highlight
let mySprite = sprites.create(img`
4 4 4 . . 4 4 4 4 4 . . . . . .
4 5 5 4 4 5 5 5 5 5 4 4 . . . .
b 4 5 5 1 5 1 1 1 5 5 5 4 . . .
. b 5 5 5 5 1 1 5 5 1 1 5 4 . .
. b d 5 5 5 5 5 5 5 5 1 1 5 4 .
b 4 5 5 5 5 5 5 5 5 5 5 1 5 4 .
c d 5 5 5 5 5 5 5 5 5 5 5 5 5 4
c d 4 5 5 5 5 5 5 5 5 5 5 1 5 4
c 4 5 5 5 d 5 5 5 5 5 5 5 5 5 4
c 4 d 5 4 5 d 5 5 5 5 5 5 5 5 4
. c 4 5 5 5 5 d d d 5 5 5 5 5 b
. c 4 d 5 4 5 d 4 4 d 5 5 5 4 c
. . c 4 4 d 4 4 4 4 4 d d 5 d c
. . . c 4 4 4 4 4 4 4 4 5 5 5 4
. . . . c c b 4 4 4 b b 4 5 4 4
. . . . . . c c c c c c b b 4 .
`, SpriteKind.Player)
// @highlight
controller.moveSprite(mySprite)2
화면 유지 및 타이머 설정
레몬이 도망가지 못하게 막고, 게임 시간을 정해봅시다.
► ||sprites:[mySprite] 화면에 머무르기 기능 <켬>|| 블록을 추가하세요.
► ||info:정보|| 카테고리에서 ||info:카운트다운 시작 [10](s)|| 블록을 가져와 시간을 30초로 변경합니다.
scene.setBackgroundColor(10)
let mySprite = sprites.create(img`
4 4 4 . . 4 4 4 4 4 . . . . . .
4 5 5 4 4 5 5 5 5 5 4 4 . . . .
b 4 5 5 1 5 1 1 1 5 5 5 4 . . .
. b 5 5 5 5 1 1 5 5 1 1 5 4 . .
. b d 5 5 5 5 5 5 5 5 1 1 5 4 .
b 4 5 5 5 5 5 5 5 5 5 5 1 5 4 .
c d 5 5 5 5 5 5 5 5 5 5 5 5 5 4
c d 4 5 5 5 5 5 5 5 5 5 5 1 5 4
c 4 5 5 5 d 5 5 5 5 5 5 5 5 5 4
c 4 d 5 4 5 d 5 5 5 5 5 5 5 5 4
. c 4 5 5 5 5 d d d 5 5 5 5 5 b
. c 4 d 5 4 5 d 4 4 d 5 5 5 4 c
. . c 4 4 d 4 4 4 4 4 d d 5 d c
. . . c 4 4 4 4 4 4 4 4 5 5 5 4
. . . . c c b 4 4 4 b b 4 5 4 4
. . . . . . c c c c c c b b 4 .
`, SpriteKind.Player)
controller.moveSprite(mySprite)
// @highlight
mySprite.setStayInScreen(true)
// @highlight
info.startCountdown(30)3
딸기 공격 개시!
이제 딸기들이 나타나 공격하도록 만들어 봅시다.
► ||game:게임||에서 ||game:게임 업데이트시 [1000] ms 마다|| 블록을 가져옵니다.
► 그 안에 ||sprites:[projectile]를 발사체 ~로 설정|| 블록을 넣고 딸기를 그립니다. (createProjectileFromSide 블록 사용)
let projectile: Sprite = null
// @highlight
game.onUpdateInterval(1000, function () {
projectile = sprites.createProjectileFromSide(img`
. . . . . . . 6 . . . . . . . .
. . . . . . 8 6 6 . . . 6 8 . .
. . . e e e 8 8 6 6 . 6 7 8 . .
. . e 2 2 2 2 e 8 6 6 7 6 . . .
. e 2 2 4 4 2 7 7 7 7 7 8 6 . .
. e 2 4 4 2 6 7 7 7 6 7 6 8 8 .
e 2 4 5 2 2 6 7 7 6 2 7 7 6 . .
e 2 4 4 2 2 6 7 6 2 2 6 7 7 6 .
e 2 4 2 2 2 6 6 2 2 2 e 7 7 6 .
e 2 4 2 2 4 2 2 2 4 2 2 e 7 6 .
e 2 4 2 2 2 2 2 2 2 2 2 e c 6 .
e 2 2 2 2 2 2 2 4 e 2 e e c . .
e e 2 e 2 2 4 2 2 e e e c . . .
e e e e 2 e 2 2 e e e c . . . .
e e e 2 e e c e c c c . . . . .
. c c c c c c c . . . . . . . .
`, 50, 50)
})4
랜덤한 움직임
딸기가 매번 다른 방향으로 날아가도록 속도를 랜덤하게 바꿔봅시다.
► ||math:계산||의 ||math:[0]부터 [10]까지의 정수 랜덤값|| 블록을 vx와 vy 슬롯에 넣습니다.
► 범위를 각각 -50 에서 50으로 변경하세요.
let projectile: Sprite = null
game.onUpdateInterval(1000, function () {
// @highlight
projectile = sprites.createProjectileFromSide(img`
. . . . . . . 6 . . . . . . . .
. . . . . . 8 6 6 . . . 6 8 . .
. . . e e e 8 8 6 6 . 6 7 8 . .
. . e 2 2 2 2 e 8 6 6 7 6 . . .
. e 2 2 4 4 2 7 7 7 7 7 8 6 . .
. e 2 4 4 2 6 7 7 7 6 7 6 8 8 .
e 2 4 5 2 2 6 7 7 6 2 7 7 6 . .
e 2 4 4 2 2 6 7 6 2 2 6 7 7 6 .
e 2 4 2 2 2 6 6 2 2 2 e 7 7 6 .
e 2 4 2 2 4 2 2 2 4 2 2 e 7 6 .
e 2 4 2 2 2 2 2 2 2 2 2 e c 6 .
e 2 2 2 2 2 2 2 4 e 2 e e c . .
e e 2 e 2 2 4 2 2 e e e c . . .
e e e e 2 e 2 2 e e e c . . . .
e e e 2 e e c e c c c . . . . .
. c c c c c c c . . . . . . . .
`, randint(-50, 50), randint(-50, 50))
})5
즙이 샌다! (충돌 효과)
딸기에 맞으면 레몬 즙이 튀는 효과를 만들어 봅시다.
► ||sprites:스프라이트||에서 ||sprites:스프라이트 종류가 [Player]인 ... [Projectile]과 닿았을 때|| 블록을 가져옵니다.
► 닿으면 ||sprites:[mySprite]에 효과 부여 [spray] [200] ms|| 블록을 실행하게 하세요.
let mySprite: Sprite = null
// @highlight
sprites.onOverlap(SpriteKind.Player, SpriteKind.Projectile, function (sprite, otherSprite) {
mySprite.startEffect(effects.spray, 200)
})6
점수 획득
마지막으로 딸기에 맞을 때마다 점수가 올라가도록 합니다.
► ||info:정보|| 카테고리의 ||info:점수 변화 값 [1]|| 블록을 충돌 이벤트 안에 추가하세요.
이제 30초 동안 레몬을 조종하며 게임을 즐겨보세요!
let mySprite: Sprite = null
sprites.onOverlap(SpriteKind.Player, SpriteKind.Projectile, function (sprite, otherSprite) {
mySprite.startEffect(effects.spray, 200)
// @highlight
info.changeScoreBy(1)
})🎉
완성!
축하합니다! 즙이 새는 레몬 게임을 완성했습니다.
30초 동안 얼마나 많은 점수를(또는 즙을?) 얻을 수 있는지 확인해 보세요.
아래는 완성된 전체 블록 코드입니다.
let projectile: Sprite = null
let mySprite: Sprite = null
scene.setBackgroundColor(10)
mySprite = sprites.create(img`
4 4 4 . . 4 4 4 4 4 . . . . . .
4 5 5 4 4 5 5 5 5 5 4 4 . . . .
b 4 5 5 1 5 1 1 1 5 5 5 4 . . .
. b 5 5 5 5 1 1 5 5 1 1 5 4 . .
. b d 5 5 5 5 5 5 5 5 1 1 5 4 .
b 4 5 5 5 5 5 5 5 5 5 5 1 5 4 .
c d 5 5 5 5 5 5 5 5 5 5 5 5 5 4
c d 4 5 5 5 5 5 5 5 5 5 5 1 5 4
c 4 5 5 5 d 5 5 5 5 5 5 5 5 5 4
c 4 d 5 4 5 d 5 5 5 5 5 5 5 5 4
. c 4 5 5 5 5 d d d 5 5 5 5 5 b
. c 4 d 5 4 5 d 4 4 d 5 5 5 4 c
. . c 4 4 d 4 4 4 4 4 d d 5 d c
. . . c 4 4 4 4 4 4 4 4 5 5 5 4
. . . . c c b 4 4 4 b b 4 5 4 4
. . . . . . c c c c c c b b 4 .
`, SpriteKind.Player)
controller.moveSprite(mySprite)
mySprite.setStayInScreen(true)
info.startCountdown(30)
game.onUpdateInterval(1000, function () {
projectile = sprites.createProjectileFromSide(img`
. . . . . . . 6 . . . . . . . .
. . . . . . 8 6 6 . . . 6 8 . .
. . . e e e 8 8 6 6 . 6 7 8 . .
. . e 2 2 2 2 e 8 6 6 7 6 . . .
. e 2 2 4 4 2 7 7 7 7 7 8 6 . .
. e 2 4 4 2 6 7 7 7 6 7 6 8 8 .
e 2 4 5 2 2 6 7 7 6 2 7 7 6 . .
e 2 4 4 2 2 6 7 6 2 2 6 7 7 6 .
e 2 4 2 2 2 6 6 2 2 2 e 7 7 6 .
e 2 4 2 2 4 2 2 2 4 2 2 e 7 6 .
e 2 4 2 2 2 2 2 2 2 2 2 e c 6 .
e 2 2 2 2 2 2 2 4 e 2 e e c . .
e e 2 e 2 2 4 2 2 e e e c . . .
e e e e 2 e 2 2 e e e c . . . .
e e e 2 e e c e c c c . . . . .
. c c c c c c c . . . . . . . .
`, randint(-50, 50), randint(-50, 50))
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Projectile, function (sprite, otherSprite) {
mySprite.startEffect(effects.spray, 200)
info.changeScoreBy(1)
})