컴퓨터와 핸드폰에서 모두 사용할 수 있는 게임을 위즈랩(wizlab.net)에서 만들어 봐요.
이번에는 지난 호에 만들었던 파이어 드래곤 게임에 보스 몬스터를 추가할 거예요.
거대한 보스 몬스터가 발사하는 공격을 파이어 드래곤으로 요리조리 피해가면서 파이어 미사일을 쏘아 보스 몬스터를 쓰러뜨려 봅시다. 자, 그럼 위즈랩에 접속해 볼까요?
실전코딩 준비하기
두둥! 보스 몬스터 등장시키기
보스 몬스터는 다른 몬스터보다 체력(HP)과 맷집이 좋아요. 그래서 훈쌤은 보스 몬스터의 체력을 100으로 정하고, 파이어 미사일을 맞을 때마다 HP가 1씩 깎이도록 했지요. 또 보스 몬스터를 처치하는 데 걸리는 시간도 화면에 표시해 뒀답니다. 화면 왼쪽 아래 
를 눌러 배경과 텍스트 상자, 오브젝트를 추가하고 크기와 위치를 조정해 주세요.
➊ 오브젝트 추가하기
➋ 텍스트 코드 입력법
오브젝트를 움직이려면 명령어인 텍스트 코드를 입력해야 해요. 이번에는 지난 호와 달리 코드를 하나씩 입력해 봐요. 코드를 쓰다가 철자를 틀리면 위즈랩이 자동으로 알려줄 거예요. 게다가 명령어의 첫 글자만 입력해도 나머지 내용은 자동으로 써진답니다.
예를 들어, 배경 오브젝트를 아래로 계속 움직이게 하려면 아래 왼쪽 화면과 같은 텍스트 코드가 필요해요. 이를 암기할 필요는 없어요. 코드 입력창에 영문자 ‘o’ 만 입력하면 아래 오른쪽 화면과 같이 ‘o’ 로 시작하는 명령어가 나오는데, 원하는 명령어를 마우스나 엔터키로 선택하면 된답니다!
➌ 각 오브젝트에 코드 입력하고 이해하기
각 오브젝트에 아래와 같이 텍스트 코드를 입력해 보세요.
➊과 ➋에는 모두 변수가 사용됐어요. 위즈랩은 ‘자바스크립트’라는 프로그래밍 언어를 사용하는데, 자바스크립트는 변수를 만들 때 ➋와 같이 ‘var’라는 명령어를 쓴답니다. 예를 들어 ‘var 몸무게 = 40’이라고 쓰면, ‘몸무게’라는 변수를 만들고 ‘40’을 저장한다는 뜻이지요. ‘var’ 대신 ‘global.’이라는 명령어를 사용하면 다른 오브젝트에서도 그 변수의 값을 활용할 수 있답니다(➊). 이런 차이는 엔트리에서 변수를 만들 때 봤던 오른쪽 화면의 옵션과 같아요. ‘var’는 ‘이 오브젝트에서 사용’을, ‘global.’은 ‘모든 오브젝트에 사용’을 뜻한답니다.
보스 몬스터를 무찔러라!
오브젝트와 텍스트 코드를 추가해 보스 몬스터가 미사일을 발사하게 만들어 봐요. 또, 파이어 드래곤이 발사한 파이어를 보스 몬스터가 100번 이상 맞으면 게임이 끝나도록 해 봐요.
➊ 오브젝트 추가하기
➋ 각 오브젝트에 코드 입력하고 이해하기
파이어 드래곤이 보스 몬스터의 미사일을 맞으면, 파이어 드래곤과 미사일 오브젝트가 서로 겹칠 거예요. 훈쌤이 ➊에서 ‘overlap(겹치다)’이 들어간 코드를 작성한 이유지요. 또, 이때 화면이 흔들리도록 ‘shake(흔들리다)’가 들어간 명령 코드를 작성했어요. 나아가 파이어 드래곤에 명중한 보스 몬스터의 미사일은 없어지도록(kill) 했어요(➋). ➌, ➍, ➎, ➏을 보면 ‘미사일명중’과 ‘미션클리어’라는 이름으로 ‘onSignal’과 ‘sendSignal’ 명령어가 사용됐어요. 이는 엔트리에서 봤던 ‘신호 보내기’, ‘신호 받기’와 똑같은 기능을 한답니다. 즉, 
은 ➏에 있는 텍스트 코드,
는 ➌에 있는 텍스트 코드와 같은 기능을 하는 거랍니다.
미션
파이어 드래곤이 미사일을 발사하거나 보스 몬스터가 미사일에 맞았을 때 어떤 효과음을 넣어주어야 할까요? 효과음을 추가해 보세요!
힌트 : 화면 왼쪽에 있는 
을 눌러 사운드 추가하기
다음의 텍스트 코드 사용하기: 
