반응형 javascript11 자바스크립트 오목 게임 개발 #10 이번 회차에서는 지금까지 구현한 내용에 일부 부가기능을 추가하고 보완하는 작업을 진행하겠습니다. 착수 순서 표시하기 오목돌에 착수순서대로 번호를 표시하는 코드를 작성해 보겠습니다. 순서 표시여부를 drawStone 멤버함수의 인자로 전달하여 필요에 따라 on/off 하도록 합니다. //오목돌 그리기 //ctx: context, pointInfo: 오목돌 그릴 오목위치, orderDisplay: 착수순서 표시여부 drawStone(ctx, pointInfo, orderDisplay) { //오목돌을 그릴 위치 계산 let { boardX, boardY} = this.getBoardPosition(pointInfo.x, pointInfo.y); //오목돌 그리기 ctx.beginPath(); ctx.stro.. 2023. 1. 25. 자바스크립트 오목 게임 개발 #9 이번 회차에서는 오목여부를 판단하는 방법에 대해 구현해 보겠습니다. 오목을 판단하기 위해 오목판의 착수정보를 추출하고 패턴을 확인하는 로직은 오목판단뿐만 아니라 이후에 각 포인트의 우선순위를 분석하는데 이용하게 됩니다. 오목여부 판단 오목여부 판단은 오목판의 착수정보를 추출하여 패턴을 확인하는 방법으로 진행합니다. 오목판 착수정보 추출 최종 착수점을 기준으로 가로, 세로, 좌대각선, 우대각선 각각에 대해 검색 후 착수된 모든 정보를 추출합니다. 착수정보는 흑돌, 백돌, 공백, 오목판 외부 정보를 모두 구분하여 수집합니다. 각 포인트 정보는 다음의 알파벳으로 구분합니다. B: 흑돌 W: 백돌 S: 공백 X: 오목판 외부 추출함수는 Omok클래스의 멤버함수로 구현하며 4개의 방향에 대해 동일한 로직이므로 하.. 2023. 1. 25. Javascript - 콜백(CallBack) 함수 형태 1. 함수를 파라미터로 전달받아 실행하는 형태 콜백으로 실행할 함수들을 별도로 정의하고, 콜백함수의 파라미터로 함수를 전달하는 형태로 구현 가능합니다. //게임종료 함수 function endGame() { alert('Game End!'); } //상태체크 함수 function checkGame() { alert('Check Omok'); } //다음진행 함수 function goNext() { alert('Go Next'); } //콜백함수 (doOmok, doNext라는 함수를 인자로 전달해 줌) function checkOmokCallBack(status, doOmok, doNext) { if (status == 'Omok') { doOmok(); } else { doNext(); } } c.. 2023. 1. 24. 자바스크립트 오목 게임 개발 #8 이번 회차에는 정확한 착수여부를 체크하는 코드와 새게임, 무르기 처리 기능을 구현해 보겠습니다. 추가적으로, 착수 시에 사운드 재생하는 코드를 같이 작성해 보겠습니다. Omok 클래스 멤버함수 추가 (omok.js) 정확한 착수인지를 체크하기 위한 Omok 클래스의 멤버함수를 구현합니다. 착수점에 이미 돌이 있는지 여부 체크 함수 착수점(마우스 클릭점)에 기존에 이미 돌이 있는지를 확인하는 멤버함수입니다. 착수정보배열(mainBoard)에서 착수점(x,y)으로 검색하여 존재하는지 여부로 판단합니다. //기 착수여부 판단 checkOccupied(omokX, omokY) { let filtered = this.mainBoard.filter(point => { return (point.x == omokX) .. 2023. 1. 24. 이전 1 2 3 다음 반응형
