강의 일정13주차팩토리얼 계산기 앱 만들기14주차중간고사 기말고사 D-DAY 앱 만들기15주차복불복 게임 앱 만들기16주차하루 한 번 명상 앱 만들기17주차앱 인벤터 디자인 스킬 1탄18주차사자성어 퀴즈 앱 만들기19주차친구 생일 목록 관리 앱 만들기20주차센서 프로젝트 만들기21주차앱 인벤터 디자인 스킬 2탄22주차달~달 무슨 달 달 인식 앱 만들기!사용 프로그램핵심 키워드(태그)앱인벤터, 캔버스, 이미지스프라이트, 시계, 룰렛, 복불복, 게임난이도★★★☆☆안녕하세요~ 여러분!지난 시간에는 디데이 앱을 만들어 보았는데요.앱 데이터를 영구적으로 저장하는 앱을 처음 만들어 보았습니다.지난 시간은 조금 어려웠지만,이번 시간에는 보다 쉬운 복불복 게임을 만들어 보겠습니다.바로, ​룰렛 게임인데요.오늘 만들 앱을 아래의 영상으로 미리 만나보겠습니다.가끔 결정해야 하는데 무엇을 선택해야 할 지 모를 때! 때때로 운명에 맡기곤 합니다. 또, 누군가 한 명을 지목하거나 선택해야할 때가 있죠!그런 상황에서 친구, 가족과 함께 할 수 있는 복불복 게임 앱을 만들어 보겠습니다! 이제 앱을 만들러 가 볼까요?[준비물]컴퓨터 또는 노트북안드로이드 스마트폰구글 크롬 브라우저구글 계정​[강의내용]가장 먼저 한국어를 영어로 바꾸고,새 프로젝트를 생성하겠습니다.​1) 새 프로젝트 만들기 오늘은 새로운 이미지가 많이 필요하여,앱 인벤터 갤러리에서 당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기'>당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기 프로젝트를 불러오겠습니다. 앱 인벤터 로그인 후,[Login to Gallery]를 클릭합니다. 갤러리 사이트가 처음이라면,회원 가입 화면이 나올텐데 정보를 기입하고 [submit]을 클릭하면 간단히 가입 완료!검색창에 “아이씨뱅큐”를 검색해 볼까요? 여기서 ‘Roulette를 찾아보세요.그리고 [Load App Into MIT App Inventor]를 클릭하세요. 그럼 프로젝트 불러오기 완료!​



​​(2)화면 디자인하기오늘은 레이블, 캔버스, 이미지스프라이트, 버튼, 시계, 알림, 소리 총 7 가지 컴포넌트를 사용해 볼 거에요. 역시나 화면 디자인 순서에 따라 앱 화면을 꾸며봅시다.​① 원하는 컴포넌트를 [팔레트]영역에서 찾기② [뷰어]영역으로 끌어다 놓기③ 꾸밀 컴포넌트를 [컴포넌트]영역에서 클릭하기④ [속성]영역에서 컴포넌트 수정하기 [미디어]영역을 확인해보면 2개의 이미지 파일이 있습니다.하나는 룰렛판 나머지 하나는 화살표에요.이 두 이미지는 캔버스 컴포넌트와 이미지스프라이트 컴포넌트로 표현될 것입니다.







​​



​​​먼저, 화면 정렬과 아이콘을 설정해 보겠습니다. ① 수평 정렬 : 가운데②수직 정렬 : 가운데③아이콘 : roulette.png



​다음으로 당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기'>당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기 큰 대제목을 만들어 볼까요? 텍스트 색상은 여러분이 원하는대로 선택해 보세요. ①글꼴 굵게 : 체크②글꼴 크기 : 28③텍스트 : 복불복 게임 : 룰렛돌리기④ 텍스트 색상 : #7996fff



​ 이미지 위에 이미지를 얹히기 위해서는 캔버스와 이미지 스프라이트를 사용하는데요.룰렛판 위에 화살표를 겹치도록 하기 위해서,캔버스 배경 이미지를 룰렛으로 설정해 보겠습니다. ①배경이미지 : roulette.png②높이 : 250 픽셀③너비 : 250 픽셀



다음으로는 화살표를 이미지 스프라이트로 설정해 볼게요.①높이 : 100 픽셀②너비 : 30 픽셀③사진 : arrow.png④X : 115⑤Y : 70 ​



