안녕하세요. 여러분!
갑자기 런닝맨을 보다가 여러분과 함께 코딩해보면 재밌을 내용이 있어서 가져와봤어요. 런닝맨 터치패드 게임인데요, 자신의 등에 달린 패드는 방어하고, 어떻게든 다른 멤버의 등 뒤에 달린 패드를 많이 터치해서 숫자를 올려야하는 게임이더라구요.
터치할 때마다 화면의 숫자가 1씩 증가하는 거에요. 저 패드에 담길 프로그램을 딱 우리가 코딩해볼 수 있겠다는 생각이 들지 않나요? 어떻게 코딩하면 좋을까요? 먼저 잠시 생각해보시고 천천히 따라해보세요.
1. 디자이너 화면
1)
일단, 숫자가 증가할 수록 가로폭이 넓어지기 때문에, 기본 화면을 가로폭이 넓게 만드는 게 좋겠죠?
우측에서 Screen1을 선택한 상태에서 우측하단의 Screen Orientation을 찾아주세요. 그리고 그 값을 Landscape로 바꿔줍니다. 이는 화면을 가로로 넓게 쓰겠다는 의미랍니다.
2)
그 다음 Background Color는 파란색으로 바꿔주세요. 최대한 디자인까지 런닝맨 패드화면과 비슷하게 만들어보죠.
3)
안에 들어올 레이블이 정중앙에 위치하도록 Align을 모두 Center로 바꿔주세요.
4)
Clickable은 꼭 체크표시 해주세요. 패드 화면의 모든 부분을 터치할 수 있게 인식하도록 만드는 작업이에요.
5)
Width와 Height를 화면에 꽉 차게 Full parent로 바꿔주세요.
6)
왼쪽에서 Label하나를 끌어와 Horizontal_Arragement 안에 놓아주세요.
Font Bold에 체크를 해서 숫자를 굵고 잘보이게 바꿔주세요.
7)
Font Size는 100정도로 키워주세요.
8)
Text에 들어갈 내용은 0으로 바꿔주세요. 0에서 숫자가 시작될테니까요.
9)
Text Color는 잘보이게 흰색으로 바꿔주세요.
디자이너화면 설정은 여기까지 하시면 됩니다!
2. 블록코딩 화면
1)
터치당한횟수는 22번 이렇게 처음부터 딱 정해진 값이 아니라, 계속 터치당할 때마다 숫자가 올라가며 변하잖아요? 그러니까 계속 변하는 숫자를 담아 줄 변수를 하나 만들어야겠죠?
0에서 부터 시작하는 '터치당한횟수'라는 변수를 하나 만들어요.
'터치당한횟수'라는 변수는 여기서부터 시작해줘 : 0
2)
터치를 당할 때마다 1씩 증가해야겠죠?
화면 터치를 할 때마다 실행해줘,
'터치당한횟수' 변수는 : 기존 터치당한횟수에 1을 더한 값으로
Label1 Text에서 보여줘 : '터치당한횟수' 변수를
3) 최종코드
이렇게 코드를 짜면 우리도 런닝맨 터치패드 게임을 해볼 수 있겠네요!
3. 결과물 확인
화면에 닿을 때마다 숫자가 1씩 잘 올라가는 것을 확인 할 수 있네요. 직접 만들어보니 뿌듯하지 않나요? 여기다가 추가로 터치할 때마다 배경색을 변화를 준다거나 해도 시각적으로 더 재밌을 것 같네요.
그리고 추가로 런닝맨을 보다가 한가지 더 코딩해보면 좋을 내용이 떠올랐어요! 바로 저 숫자들을 저장해두는 기능이에요.
이렇게 갑자기 프로그램이 꺼지는 돌발상황이 발생했을때, 숫자를 저장해두지 않았다면 낭패겠죠? 기껏 올려놓은 숫자가 다 알아가버린다면ㅠㅠ 그런 상황을 위해 터치하면서 변하는 숫자를 저장해두고, 다시 프로그램을 실행시켰을 때에도 그 숫자가 바로 뜰 수 있게 하는 기능을 다음 시간에 배워보겠습니다. Tiny DB를 사용할 거랍니다.
( 다음 시간 링크 참고 : https://dimik.tistory.com/135 )
이번 시간에도 수고 많으셨습니다. 정말 멋져요!
댓글