Project/종합 게임 사이트
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (6)Project/종합 게임 사이트 2024. 1. 22. 19:20
[ 오늘의 작업 과정 ] - 임시 서버 부분 back이 만들어둔 서버로 교체해 돌을 클릭할 때마다 돌을 둘 수 있는 자리인지 아닌지 판별해서 결과를 보내주도록 한다. - 각 돌 승리시 back에서 데이터 받아와 승리 모달창 띄우기 (과정 생략) 1. 임시 서버 부분을 back에서 만들어둔 서버로 교체해 통신을 수정했지만 어디 칸을 클릭하던 아래와 같이 '돌을 둘 수 없는 자리입니다' 라는 결과만 받아와진다. 이를 해결해주기 위해 encodeGameBoard 함수 안에 있는 아래의 세 줄의 코드를 아래처럼 axios 안으로 옮겨주니 결과값이 올바르게 출력된다. 이미 돌이 놓여져 있는 칸을 클릭할 때만 '돌을 놓을 수 없습니다' 결과가 보내진다. axios.post("http://15.164.164.15:8..
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (5)Project/종합 게임 사이트 2023. 11. 7. 12:32
[ 오늘의 작업 과정 ] - 게임이 종료 되었을 때 나오는 다시 하기 모달창 다시하기 버튼 누르면 오목판 초기 상태로 리셋하게 만들기 - 3-3 경고 알림 모달창 뜨고 해당 돌 지우게 만들기 1. 게임이 종료 되었을 때 나오는 다시 하기 모달창 다시하기 버튼 누르면 오목판 초기 상태로 리셋하게 만들기 다시 하기 버튼을 눌렀을 때의 동작은 resetBtn 함수안에서 이루어지기 때문에 먼저 오목판 상태를 담을 table state를 useState로 만들어두고 다시하기 버튼을 클릭하면 table 값을 state를 true로 변경하도록 했다. 그리고 table state가 true로 바뀌었을 때 오목판 페이지가 다시 리로드 되도록 하기 위해 window.location.reload 함수를 사용했고 안에 해당 ..
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (4)Project/종합 게임 사이트 2023. 11. 3. 12:54
[ 오늘의 작업 과정 ] - 게임이 종료 되었을 때 나오는 다시 하기 모달창 미리 만들어두기 css로 모달창은 미리 만들었고 게임이 종료되었을 때 모달창이 나오도록 해야하지만 아직 게임 종료 상황 코드를 짜지 않아서 임시로 오목판을 클릭했을 때 모달창이 나오도록 해서 정상적으로 나오나 테스트 했다. Modal 컴포넌트를 따로 만들어 앞서 미리 UI 디자인한 코드를 넣고 useState() 함수로 UI의 상태를 담을 state를 만들어 true이면 Modal 컴포넌트가 나오고 false면 null 값이 되도록 했다. 아래 코드이다. function Game2() { var [modal, setModal] = useState(false); // 다시하기 모달창 return ( {/* 다시 하기 모달창 */}..
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (3)Project/종합 게임 사이트 2023. 10. 29. 22:16
[ 오늘의 작업 과정 ] post 형식으로 아래와 같은 게임 전체 진행 상황 및 정보 데이터를 서버로 보내기 { color : "1" // 돌의 색 정보 (1이면 흑, 2이면 백) location : "4,6" // 돌의 좌표 (왼쪽 위에 칸 좌표 = "0,0" 기준 ) situation : "00000000000/00000001000/000000200/....." // 현재 게임 상황 (오목판 전체) } axios를 사용했고 아직은 서버 url을 만들지 않아 임시서버를 사용해 보낸 데이터를 확인하기로 했다. color 값은 현재 놓여진 돌의 색이 검정이면 '1', 흰색이면 '2'를 보내야 한다. 여기서 처음에 newColor가 아닌 color가 검정색일 때 '2'가 나오고 흰색일 때는 '1'이 이런식으..
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (2)Project/종합 게임 사이트 2023. 10. 25. 20:15
[ 오늘의 작업 과정 ] 홀수번째 두는 돌은 검정색, 짝수번째 두는 돌은 흰색이 나오도록 구현하기 일단 css로 border-radius를 50%로 조정해서 돌을 동그랗게 만들어 줬다. 돌의 색을 담을 state인 color를 만들어두고 초기 state는 공백으로 두었다. let [color, setColor] = useState(''); // 현재 돌의 색상 돌의 색상 변경은 돌의 위치값 변경이 일어날 때마다 동작하므로 앞서 만들었던 handleCellClick 함수 안에 만들었다. 돌의 색이 검정이 아닐 때는 흰색으로 바뀌고 검정일때는 흰색으로 바뀌도록 돌의 색을 저장할 변수 newColor를 만들었다. const handleCellClick = (i,j) => { setClickedCell([.....
-
[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (1)Project/종합 게임 사이트 2023. 10. 23. 17:55
[ 오늘의 작업 과정 ] 1. 오목판 및 위에 문구 3초 뒤 없어지는 동적인 UI 만들기 2. 오목판에 칸 클릭 시 클릭된 칸 검정색으로 바뀌는 UI 만들기 1. 상단의 글자 3초뒤 없어지는 UI 구현 (Game2.js) 리액트에서 동적인 UI 만드는 3step을 따르면 된다. 먼저 html css 로 미리 UI 디자인을 다 해두고 UI의 현재 상태를 state로 저장해둔 후 state에 따라 UI가 어떻게 보일지 삼항연산자로 작성해줬다. function Game2() { let [start, setStart] = useState(true); return ( {start == true ? * 흑돌 먼저 시작 ! : } 여기서 3초 뒤 없어지는 기능인 타이머 기능이 필요하다. 이건 js로 x초후에 코드를 ..
-
[team-project_종합 게임 사이트 만들기] 게임 별 탭 기능 구현Project/종합 게임 사이트 2023. 10. 22. 20:28
팀 프로젝트 회의 결과 4가지 간단한 게임을 할 수 있는 종합 게임 사이트를 만들기로 하였다. [ 오늘의 작업 과정 ] 1. 전체적인 UI 디자인 2. 상단의 탭을 눌렀을 때 게임별로 보여지는 기능 구현하기 리액트를 사용하였고 탭, 버튼 부분 등은 리액트 부트스트랩을 활용하였다. 1. 게임 시작 화면 구현 (App.js) - useNavigate()를 사용해 버튼 클릭시 게임 화면(/game)으로 넘어가도록 구현했다. 첫 시작 화면은 시작할 때 한번 빼고는 공통으로 자주 쓰일 일이 없다고 판단해 따로 Content() 컴포넌트로 사용하기로 하였다. function Content() { let navigate = useNavigate(); return ( 종합 게임 즐기기 { navigate("/game"..