​ ​ 게임을 시작할 수 있도록 버튼을 만들어 볼게요! 크기와 버튼 텍스트까지 여러분이 원하는대로 만들어도 좋습니다! J①배경색 : 밝은 회색②글꼴 굵게 : 체크③글꼴 크기 : 20④높이 : 7 퍼센트⑤너비 : 60 퍼센트⑥모양 : 둥근 모서리⑦텍스트 : START ​



​ 누가 복불복 당첨자 인지 안내할알림 컴포넌트와 진동을 울릴 소리 컴포넌트를 추가해 봅시다. ​ 룰렛의 화살표는 0.015초 마다 10만큼씩 움직여 빙글빙글 도는 애니매이션을 구현할 것입니다. 이를 위해 시작 버튼을 눌렀을 당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기'>당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기 때 애니매이션이 동작되도록 시계의 활성화 여부는 해제할게요.①타이머 활성화 여부 : 체크 해제



마지막으로 화면 디자인 꿀팁!각 컴포넌트 간의 여백이 있어야 화면이 답답해 보이지 않아요.제목과 캔버스 사이, 캔버스와 버튼 사이에 빈 레이블을 넣어 여백을 만들어 보겠습니다.① 텍스트 : 모두 삭제 ​



​ 잘 하셨습니다! 화면 디자인을 마무리하고 명령어를 적용할 컴포넌트의 이름을 바꾼 뒤 코딩 화면으로 이동해 봅시다. (3) 명령어 만들기오늘의 핵심 기능은 시계와 이미지스프라이트로 시계가 돌아가는 듯한 애니메이션을 만드는 것입니다. 그럼, 캔버스에서 이미지스프라이트가 바라보는 방향이 어떻게 되는지 알아볼까요?앱 인벤터의 이미지스프라이트의 방향은 시계 반대 방향으로 이뤄져 있습니다. 그래서 왼쪽 아래와 같이 화살표가 1도~89도 사이라면 1번, 181도~269도 사이라면 4번이 당첨이 되는 것이죠. 이해되셨나요? 관련된 수학 수식은 나중에 명령어 만들 때 알려드리겠습니다. 그럼 이제 코딩하러 가 볼까요?







45도225도 버튼을 클릭했을 때, 목표 숫자 즉! 화살표가 멈출 방향을 랜덤으로 정합니다. 화살표가 멈출 방향은 0도~360도 사이로 정해야하니 임의의 정수 블록을 사용합니다. 그런 다음, 당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기'>당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기 룰렛 애니메이션이 시작되도록 시계의 타이머를 활성화 합니다. 그리고 스프라이트의 방향을 0으로 초기화 하고, 기기에 진동을 0.5초 울려서 사용자에게 룰렛 돌리기가 시작됨을 알려줄게요! 룰렛 애니메이션을 구현해 볼텐데요!화살표가 0.015초마다 왼쪽으로 10도씩 돌아가도록 하여,최종적으로 화살표 방향이 목표 숫자*10이 될 때 만큼 움직이도록 할 것입니다.왜냐구요? 만약 목표숫자가 10이라면 화살표가 0도에서 10도씩 10번 움직였을 테니 100도가 되어 있을거에요. 즉, 멈춰질 이미지 스프라이트 방향은 목표 숫자의 10배인 셈이죠. 이해 되셨나요?이미지스프라이트 최종 방향 =목표숫자 * 10 ​​자, 마지막으로 화살표의 위치를 알아내고,어떤 번호가 당첨인지 안내하는 기능을 만들어 봅시다.이 코드는 함수로 구현하도록 할게요. 먼저, 화살표 방향을 구하는 수식은 다음과 같습니다.당첨 방향 =현재 이미지 스프라이트 방향 – (이미지스프라이트 방향 /360의 몫 * 360)​ 예를 들어, 목표 숫자가 250일 때, 멈춰질 당첨 방향은 2500도 입니다.2500도는 룰렛판에서 어느 위치에 해당할까요? 먼저, 2500도는 360도가 몇 번 회전한 것인지 알기 위해 360로 나눈 몫을 구합니다.몫은 6이죠. 360 X 6은 2160도. 즉, 2160도까지는 0도와 마찬가지 입니다.그럼, 2500도에서 2160도를 당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기'>당첨자 추첨 프로그램 룰렛돌리기 룰렛 랜덤 번호 숫자 뽑기 추첨기 랜덤추첨기 랜덤뽑기 뺀 값은 0~360도 값 안에 들기 때문에우리가 생각하는 범위에 들어오게 됩니다.2500-2160