Java gui button puzzle

오늘은 swing의 gui를 이용하여 숫자 퍼즐을 만드려고 한다

위 사진은 gui title의 icon 변경을 위해 첨부하였다

​

전체적인 설계로는, 숫자를 입력받은 게임사이즈로 퍼즐게임을 만드는데

만약 3을 입력받으면, 3 * 3 = 9 개의 퍼즐을 만드는 방식으로 진행된다

​

그렇게 숫자패드가 생성되면, 그 숫자들을 섞어주고 각각의 버튼을 클릭하였을 때

위아래 양옆으로 빈칸이 존재한다면 그 빈칸과 text만 바꾸는 식으로 진행된다

​

자세한 설명은 코드와 함께 설명할 예정 !

메인 클래스 GridPuzzle()

첫 번째로, Jframe을 상속시키고

클래스 내에서, 기본 생성자와 게임 사이즈를 입력받을 수 있는 생성자를 만들었다

​

매개변수로 아무 값도 안 들어오면 기본적인 생성자로 3*3=9 개의 퍼즐판이 완성되고,

값이 들어오면 그 값의 제곱만큼의 퍼즐이 생성되게 구현하였다

​

super 안에 String.format을 이용해서 gui의 타이틀 제목을 바꿔주었고

​

JPanel을 이용하여 숫자 패널과 메뉴 패널을 각각 구성해주었다

이때 숫자 패널에서는 GridLayout을 이용하여 지정된 행과 열을 가지는 레이아웃을 작성해놓는다

(후에 버튼을 넣을 예정)

​

(만약, 따라 하고 계신다면 이 부분부터는 이쯤에서 멈추고 NumPad 클래스 보고 오는 게 이해가 빠를 것이다)

​

for문을 사용하여 gameSize의 제곱만큼 숫자패드를 생성한다

NumPad 클래스를 상속받아 새로운 new_pad를 생성하는데 인자 값으로

i와 gameSize , num_pads를 넣어놓는다

(NumPad클래스에서 Index 번호만으로 해당 번호의 양옆 또는 위아래에 공백이 있는지 체크 가능하기 때문에)

​

그리고 배열 num_pads와 패널 num_pad에 각각의 번호들을 넣어놓는다

​

배열에 넣은 번호들은 배열 안에서 순서대로 넣어진 번호들을 섞을 때 사용하고

패널에 붙힌것들은 gui에서 실질적으로 보여주기 위해서 넣어놓는다

​

그리고 frame에 center에는 숫자 패널을 , east 즉 오른편에는 메뉴 패널을 넣는다

(아직 메뉴 패널은 구현 X = 생략 가능)

​

그리고 frame의 setIconImage로 맨 위 퍼즐 사진으로 맞추게 하였고

setBounds(location + size) 함수를 이용해서 사이즈와 위치를 설정해주었다

setVisible => 화면에 보이게 / setDefaultCloseOperation(EXIT_ON_CLOSE) => X 누르면 gui 꺼지게 설정

​

shuffle() 함수는

위에 반복문에서는 순서대로 숫자 패널이 생성되기 때문에,

그 숫자들을 섞어주는 함수이다

​

반복문을 통해서 100번 셔플 하게 되는데,

x와 y를 랜덤으로 생성한 다음 String temp 변수를 만들어서

각각의 text만 섞는 과정이다

​

setText = text를 () 안의 값으로 변경한다

getText = 해당 값의 text를 가져온다

​

​

위 두 사진은 맨 처음 프레임의 메뉴 타이틀바의 아이콘을 바꿨을 때를 위한 코드인데,

사용자의 컴퓨터가 맥일 경우에는 아래 사진의 코드까지 넣어야 하고

윈도일 때는, 바로 적용이 가능하다

​

< 여기까지가 메인 GridPuzzle() 클래스 끝 >

NumPad클래스에서는 숫자들을 버튼으로 구현하기 위해서

JButton을 상속받고 그 버튼들을 눌렀을 때도 구현해야 하기 때문에 ActionListener도 상속받는다

​

생성자로 아까 메인에서 넘겨준 index , gamesize , numPads 배열을 받았을 때,

처음으로는

가정문을 사용하여 만약 index 가 마지막 번호일 때는 공백으로

나머지는 1씩 더해서 setText를 해준다

(반복문이 0부터 시작했어서 1씩 더해서 숫자 퍼즐 내부의 숫자가 1부터 시작하게끔 하기 위해서)

​

그리고 버튼 안의 숫자들의 폰트를 원하는 값으로 조절하고

각각의 버튼들에 actionListener를 추가시킨다

​

그리고 위 top / 아래 bottom / 오른쪽 right / 왼쪽 left 변수를 설정해서

사용자가 버튼을 눌렀을 때, 해당 값이 움직일 수 있는지 체크한다

​

주석 처리된 퍼즐 모양을 보고, 해당 값들을 변수 안에 설정해놓은 코드에 대입해보면 퍼즐의 규칙을 알 수 있을 것이다

(-1로 처리한 부분은 만약 맨 위에 버튼을 눌렀을 때 그것보다 위에 있는 값이 없음을,

또 맨 오른쪽 부분의 버튼을 클릭했을 때 그것보다 오른쪽 값이 없음을 나타낸다 (아래, 왼쪽 동일))

​

그리고 index를 매개변수로 받는 isBlank 함수를 만들어서

만약 누른 버튼의 텍스트가 공백이라면 true를 반환시켜준다 (누른 버튼이 공백 버튼인지 확인하기 위함)

​

​

맨 위에 코드만 자세히 설명하자면

누른 값의 top 즉, 누른 곳의 위쪽이 미리 설정해둔 유효하지 않은 값 -1 이 아님과 동시에 위에 값이 공백이라면

누른 곳과 그 위의 값의 text를 서로 바꿔주는 형식이다

​

이렇게 하면 어떤 곳의 위치하든

아무 버튼이나 누를 때마다, 그 버튼의 양옆과 위아래를 검사해주어 공백을 찾아주게 되고,

만약 모든 조건이 만족하는 공백이 있을 때에는 버튼을 바꿔주는 게 아닌

버튼들은 그대로 있고, 그 버튼들의 text만 바꿔주는 형식이다

​

​

마지막으로 퍼즐을 맞췄을 때는,.

배열의 맨 마지막에 공백이 있을 때 (즉, 퍼즐 모양에서 오른쪽 맨 하단이 공백일 때)

​

그리고 반복문을 사용해서 숫자 배열만큼 도는데

해당 숫자들이 순차적으로 들어있지 않을 때에는, boolean으로 설정한 win을 false로 지정한다

​

이렇게 하면, 숫자들이 순차적으로 버튼에 들어감과 동시에 공백 버튼이 오른쪽 맨 하단에 위치해있을 때,

퍼즐게임은 끝나게 된다