틱택토 만들어보기(2)

어제 작성했던 파일 밑에

새로 바뀐 코드를 넣으려고 했으나

내용이 너무 많이 바뀐 관계로

그냥 새 파일로 작성하기로 하였다.

 

추가적으로 들어간 기능:

O와 X가 번갈아가며 뜸

게임 플레이를 기록해 특정 번째 플레이로 돌아가기

 

 

index.js파일은 어제와 똑같다.

 

Square.js파일의 함수들은

Game.js파일로 이동시켜 

다음과 같이 기본적인 형태만 남았다.

 

Board.js파일의 함수들도

 Game.js파일로 이동시켜

다음과 같이 기본적인 형태만 남겨두었다.

 

다음은 가장 많이 바뀐 Game.js파일이다.

 

실행시켜보면

시작화면

 

첫번째 플레이어가 스퀘어를 클릭한 경우

다음과 같이 옆쪽에

Go to move #1이 뜨는 모습을 확인할 수 있다.

이런식으로 게임이 끝났을 때

Go to game start를 누르면

 

이렇게 게임이 처음부터 다시 시작하는 모습을 볼 수 있다.

(옆의 Go to move #은 플레이어가 스퀘어를 누르면 사라진다.)

 

다음과 같은 상황에서

4. Go to move #3을 누르게 되면

이렇게 3번째 플레이로 되돌아갈 수 있다.

그리고 이 상황에서 다시 플레이어가 스퀘어를 누르면

그 상황부터 다시 게임이 저장되는 모습을 확인할 수 있다.