마리오 두더지 잡기 2일차

오늘은 자바스크립트 20일차 되는 날 입니다..
오늘은 제 개인 프로젝트로 저의 학습 능력을
향상 시키기 위해 준비한 프로그램입니다!
클론코딩에 저의 추가 프로그램을 준비해서
만들어보았습니다.

오늘의 프로젝트는 마리오 두더지 잡기 2일차 입니다!
이 프로젝트의 요구사항을 말씀드리겠습니다.

<추가요구사항>
1. start 버튼 이미지 편집
2. start 버튼 호버시 위로 올라감
3. trasition스타일을 넣어서 애니메이션 자연스럽게
4. 게임화면 안에 폰트 바꾸기
5. 보너스 점수를 주는 황금 버섯 추가
(두더지 10번에 1번 나옴 나오는 시간 1초)
6. 목숨바 만들기, 식물을 누르면 게임오버인게 체력으로 기회 3번을 제공

보이는 첫 화면 start 버튼 편집이 되고 호버되는 모습을 볼 수 있습니다
게임화면 폰트 스타일은 시작화면과 동일한 CSS스타일을 가지고 있고
보너스 점수를 주는 황금 버섯이 추가 되어있는 것을 볼 수 있습니다.
목숨바도 제공해 기회제공을 하는 것을 볼 수 있습니다.

<추가 된 목숨 HTML>

<div id="lives-container"></div>

<추가 된 CSS>

/* 마우스 호버 시 애니메이션 */
#start-button:hover{
    transform: translateY(-10px);
}

요소를 Y축 방향으로 -10px 만큼 이동시킵니다. 즉, 요소가 화면에서 위쪽으로 10픽셀 이동하게 됩니다.
이 효과를 사용하게 된 이유는 마우스를 올렸을 때 부드러운 움직임을 통해 시각적인 부분도 제공을 하자는 의미로 사용했습니다.

/* 게임 스크린 문구 */
#game-screen h1{
    color: white;
    text-shadow: 1px 1px 0 #000,
                 2px 2px 0 #000,
                 3px 3px 0 #000,
                 4px 4px 0 #000,
                 5px 5px 0 #000,
                 6px 6px 0 #000,
                 7px 7px 0 #000,
                 8px 8px 0 #000,
                 9px 9px 0 #000,
                 10px 10px 0 #000;
    font-size: 2em;
    font-weight: bold;
    margin: 1;
}

text-shadow를 사용한 이유는
텍스트에 여러 겹의 그림자를 적용하여 입체적인 효과와 10개의 그림자가 겹쳐져서 텍스트가 두꺼운 외곽선을 가진 것처럼 보이게 하기 위해서 입니다.

/* 점수 */
#score{
    color: white;
    text-shadow: 
            -1px -1px 0 #000,
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000;  
}

text-shadow를 사용한 이유는
네 개의 그림자가 겹쳐지면서 텍스트 주위에 검은색 테두리가 생겨 텍스트가 더 선명하게 보이게 하기 위해서 그리고 다양한 배경색에서 텍스트를 잘 보이게 하는 데 유용하기 때문에 입니다.

/* 점수와 목숨을 포함하는 컨테이너 스타일 */
#score-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* 점수와 목숨 사이의 간격 */
    margin-bottom: 5px;
}

점수와 목숨을 포함하는 컨테이너를 플렉스박스로 중앙 정렬하고, 내부 요소 사이의 간격을 20px, 아래쪽 여백을 5px로 설정.

/* 목숨 컨테이너 스타일 */
#lives-container {
    display: flex;
    align-items: center;
}

목숨 아이콘을 포함하는 컨테이너를 플렉스박스로 설정하고, 내부 요소를 중앙 정렬.

/* 목숨 아이콘 스타일 */
#lives-container img {
    width: 40px;
    height: 40px;
    margin: 0 5px;
}

목숨 아이콘의 크기를 40px x 40px로 설정하고, 좌우에 5px의 간격을 추가.

<추가된 JAVASCRIPT>

변수 선언

let currGoldenMushroomTile; // 현재 황금버섯이 있는 타일
let moleCount = 0; // 두더지가 나온 횟수
let lives = 3; // 목숨 초기화
const lifeImage = "./heart.png"; // 정상 목숨 아이콘 경로
const lifeImageEmpty = "./unheart.png"; // 깎인 목숨 아이콘 경로

목숨 초가화

// 목숨 초기화 함수
function initLives() {
    let container = document.getElementById("lives-container");
    container.innerHTML = ""; // 기존 목숨 아이콘 제거
    for (let i = 0; i < lives; i++) {
        let img = document.createElement("img");
        img.src = lifeImage;
        container.appendChild(img);
    }
}

document.getElementById("lives-container")를 사용하여 목숨
아이콘을 담을 컨테이너 요소를 가져와 container.innerHTML = "";로 기존 아이콘을 제거합니다.

