자바 스크립트로 외국에서 유명한 게임 "CONNECT4"를 만들어 보았습니다.

안녕하세요, Motty입니다.
이번에도 Javascript를 사용한 테마로 갑니다.

소개

Connect4를 아시는 분은 많을까 생각 합니다만, 간단하게 말씀드리면 네 번째 줄입니다.


선공과 후공이 교대로 보드 위에 조각을 치고, 종횡 비스듬한 어딘가에 4번째 이상 늘어놓으면 이기기···라고 하는 심플한 게임입니다.
Javascript의 공부의 소재에는 딱 좋은가라고 생각해,
자신의 집에도 네 번째 줄이 있기 때문에 누군가 함께 놀지 않겠습니까 (갑자기 초대)

개발 준비

・HTML/CSS/Javascript
・Node.js(디버그용)
・Bootstrap4(버튼용)

그리기 소프트웨어는 페인트,
개발 환경은 VisualStudioCode에서 실시했습니다.

전부 해설하면 중복이 되기 때문에, 만들어 보고 공부가 된 부분만 실어 가고 싶습니다.
↓완성판은 이런 느낌이 되었습니다.

반면 그리기

보드 게임 개발에 있어서 고민한 것은, 반면을 어떻게 취급할까, 라고 하는 것이었습니다. HTML에 직접 써도
좋았지 만, 패널 정보를 배열에 갖게 해두고 그것을 바탕으로 화면에 그려 나가는 것 같은
방법을 했습니다. (소위 Model-View 분리형이라고 하는 녀석입니까・・・?)

script.js

    var boardarray = [
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0]]


        function load_board(array)
        {
            board.innerHTML = "";
            for (let i = 0; i < array.length; i++) {
                for (let j = 0; j < array[i].length; j++) {
                    if(array[i][j] == 0)
                    {
                        board.appendChild(blank.cloneNode(true))
                    }                    
                    else if(array[i][j] == 1)
                    {
                        board.appendChild(red.cloneNode(true))
                    }
                    else if(array[i][j] == -1)
                    {
                        board.appendChild(yellow.cloneNode(true))
                    }
                }
            board.innerHTML += "<br>";
            }
        }

load_board(array)에서는 선공을 1, 후공을 -1로 하고 있습니다.
사용자의 입력을 받고 적절하게 반면을 업데이트하고 그것을 읽는 논리로 하고 있네요.

승리 판정

이하, 승리 판정의 함수입니다. 사용자가 스톤을 입력할 때마다 실행됩니다.
종횡 핥기 중 하나가 4 개 이상 나란히 있으면 좋기 때문에, 친 위치에서 주위 4 방향 (실질은 8 방향?) 확인하고,
어느 쪽의 방향에서 자신과 같은 돌의 수가 연속해 3개 이상 있으면, 1(선공)/-1(후공), 없으면 0을 돌려주는 function에 체크 받고 있습니다.



script.js

        function VictorysNumber(boardarr, Row, Col)　//ボードと現在行・現在列を引数として代入
            //8方向を見て連続番号を管理する配列に格納していく。
            //格納した配列をもとに、勝利かどうかを判定。
            //→方向が0番、以降45°左回転するごとに番号を1番加算し、合計7番までの8方向を定義する。
            {
            var continuousNum = [0,0,0,0,0,0,0,0]//1,2,3,4,5,6,7,8番方向
            const directionList =[
            [0,1],//0番
            [-1,1],//1
            [-1,0],//2
            [-1,-1],//3
            [0,-1],//4
            [1,-1],//5
            [1,0],//6
            [1,1]] //7

            //スコープははじめ置かれた石と同じ
            var scopeRow = Row;
            var scopeColumn = Col;

        //スコープ開始

        for (let i = 0; i < 8; i++) {   
            //textlog.value += "勝利判定関数の開始。ScopeRow="+scopeRow+ "、scopeColumn = " +scopeColumn +"です。\n";
            //textlog.value += i+"番方向を見ます。";
            while(true)
            {
                //与えられた方向への移動操作
                scopeRow += directionList[i][0];
                scopeColumn += directionList[i][1];
                try
                {
                    if(0 <= scopeRow <= 5 && 0 <= scopeColumn <= 6 &&
                        boardarr[scopeRow][scopeColumn] == boardarr[Row][Col]) //起点と今見ている場所が同じであればカウントを増やす
                    {                       
                        continuousNum[i]++; 
                        //textlog.value += i +"番方向に" + continuousNum[i] + "個の連続した石が発見されました。\n";
                    }
                    else
                    {
                        //textlog.value += i +"番方向には同じ石は見つかりませんでした。\n";
                        break; //値が同じでなければ（連番でなければ）break
                    }
                }
                catch(e)
                {
                    break; //ボードを超えた値を参照するとエラーが出る。飛び越えてもbreak.
                }
            }
            //スコープを元の位置に戻す。
            scopeRow = Row;
            scopeColumn = Col;
        }
                //勝利判定
                if( continuousNum[0] + continuousNum[5] == 3 ||
                continuousNum[1] + continuousNum[6] == 3 ||
                continuousNum[2] + continuousNum[7] == 3 ||
                continuousNum[3] + continuousNum[8] == 3 )
                {
                    return turn; //勝利者決定
                }
                else
                {
                    return 0; //勝負がついていない場合は0を返す。
                }
        }

※이것은 이전의 Excel에서 다섯째 줄을 만들었다 때와 거의 같은 알고리즘을 채용하고 있습니다.

끝에

역시 Javascript를 조금이라도 좋기 때문에 공부하면, View화면 작성도 무서워 눈치채지 않게 되는군요・・・!
지금이라면 뭐든지 할 수 있을 것 같은 생각이 듭니다만, 분명 마음 때문에 실은 여러가지 안쪽이 깊은 분야라고 생각합니다()

모든 소스 코드는 github에 실려 있습니다.
htps : // 기주 b. 코 m / 유키 야마모 ty0713 / 이런 ct4 /

참고 URL
이번에는 아래와 같은 동영상을 매우 참고로 했습니다. 메모장을 사용하여 1 시간 만에 오셀로 게임
마무리한다는 굉장한 프로그래머 씨의 동영상입니다.
・니코니코 동영상 ・【프로그래밍】오셀로를 1시간에 만들어 보았다【실황 해설】
htps //w w. 니코 ゔ에서. jp/watch/sm8391299