개요
프로젝트명: 자바스크립트로 만든 미니게임
분류: 토이 프로젝트
제작기간 : 2023.11.13 ~ 2023.11.21
사용 툴 : HTML, CSS, JavaScript
만든 이유?
자바스크립트, 리액트, 타입스크립트를 왔다갔다 찍먹하는 공부를 하다보니, 막상 제대로 할 줄 아는게 없더라구요?😂
기초부터 다시하자는 마음으로 미니게임 프로젝트를 진행했습니다.
🎮 미니게임 사이트
1. 인트로 페이지
일요일에 프로젝트를 시작해서 sunday game으로 타이틀 선정😎
롯데팬으로서 롯데자이언츠 폰트를 사용했는데 완전 맘에 듦
1.1 화면 꽉차게 만들기
1) width: 100vw; height: 100vh;
width: 100vw; height: 100vh;으로 화면에 꽉 차도록 만들어줍니다.
.intro {
width: 100vw;
height: 100vh;
}2) 스크롤 없애기
이렇게만 하면 가로 세로 스크롤이 나오기에 overflow: hidden;으로 스크롤을 없애주세요.
.intro {
overflow: hidden;
}3) margin: 0 0
마지막으로 reset.css를 사용하지 않으면 양옆 margin으로 꽉 차지 않게 되기에, reset.css를 사용하시거나 margin을 0px로 넣어주면 꽉 찬 화면을 만들 수 있습니다.
.intro {
margin:0 0;
}1.2 제목 중앙에 위치시키기
.intro_game-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}2. 화살표, 제목을 클릭하면 아래로 이동하는 효과
인트로 페이지에서 게임 제목이나 화살표를 클릭하면 아래로 이동하면서 메인페이지로 이동하고, 메인페이지에서 홈버튼을 누르면 인트로 페이지로 이동할 수 있도록 만들었습니다.
scrollIntoView를 알기 전에는 2개의 html을 만들어서 이동하는 건가??라는 엉뚱한 생각을 했음🙄
- element.scrollIntoView()
scrollIntoView를 통해서 한 화면에서 특정 element로 스크롤되어 보여지는 기능을 구현할 수 있었습니다!
const btn = document.querySelector('#intro_button');
const mainPage = document.querySelector('.main-page');
const introPage = document.querySelector('.intro');
const introTitle = document.querySelector('.intro_game-title');
const mainBtn = document.querySelector('#main_button');
btn.addEventListener('click', () => {
mainPage.scrollIntoView({ behavior: 'smooth' });
});
introTitle.addEventListener('click', () => {
mainPage.scrollIntoView({ behavior: 'smooth' });
});
mainBtn.addEventListener('click', () => {
introPage.scrollIntoView({ behavior: 'smooth' });
});
behavior은 스크롤될 때의 애니메이션 효과를 의미하고 저는 'smooth'속성을 지정해 부드럽게 스크롤 될 수 있도록 했습니다.
3. 메인 페이지(게임 목록)
3.1 게임 아이템들 중앙 정렬
display: flex; justify-content: center; align-items: center; 로 중앙정렬을 해주세요.
height: 100%;을 넣어주지 않으면 align-items: center;이 먹히지 않기에 까먹지 말기
이후 gap: 100px; 로 아이템들 사이 간격을 조절해줍니다.
.game-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
}3.1.1 모바일 크기시에 스크롤 가능
모바일 크기로 화면이 줄어들때 flex-wrap: wrap;으로 아이템들이 다음줄로 이동할 수 있게 해주고, 스크롤을 통해 내려간 아이템들이 잘리지 않도록 해줍니다.
못생긴 스크롤은 보이지 않도록 display: none;을 해줍니다.
.game-container {
flex-wrap: wrap;
overflow-y: scroll;
}
.game-container::-webkit-scrollbar {
display: none;
}3.2 게임 클릭시 해당 게임으로 바로 이동
game-container안에 각 게임div가 자식요소로 들어가 있고, 각 게임을 클릭하면 해당 게임으로 바로 이동할 수 있도록 만들었습니다.
해당 게임으로 바로 이동하기 위해서 각 div를 a태그로 감싸 구성했습니다.
<div class="game-container">
<a href="rps-game.html">
<div class="rps-game"
<h6 class="game-title"> 가위바위보</h6>
<div class="game-text">
<img id="game-text__img" src="img/rps.png"/>
</div>
<div class="game-text__rule">
PC와의 가위바위보에서 승리하세요!
</div>
</div></a>
</div>3.3 게임 박스 hover시에 효과
게임 요소에 마우스를 올리면 살짝 위로 올라가는 효과를 줘서 어떤 게임을 확인하고 있는지 바로 보여줄 수 있도록 했습니다.
.main-page a {
text-decoration: none;
transition: all 0.3s ease-in-out;
box-shadow: 0px 0px 20px white;
}hover시 효과를 부드럽게 표현하도록 transition을 줬습니다.
.main-page a:hover {
box-shadow: 0px 2px 25px white;
transform: translate(0px, -10px);
}transform: translate(0px, -10px);로 y축으로 10px 올라가도록 해주었고, box-shadow를 통해 올라간 느낌을 더 주었습니다.
프로젝트 완성 후 이렇게 velog에 올려본 적이 없었는데, 글 작성하다보니 내가 어떤 의도로 코드를 작성했는지 생각해볼 수 있어서 좋은 듯
