오늘은 자바스크립트 19일차 되는 날 입니다..
오늘은 제 개인 프로젝트로 저의 학습 능력을
향상 시키기 위해 준비한 프로그램입니다!
클론코딩에 저의 추가 프로그램을 준비해서
만들어보았습니다.
오늘의 프로젝트는 마리오 두더지 잡기 1일차 입니다!
이 프로젝트의 요구사항을 말씀드리겠습니다.
<요구사항>
1. 배경, 게임테마, 두더지, 식물, 파이프 이미지 준비
2. 두더지와 식물은 랜덤으로 배치
3. 두더지를 클릭시 점수 획득
4. 식물을 클릭시 게임 종료
<추가 요구사항>
1. 게임 시작 화면 만들기
2. 최종점수를 정해서 게임승리
게임승리를 표시하는 이미지 입니다.
두더지를 클릭시 위에 점수가 10점씩 책정이 되고
200점이 될 시 YOU WIN 이라는 메세지를 보여줍니다.
게임오버를 표시하는 이미지 입니다.
두더지가 아닌 식물을 클릭시 위에 점수가 책정이 안되고
GAME OVER라는 메세지를 보여줍니다.
둘다 동일하게 보시면 첫번째 게임스타트 화면을 보실 수 있습니다.
게임 스타트 버튼을 누르게 되면 게임화면 으로 전환됩니다.
<코드설명>
[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>마리오 두더지 잡기 게임</title> <link rel="stylesheet" href="mole.css"> <script src="mole.js" defer></script> </head> <body> <!-- 시작 화면 --> <div id="start-screen"> <h1>Mario Whac-a-Mole</h1> <button id="start-button">start</button> </div> <!-- 게임 화면 --> <div id="game-screen" style="display: none;"> <h1>Mario Whac-a-Mole</h1> <h2 id="score">0</h2> <div id="board"></div> </div> </body> </html>
시작화면
1. 게임이 시작되기 전의 화면을 담고 있는 컨테이너
2. 게임 제목을 표시하는 헤더
3. 게임을 시작하는 버튼
게임화면
1. 게임 화면을 담고 있는 컨테이너
2. 속성으로 게임이 시작 되기 전까지 숨어있기
3. 게임 제목 표시
4. 현재 점수를 표시
5. 게임 타일 배치 컨테이너
[css]
/* 전체적인 바디 스타일 설정 */ body { font-family: Arial, Helvetica, sans-serif; text-align: center; background: url("./mario-bg.jpg"); background-size: cover; } /* 시작 화면 스타일 */ #start-screen { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100vh; background: url("./Super-Mario.jpg"); background-size: cover; padding-top: 8vh; box-sizing: border-box; } /* 시작 화면의 제목 스타일 */ #start-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: 3em; font-weight: bold; margin: 1; } /* 시작 버튼 스타일 */ #start-button{ 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: 1.2em; font-weight: bold; margin: 1; background: url("./random.jpeg") no-repeat center; background-size: contain; border: none; cursor: pointer; padding: 20px 40px; } /* 게임 화면 스타일 */ #game-screen { text-align: center; } /* 게임 보드 스타일 */ #board { width: 540px; height: 540px; background: url("./soil.png"); background-size: cover; border: 3px solid white; border-radius: 25px; margin: 0 auto; display: flex; flex-wrap: wrap; } /* 각 타일 스타일 */ #board div { width: 180px; height: 180px; background-image: url("./pipe.png"); background-size: cover; } /* 이미지 스타일 */ #board div img { width: 100px; height: 100px; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; }
-
전체스타일: 배경 이미지를 설정하고, 텍스트를 중앙 정렬하며, 기본 글꼴을 설정합니다.
-
시작 화면: 화면 전체를 채우고, 시작 버튼과 제목을 중앙에 배치합니다.
배경 이미지를 설정하고, 제목에 그림자를 추가하여 강조합니다.
-
시작 버튼: 버튼의 배경에 이미지를 설정하고, 흰색 텍스트와 그림자를 추가하여 잘 보이게 합니다. 버튼의 테두리를 없애고, 클릭 시 손 모양 커서를 표시합니다.
-
게임 화면: 텍스트를 중앙 정렬하여 게임 화면의 요소들을 중앙에 배치합니다.
-
게임 보드: 게임 타일이 배치될 영역으로, 배경 이미지와 테두리, 둥근 모서리를 설정합니다. 타일을 플렉스 박스를 사용해 정렬하고, 화면 중앙에 배치합니다.
-
타일 및 이미지: 타일의 배경을 설정하고, 게임 내 이미지 크기와 드래그 방지 설정을 추가합니다.
[javascript]
변수 선언let currMoleTile; // 현재 두더지가 있는 타일을 저장하는 변수 let currplantTile; // 현재 식물이 있는 타일을 저장하는 변수 let score = 0; // 현재 점수를 저장하는 변수 let gameOver = false; // 게임 종료 상태를 저장하는 변수
윈도우 로드
window.onload = function() { document.getElementById("start-button").addEventListener("click", startGame); }페이지가 로드되면, start-button 클릭 이벤트 리스너가 설정됩니다.
사용자가 start-button을 클릭하면 startGame 함수가 호출됩니다.
게임 시작
function startGame() { document.getElementById("start-screen").style.display = "none"; document.getElementById("game-screen").style.display = "block"; setGame(); }start-screen을 숨기고 game-screen을 보이게 한 후,
setGame 함수를 호출하여 게임을 설정합니다.
게임 설정
function setGame() { for (let i = 0; i < 9; i++) { let tile = document.createElement("div"); tile.id = i.toString(); tile.addEventListener("click", selectTile); document.getElementById("board").appendChild(tile); } setInterval(setMole, 1000); // 매 1초마다 두더지를 설정 setInterval(setPlant, 2000); // 매 2초마다 식물을 설정 }9개의 타일을 생성하여 board에 추가하고, 각 타일에 클릭 이벤트 리스너를 설정합니다.
매 1초마다 두더지 함수가 호출되고, 매 2초마다 식물 함수가 호출됩니다.
랜덤 타일 번호 생성
function getRandomTile() { let num = Math.floor(Math.random() * 9); return num.toString(); }0에서 8 사이의 랜덤한 숫자를 생성하여 문자열로 반환합니다.
두더지 설정
function setMole() { if (gameOver) { return; } if (currMoleTile) { currMoleTile.innerHTML = ""; } let mole = document.createElement("img"); mole.src = "./monty-mole.png"; let num = getRandomTile(); if (currplantTile && currplantTile.id == num) { return; } currMoleTile = document.getElementById(num); currMoleTile.appendChild(mole); }게임이 종료된 상태라면 함수를 종료합니다.
현재 두더지가 있는 타일을 비웁니다.
새로운 두더지 이미지를 생성하여 랜덤한 타일에 추가합니다.
만약 해당 타일에 식물이 있다면 두더지를 추가하지 않습니다.
식물 설정
function setPlant() { if (gameOver) { return; } if (currplantTile) { currplantTile.innerHTML = ""; } let plant = document.createElement("img"); plant.src = "./piranha-plant.png"; let num = getRandomTile(); if (currMoleTile && currMoleTile.id == num) { return; } currplantTile = document.getElementById(num); currplantTile.appendChild(plant); }게임이 종료된 상태라면 함수를 종료합니다.
현재 식물이 있는 타일을 비웁니다.
새로운 식물 이미지를 생성하여 랜덤한 타일에 추가합니다.
만약 해당 타일에 두더지가 있다면 식물을 추가하지 않습니다.
타일 선택
function selectTile() { if (gameOver) { return; } if (this == currMoleTile) { score += 10; document.getElementById("score").innerHTML = score.toString(); if (score >= 200) { document.getElementById("score").innerHTML = "YOU WIN: " + score.toString(); gameOver = true; } } else if (this == currplantTile) { document.getElementById("score").innerHTML = "GAME OVER: " + score.toString(); gameOver = true; } }게임이 종료된 상태라면 함수를 종료합니다.
클릭된 타일이 두더지가 있는 타일이라면 점수를 10점 추가하고 점수를 업데이트합니다.
점수가 200점 이상이면 게임 승리 메시지를 표시하고 게임을 종료합니다.
클릭된 타일이 식물이 있는 타일이라면 게임 오버 메시지를 표시하고 게임을 종료합니다.
아직 업데이트 중인 프로그램이라 1일차라는 표시를 해놨습니다.
추가 하는 부분은 또 2일차에 블로그로 뵙겠습니다.
아직 어려운점도 부족한 점도 많지만
프론트엔드로 진출하기 위해 한 계단을 오른 프린이 일기였습니다.
끝까지 읽어주신분들 감사합니다~!
코드 별로 상세한 설명을 적어주셔서 어떤 의미를 가지는 코드인지 쉽게 이해가 가능했습니다. 감사합니다!