첫 번째 프로젝트 - BLACK MAMBA (3)

지난번에 이어 유저와 보석 등을 추가하였다.
하지만 아직 잔버그가 있고 코드가 너무 지저분해서 유저 컨트롤 부분만 적기로 했다.

우선은 화상키는 추가하지 않았고 키보드 방향키로만 조작이 되는 상태이다.

function userSetting(){
    document.getElementById("0,24").style.backgroundColor = "gray";
    document.addEventListener("keydown", keyEvent);
    board[user[0]][user[1]] = 2;
}
function keyEvent(e){
    let x = 0;
    let y = 0;
    if (e.key === "ArrowLeft"){
        y -= 1;
    }else if (e.key === "ArrowRight"){
        y += 1;
    }else if (e.key === "ArrowUp"){
        x -= 1;
    }else if (e.key === "ArrowDown"){
        x += 1;
    }
    userMove(x, y);
}

먼저 유저는 오른쪽 위에서 시작하는 것으로 생각하고 기본 세팅을 해주었다.

function userMove(x, y){
    const nextX = user[0] + x;
    const nextY = user[1] + y;
    const check = checkMovable(nextX, nextY);
    if (check === 0){
        document.getElementById(`${user[0]},${user[1]}`).style.backgroundColor = "white";
        board[user[0]][user[1]] = 0;
        user[0] += x;
        user[1] += y;
        document.getElementById(`${user[0]},${user[1]}`).style.backgroundColor = "gray";
        board[user[0]][user[1]] = 2;
    }
}

function checkMovable(X, Y){
    if ((X>=0 && X<25) && (Y>=0 && Y<25)){
        if (board[X][Y] === 1){
            return 1; //뱀에 닿았다
        }
        else if (board[X][Y] === 3){
            return 3; //보석에 닿았다
        }
        else{
            return 0; //아무것도 닿지 않았다
        }
    }
    return -1; //벽에 닿았다
}

처음에 userMove()를 만들기 전에 각 방향마다 함수를 만들어서 썼다가 압축이 가능하겠다 싶어서 정리해버렸다.
checkMovable()은 유저가 움직인 곳에 뱀이 있는지 보석이 있는지 아무것도 없는지 판단해서 반환해준다.

우선은 0과 -1만 사용되고 있다.

보석이 랜덤한 위치에서 나타나는 것과 뱀에 충돌하면 리셋되는 것, 보석을 7개 먹으면 종료되는 것도 다 구현해놓았는데,

뱀이 제대로 사라지지 않거나 필드가 깨끗하게 초기화되지 않는 등 잔버그가 몇가지 발견되었고, 코드가 너무 지저분해서 싹 정리한 다음에 한꺼번에 적어야겠다.