js를 사용하여 2048 미니게임을 구현하는 방법

최근 한 세미나에 참석한 동창이 회사에서 2048 미니게임을 작성해 달라고 부탁했다고 인터넷에서 몇 가지 코드를 참고한 뒤 직접 작성했다고 합니다.

작성 아이디어는 다음과 같습니다.
1. HTML 레이아웃을 설정합니다. 작은 상자 안에 들어있는 큰 상자에 대해서는 별로 할 말이 없습니다.
2. 게임 초기화를 구현하고 처음 두 개의 작은 블록을 생성합니다. 여기서는 임의의 2 또는 4를 생성하여 임의의 위치에 배치해야 합니다. 실제로 레이아웃이 완성되면 배열을 사용하여 숫자를 저장하는 것을 거의 생각할 수 있습니다. 이 블록은 주로 Math.random()을 사용하여 난수를 생성하고 X와 Y를 무작위로 배열에 삽입합니다. 그런 다음 JS를 사용하여 작은 상자의 콘텐츠와 CSS 스타일을 업데이트하여 페이지를 업데이트하는 함수를 작성합니다. 여기서는 배열을 초기화하고 랜덤박스 2개를 생성하는 함수인 이 블록을 newGame() 함수로 작성하여 게임 재시작 시 바로 호출할 수 있도록 하였습니다.
3.가장 중요한 것은 움직이는 것입니다. 제가 직접 작성할 때는 먼저 이동한 후 병합을 고려한다는 생각을 따랐습니다. 아래쪽으로 이동할 때 등 0의 위치를 ​​기록할 수 있는 변수를 남겨두어야 하는데, 코드는 다음과 같습니다.

for(var i = 0;i<4;i++){    
    var n=3;    
    for(var j = 3;j>=0;j--){        
    if(board[j][i] == 0){            
    continue;
        }else{            
        if(board[n][i]==0){
                board[n][i] = board[j][i];
                board[j][i] = 0;
            }
            n--;
        }
    }
}

이동 함수 마지막에 랜덤박스를 계속 생성하는 함수를 호출했는데, 이때 실제로 움직임이 없을 때 어떻게 박스 추가를 중단할 수 있을지 고민해 봐야겠습니다. 이 문제를 완료하기 위해 여전히 루프를 사용했습니다. 루프 배열을 순회하며, 이동 방향 앞에 0이 아닌 0이 있으면 계속해서 이동할 수 있습니다. 예를 들어 아래로 이동할 수 있는지 확인하려면 다음과 같이

function canMoveDown(){
    for(var i = 0;i<4;i++){        
    for(var j = 3;j>=0;j--){            
    if(board[j][i]!=0&&j!=3){                
    if(board[j+1][i]==0){                    return false;
                }
            }
        }
    }    return true;
}

이전의 이동 함수를 다시 작성했습니다. 이는 앞서 판단한 것입니다. 반환 값이 true이면 바로 false를 반환하고 후속 이동 함수 본문은 실행되지 않습니다.
4. 이동이 완료되면 병합 문제를 고려해야 합니다. 내 생각은 이동 후 이동 방향 (존재하는 경우)의 이전 상자 값을 이동 후 상자와 비교하십시오. 동일한 경우 이전 상자를 2 배로 설정하고 마지막 상자는 다음과 같습니다. 0으로 설정합니다. 예를 들어 아래로 이동하려면 다음과 같이 코드를 수정하세요.

for(var i = 0;i<4;i++){    
    var n=3;    
    for(var j = 3;j>=0;j--){        
    if(board[j][i] == 0){            
    continue;
        }else{            
        if(board[n][i]==0){
                board[n][i] = board[j][i];
                board[j][i] = 0;
            }            if(n<3){                
            if(board[n][i] == board[n+1][i]){
                    board[n+1][i] = board[n][i]*2;
                    board[n][i] = 0;                    
                    continue;
                }
            }
            n--;
        }
    }
}

병합할 상자가 없기 때문에 하단 상자인 경우를 제외하고 n<3인 경우에만 입력할 수 있습니다. 여기서 주목해야 할 점은 병합 후에는 현재 상자가 0이 된다는 것입니다. 앞서 언급했듯이 n은 0 상자의 위치를 ​​기록하는 데 도움이 됩니다. 따라서 여기서는 n 값을 변경할 필요가 없다는 점에 유의해야 합니다. box는 0입니다. 아직 값이 있는 경우 아래로 이동하려면 여기로 이동해야 합니다. 그렇지 않으면 위쪽 상자가 아래 병합된 상자에서 한 칸 비어 있게 되는데 이는 예상한 것과 다릅니다. 여기서도 이전 canMoveDown() 함수의 판단 조건을 수정해야 합니다. 병합이 가능한 경우에도 if 조건을 다음과 같이 수정해야 합니다.

if(board[j+1][i]==0||board[j+1][i]==board[j][i]){        
eturn false;}

5. 기본 기능은 기본적으로 끝났습니다. 결말에 대한 판단도 약간 있습니다. 결국 1은 상자도 없고 비어 있고, 2도 움직일 수 없다는 것입니다. 비어 있는 상자가 없으면 배열을 반복하여 모든 상자가 0이 아닌지 확인합니다. 이동할 수 없는 경우 앞서 작성한 canMoveDown() 함수와 위로 이동, 왼쪽으로 이동, 오른쪽으로 이동 기능을 사용하면 게임 종료 상자가 팝업되고 새로운 newGame( ) 기능을 다시 시작합니다.

위 내용은 js를 사용하여 2048 미니게임을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!