본문 바로가기
반응형

Projects/Socket Omok11

[Socket Omok] 11. 프로젝트 종료 프로젝트 종료 게임 승리 조건까지 만든 것으로 기능 구현이 모두 완료되었고, CSS로 꾸며줌으로써 프로젝트가 완성됐다. 사실 완성은 저번주에 다 했지만, 발표 준비하느라 글을 늦게 올렸다. 개발 자체는 4일정도 걸린것 같다. CSS 코드만 200줄 가량 되기 때문에 코드블럭보단 프로젝트 Github 링크로 대체하도록 하겠다. https://github.com/DevJaewoo/socket-omok GitHub - DevJaewoo/socket-omok Contribute to DevJaewoo/socket-omok development by creating an account on GitHub. github.com 완성된 결과물은 다음과 같다. 이번 프로젝트는 급하게 하느라 완성도가 그리 높진 않지만, .. 2022. 6. 14.
[Socket Omok] 10. 메세지 창 만들기 메세지 창 만들기 현재 서버에서 플레이어가 방에 들어올 때, 나갈 때, 승리할 때 방에 있는 플레이어들에게 "message" 메시지를 보내도록 되어있다. 이를 게임 패널에 띄워서 사용자들도 누가 들어왔는지, 누가 나갔는지 알려주면 좋을것이다. GamePanel에 message에 대한 이벤트를 추가하고 패널 안에 보여지도록 했다. const GamePanel = ({ roomname, blackPlayer, whitePlayer }) => { const [message, setMessage] = React.useState([]); React.useEffect(() => { socket.on("message", (msg) => { setMessage((value) => [...value, msg]); });.. 2022. 6. 14.
[Socket Omok] 9. 게임 승리 조건 만들기 게임 승리 조건 만들기 게임 승리 조건도 별거 없다. 그냥 알고리즘만 짜면 되기 때문에 별로 어렵지 않다. 우선 코드부터 보자. function checkOmokCompleted(coord, takes) { //(0, 1), (1, 1), (1, 0), (1, -1) const offset = [ { x: 1, y: 0 }, //가로 { x: 1, y: 1 }, //대각선1 { x: 0, y: 1 }, //세로 { x: -1, y: 1 }, //대각선2 ]; return offset.some((dir) => { let streak = 1; const type = (takes.length - 1) % 2; //정방향 for ( let x = coord.x + dir.x, y = coord.y + dir.y.. 2022. 6. 13.
[Socket Omok] 8. 마지막 착수 위치 보여주기 마지막 착수 위치 보여주기 이제 거의 다 왔다. 게임 승리 조건만 구현하고 CSS를 통해 클라이언트 화면만 꾸며주면 끝난다. 그 전에 편의성 기능인 마지막 착수 위치 표시 기능부터 만들고 가자. 착수 기록의 마지막 위치에 이전에 만들었던 hint 속성의 돌만 추가하면 되기에 별로 어렵지 않다. const OmokBoard = ({ takes }) => { ... return ( ... {takes.length > 0 ? ( ) : null} ... ); }; 2022. 6. 13.
[Socket Omok] 7. 플레이어 턴 진행 플레이어 턴 진행 이제 플레이어가 팀도 선택할 수 있고, 착수도 할 수 있으니 언제 착수시킬건지만 정하면 된다. 클라이언트에서 착수 신호를 보내도, 응답을 받기 전까지는 착수한 돌을 화면에 표시하지 않도록 해야된다. 또한 착수가 잘못되었으면 착수 메시지를 무시하고, 다시 해당 플레이어에게 턴을 넘겨줘야 한다. 플레이어가 착수하면 서버에 "player_selected" 신호를 주고, 만약 정상적인 착수라면 해당 방에 참가한 모든 플레이어들에게 "player_selected" 신호를 돌려주어 오목판을 업데이트 하도록 했다. socket.on("player_selected", (coord) => { const name = getJoinedRoomName(socket); const room = getPublic.. 2022. 6. 13.
[Socket Omok] 6. 착수 위치 미리보기 및 선택하기 착수 위치 미리보기 미리보기가 없어서 '여기쯤 클릭하면 되겠지' 하고 착수했는데 엉뚱한곳에 착수되면 엄청 억울할것이다. 적어도 '내가 지금 클릭하면 여기에 놔지겠구나' 정도는 알려줄 수 있어야 한다. 우선 바둑판의 크기와 같은 div를 바둑판의 위에 이벤트 감지용으로 만들었다. 원래는 바둑판 자체에서 이벤트를 수신했는데, 바둑알을 놓으면 바둑알이 이벤트 수신을 방해해서 새 컴포넌트를 만들었다. 우선 바둑알 컴포넌트의 prop을 수정했다. 기존에는 white인지 아닌지만 true : false로 받았는데, 배열로 들어갈 속성들을 받아서 class를 추가해주는 방식으로 변경했다. const stone = ({ type, x, y }) => { let material = ""; type.forEach((m) .. 2022. 6. 13.
[Socket Omok] 5. 바둑판, 바둑알 표시하기 바둑판 크기 계산하기 이제 가장 중요한 기능인 바둑판과 바둑알 표시 기능을 추가해야 한다. 개인적으로 이번 프로젝트에서 바둑알 착수 이벤트 감지에 이어 가장 어려운 부분이 아닐까 싶다. 우선 인터넷에서 바둑판 사진 하나를 다운로드해왔다. 그 후 픽셀 수를 통해 오프셋과 칸의 너비가 이미지의 몇% 정도 되는지 측정했다. 측정 결과 Offset은 3.62%, Width는 5.14%가 나왔다. 이 값을 통해 이제 바둑알의 위치를 정해줘야 한다. 바둑알 컴포넌트 const BOARD_OFFSET = 3.62; //% const BOARD_SPACE = 5.14; //% const stone = ({ white, x, y }) => { //console.log(`${white} (${x},${y})`); retu.. 2022. 6. 6.
[Socket Omok] 4. 플레이어 참가 기능 개발 Intro 기존에는 방을 만든 사람이 흑돌, 2번째로 들어온 사람이 백돌로 플레이하도록 하려 했지만, 플레이어가 흑돌 / 백돌 중 어떤 돌로 플레이 할지 선택할 수 있는 기능이 필요할것 같았다. 그래서 만약 흑돌 / 백돌에 플레이어가 참가중이지 않다면 '참가' 버튼을 표시하고, 플레이어가 참가중이라면 해당 플레이어의 ID를 표시하는 기능을 추가했다. GamePanel 컴포넌트 const GamePanel = ({ roomname, blackPlayer, whitePlayer }) => { const Player = ({ name, onClick }) => { return ( {name !== "" ? {name} : 참가} ); }; const blackPlayerCallback = () => { soc.. 2022. 6. 6.
[Socket Omok] 3. 대기실 기능 개발 Intro 개발 환경을 구축하고 사용자가 처음 접속하면 보여질 방과 관련된 기능들을 개발했다. 사용자가 방을 생성하고, 다른 사용자가 생성된 방에 참가하면 오목 경기를 시작시킬 것이다. 그 후에 들어오는 사용자들은 관전자로 놔둘 생각이다. React를 처음 써봐서 기능을 개발하며 많이 헤맸지만, 생각보다 간단하고 강력한 기능을 제공해줘서 금방 이정도까지 만들 수 있었던것 같다. 방 생성 input에 방 이름을 입력하고 Enter를 치거나 '방 만들기' 버튼을 클릭하면 해당 이름으로 방이 생성된다. 아래의 경우 방이 생성되지 않도록 설정했다. 같은 이름의 방이 이미 존재하는 경우 사용자가 이미 다른 방에 참가중인 경우 방 이름에 아무것도 입력하지 않았을 경우 코드는 아래와 같다. 이벤트 발생 시 roomn.. 2022. 6. 5.
반응형

티스토리툴바