for 루프를 사용하여 lives 수만큼 반복하며, lifeImage 경로를 가진 img 요소를 생성하고 이를 컨테이너에 추가합니다.

목숨 업데이트

// 목숨 업데이트 함수
function updateLives() {
    let container = document.getElementById("lives-container");
    let children = container.children;
    for (let i = 0; i < children.length; i++) {
        if (i < lives) {
            children[i].src = lifeImage;
        } else {
            children[i].src = lifeImageEmpty;
        }
    }
}

컨테이너의 자식 아이콘을 가져옴.
남아있는 목숨에 해당하는 아이콘은 정상 상태(lifeImage)로 설정.
남아있는 목숨보다 더 많은 아이콘은 깎인 상태(lifeImageEmpty)로 설정.

황금버섯

// 황금버섯 설정 함수
function setGoldenMushroom() {
    if (gameOver) {
        return;
    }
    if (currGoldenMushroomTile) {
        currGoldenMushroomTile.innerHTML = "";
    }
    let goldenMushroom = document.createElement("img");
    goldenMushroom.src = "./golden-mushroom.png";
    let num = getRandomTile();
    if ((currMoleTile && currMoleTile.id == num) || (currPlantTile && currPlantTile.id == num)) {
        return;
    }
    currGoldenMushroomTile = document.getElementById(num);
    currGoldenMushroomTile.appendChild(goldenMushroom);
    // 1초 후에 황금버섯 제거
    setTimeout(() => {
        if (currGoldenMushroomTile) {
            currGoldenMushroomTile.innerHTML = "";
            currGoldenMushroomTile = null;
        }
    }, 1000);
}

게임 종료 상태 확인: gameOver가 true면 함수 종료

이전 황금버섯 제거: 현재 황금버섯이 있으면 제거

황금버섯 생성: 새로운 img 요소를 만들어 황금버섯 이미지를 설정

랜덤 타일에 배치: 랜덤으로 선택된 타일에 황금버섯을 배치, 만약 해당 타일에
두더지나 식물이 있다면 배치하지 않음

1초 후 제거: 1초 후에 황금버섯을 제거하고, currGoldenMushroomTile을 null로 설정

게임 시작

// 게임 시작 함수
function startGame() {
    document.getElementById("start-screen").style.display = "none";
    setTimeout(() => {
        document.getElementById("game-screen").style.display = "block";
        initLives(); // 목숨 초기화
        setGame();
    }, 300);
}

시작 화면 숨기기: start-screen 요소를 숨깁니다.

게임 화면 표시: 300ms 후에 game-screen 요소를 표시합니다.

목숨 초기화: initLives() 함수를 호출하여 목숨 아이콘을 초기화합니다.

게임 설정: setGame() 함수를 호출하여 게임 보드를 설정합니다.

타일 선택

// 타일 선택 함수
function selectTile() {
    if (gameOver) {
        return;
    }
    if (this == currMoleTile) {
        score += 10;
        document.getElementById("score").innerHTML = score.toString();
        setMole(); // 두더지를 새로운 위치로 이동
        if (score >= 200) {
            document.getElementById("score").innerHTML = "YOU WIN: " + score.toString();
            gameOver = true;
        }
    } else if (this == currPlantTile) {
        lives -= 1; // 목숨 감소
        updateLives(); // 목숨 업데이트
        if (lives <= 0) {
            document.getElementById("score").innerHTML = "GAME OVER: " + score.toString();
            gameOver = true;
        }
    } else if (this == currGoldenMushroomTile) {
        score += 50;
        document.getElementById("score").innerHTML = score.toString();
        currGoldenMushroomTile.innerHTML = "";
        currGoldenMushroomTile = null;
    }
}

게임 종료 상태 확인: gameOver가 true면 아무 동작도 하지 않음

두더지 클릭: 점수를 10점 추가하고 점수를 화면에 표시,
두더지를 새로운 위치로 이동(setMole() 호출)
점수가 200점 이상이면 승리 메시지를 표시하고 게임 종료

식물 클릭: 목숨을 1 감소시키고 목숨 상태를 업데이트(updateLives() 호출), 목숨이 0이 되면 게임 오버 메시지를 표시하고 게임 종료

황금버섯 클릭: 점수를 50점 추가하고 점수를 화면에 표시,
황금버섯을 제거하고 currGoldenMushroomTile을 null로 설정.

아직 업데이트 중인 프로그램이라 2일차라는 표시를 해놨습니다.

추가 하는 부분은 또 3일차에 블로그로 뵙겠습니다.

아직 어려운점도 부족한 점도 많지만
프론트엔드로 진출하기 위해 한 계단을 오른 프린이 일기였습니다.

끝까지 읽어주신분들 감사합니다~!