sfex tistory blog

​

canvas -> image sprite -> drage 이용하여 단어와 그림을 잇는 게임입니다.

​

앱인벤터 (한글 화면)에서 작성하였습니다.

http://ai2.appinventor.mit.edu/?locale=ko_KR

앱 구상

​

[참고 앱]

https://youtu.be/dkUkH9D1JrY

기본기능

​

1. canvas에 있는 이미지를 드래그하여 움직일 수 있도록 한다.

2. 서로 충돌할 경우 연결된 이미지이면 정답 처리한다.

3. 전체 성공시 축하 메시지와 함께 음성도 출력한다.

앱 제작

​

1. 화면 디자인

​

​

2. 블록 코딩

​

​

3. 실행 화면

​

4. 프로그램 소스

관련 글

​

앱인벤터 소개

https://blog.naver.com/sfex/221994450104

기억 퍼즐게임

https://blog.naver.com/sfex/222011042941

이미지 카드 위치를 기억했다가 같은 이미지끼리 뒤집는 퍼즐 게임입니다.

​앱인벤터 (한글 화면)에서 작성하였습니다.

http://ai2.appinventor.mit.edu/?locale=ko_KR

앱 구상

​

[참고 앱]

https://youtu.be/sEPxqpFZit8

기본기능

​

1. 카드 랜덤 배열

2. 같은 카드면 OK

3. 타이머를 이용하여 잠깐만 보여주기

앱 제작

​

1. 화면 디자인

​

- 타이머 간격을 700 (0.7초)로 설정하였습니다. (타이머(시계1)을 활성화하면 설정 타이머간격마다 '타이머가 작동할때'를 실행합니다.)

​

2. 블록 코딩

- 전역변수 설정 및 화면 처음시 실행 부분입니다.

- 첫 번째 선택, 두 번째 선택에는 게임 진행하는 동안 첫 번째, 두 번째 선택한 버튼을 저장합니다.

- 매칭카운터는 매칭에 성공한 횟수를 저장합니다. 3이 되면 게임 성공입니다.

- 게임판에는 임의로 선택한 버튼과 그림을 저장합니다. (버튼으로 검색하여 그림을 불러올 수 있습니다.)

- 매칭완료에는 매칭에 성공한 버튼들을 저장합니다.

- 버튼들은 게임 버튼들을 리스트로 저장하여 일괄로 처리할 수 있도록 합니다.

- Sreen1 이 처음 시작되면 초기화 함수를 실행합니다.

- 초기화 함수입니다.(게임을 새로 세팅합니다.)

- 버튼 활성화를 (마우스 오른 버튼 -> 메뉴 -> 일반만들기) 일반화하여 모든 게임 버튼을 일괄로 처리합니다.

- 그림 3개를 각 2개씩 랜덤 한 위치에 배치합니다.

​

​- 버튼 클릭 했을 때 실행

- '버튼 클릭시'를 역시 일반화(버튼 클릭시 -> 마우스 오른 버튼 -> 메뉴 -> 일반만들기) 하여 모든 버튼에 대해 동작을 일괄 설정합니다.

(만약(if) 조건문으로 리셋 버튼은 초기화 호출 나머지 게임 버튼은 뒤집기 함수를 호출합니다.

​

- 뒤집기 함수입니다.

- 누른 버튼의 설정된 이미지를 보여주고, 다시 클릭하지 못하도록 비활성화합니다.

- 첫 번째 선택이면 누른 버튼을 첫 번째 선택에 저장합니다.

- 두 번째 누른 것이라면(첫 번째 누른 것이 아니면) 저장된 첫 번째 누른 버튼과 비교하여 같으면 (매칭에 성공하면)

- 매칭카운터를 1 증가

- 첫 번째 선택 변수를 초기화

- 첫 번째 선택과 두 번째 선택을 매칭완료에 저장

- 첫 번째 선택과 두 번째 선택이 달라서 매칭에 실패하면

- 전체 게임 버튼을 누르지 못하게 비활성화

- 타이머를 동작시켜 잠시만 보여줍니다.

- 매칭카운터가 3에 도달하면 (다 찾았으면) 성공 메시지를 보여줍니다.

​

- 타이머 활성시 일정 간격마다 실행되는 부분입니다. 

- 매칭에 실패 시 잠시만 보여주기 위한 타이머 내용입니다.

- 타이머가 설정한 시간에 도달하면

- 첫 번째, 두 번째 선택 버튼을 다시 뒤집기

- 전체 게임 버튼에 대해서 찾은 버튼 이외 버튼은 다시 누를 수 있도록 활성화

- 타이머 다시 멈춤

- 첫 번째, 두 번째 선택 변수 초기화

​

3. 실행 화면

​

4. 프로그램 소스 aia 파일

관련 글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

[참고 앱]

​https://youtu.be/RtbCqZvhkUU

 
https://youtu.be/Z9ad_GS5qF8

기본기능

​

1.Firebase 이미지(file) 가져오기

​

2.휴대폰에 이미지(file) 파일로 저장하기

- 이미지 파일 저장은 canvas를 이용하였습니다.

- 읽어들일 때 Image component 사이즈 안맞으면 나타나지 않을 수 있습니다. 오토로 해보세요.

​

앱 제작

​

1. 화면 디자인

​

- Firebase 설정 부분은 동영상 참고하세요.

화면디자인 (firebase 설정)

​

​

2. 블록 코딩

​

화면시작되면 Firebase 에서 이미지를 요청하고 응답이 오면 Image component 에 셋팅하면 됩니다.

​

​

이미지 file로 저장은 Canvas component 를 이용합니다. (TinyDB 는 text만 저장할 수 있습니다.)

3. 앱 실행 화면 및 aia file

​

- 이번 앱은 kodular 에서 만들었습니다. kodular -> https://c.kodular.io/

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

앱인벤터 처음 접근하기는 쉬우나 조금 복잡해지면 블록코딩 하기 어렵다.

특히 많은 버튼을 이용할 경우 각 버튼별로 같은 루틴을 설정하는 것이 삽질처럼 느껴진다.

이때 적용할 팁을 알려드립니다.

[참고] http://ai2.appinventor.mit.edu/reference/other/any-component-blocks.html

버튼1 에 대해 처리해야 하는 내용을 마우스 오른 버튼 누르면 나타나는 메뉴에서 Make Generic 을 선택하면

when any Button.Click 으로 변환되고 모든 버튼에 대해 동일한 처리를 한꺼번에 설정할 수 있다.

예제파일 설명

첨부된 aia 파일은 지뢰 찾기나 단어 퍼즐 같은 게임에 사용할만한 기본 화면과 코딩을 예제로 작성한 것입니다.

- 실행화면

- 모든 버튼을 하나로 묶어서 변수로 선언 코딩

- 처음 화면 설정 코딩

- 버튼이 클릭되었을 때 색깔반전 코딩

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

[참고] https://youtu.be/FNqo62zsNeQ

개발에 지친 분들께 동기부여될 만한 추천 영상입니다.

- 빨리 유료화하여 사용자가 돈을 내고도 쓰고 싶어 하는 좋은 서비스인지 확인하자

- 문제를 발견하고 그 문제에 맞는 해결책을 제공하자

- 최대한 빨리 출시하여 유저와 함께 만들어라

- 항상 직접 사용하는 유저 입장이 되어 공감하라