728x90
1.완성 미리보기
https://asa9874.github.io/Animation-quiz-game/
2.HTML 요소
.introduce: 페이지의 소개 섹션을 포함하는 컨테이너입니다. 퀴즈의 기본 정보를 제공합니다.
.introducetitle: 퀴즈의 제목을 표시하는 요소로, "애니메이션 퀴즈!"라는 텍스트를 보여줍니다.
.introducecontent: 퀴즈에 대한 설명을 포함하는 요소입니다. 퀴즈의 목적이나 규칙을 안내합니다.
.introduceimage: 애니메이션과 관련된 이미지를 표시하는 요소입니다. 소개 이미지로 사용됩니다.
.startbutton: 퀴즈를 시작하는 버튼입니다. 사용자가 클릭하여 게임을 시작할 수 있도록 합니다.
.backgroundimg: 배경 이미지를 표시할 수 있는 빈 컨테이너입니다. CSS를 통해 배경 이미지를 설정할 수 있습니다.
.score: 현재 점수를 표시하는 요소입니다. 기본적으로 점수는 "0"으로 설정됩니다.
.lifezone: 플레이어의 생명 수나 기회를 표시하는 영역입니다. 생명 수를 시각적으로 나타냅니다.
.LifeCount: 현재 생명 수를 표시하는 요소입니다. 생명 수는 숫자로 표현됩니다.
.titletext: 퀴즈의 주요 질문을 표시하는 요소입니다. 사용자에게 무엇을 선택해야 하는지 안내합니다.
.container: 두 개의 애니메이션 항목을 포함하는 컨테이너입니다. 애니메이션 항목들이 나란히 배치됩니다.
.box1: 첫 번째 애니메이션 항목을 포함하는 박스입니다. 이 박스에는 첫 번째 애니메이션의 이미지와 정보가 표시됩니다.
.anime-year.year1: 첫 번째 애니메이션의 출시일을 표시하는 요소입니다. 날짜 형식으로 애니메이션의 출시 연도를 나타냅니다.
.anime-img: 애니메이션을 나타내는 이미지입니다. 각 애니메이션 항목에 관련된 이미지를 표시합니다.
.anime-name1.anime-name: 첫 번째 애니메이션의 이름을 표시하는 요소입니다. 애니메이션의 제목을 텍스트로 보여줍니다.
.box2: 두 번째 애니메이션 항목을 포함하는 박스입니다. 이 박스에는 두 번째 애니메이션의 이미지와 정보가 표시됩니다.
.anime-year.year2: 두 번째 애니메이션의 출시일을 표시하는 요소입니다. 날짜 형식으로 애니메이션의 출시 연도를 나타냅니다.
.anime-name2.anime-name: 두 번째 애니메이션의 이름을 표시하는 요소입니다. 애니메이션의 제목을 텍스트로 보여줍니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://media1.tenor.com/m/dpcCCYHSwVIAAAAC/anime-nerd.gif" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>애니메이션 퀴즈</title>
</head>
<body>
<div class="introduce">
<p class="introducetitle">애니메이션 퀴즈!</p>
<div class="introducecontent">
2000~2024년도 사이에 나온 애니중 먼저나온 애니를 골라주세요!</p>
</div>
<div>
<img class="introduceimage" src="https://media.tenor.com/FMvFdMqTOgEAAAAi/haya-tikaze-haya.gif">
</div>
<button class="startbutton">시작하기</button>
</div>
<div class="backgroundimg"></div>
<div class="score">0</div>
<div class="lifezone">
<a class="LifeCount">1</a>
</div>
<p class="titletext">뭐가 먼저 나왔을까?</p>
<div class="container">
<div class="box1 box">
<p class="anime-year year1">2024-05-02</p>
<img class="anime-img" src="https://media.tenor.com/BCAxaLlW-soAAAAM/smile-cat.gif">
<p class="anime-name1 anime-name">애옹이1</p>
</div>
<div class="box2 box">
<p class="anime-year year2">2024-05-02</p>
<img class="anime-img" src="https://media.tenor.com/pFz1Q12_hXEAAAAM/cat-holding-head-cat.gif">
<p class="anime-name2 anime-name">애옹이2</p>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
3.JavaScript 파일
3-1.기본 세팅
퀴즈 페이지의 초기 설정을 담당합니다.
요소를 선택하고, 날짜를 처리하며, 스타일을 적용하고, 불필요한 요소를 숨기는 작업을 수행합니다.
페이지 로드 시 작동합니다.
import './reset.css'
import './style.css'
import './animation.css'
import $ from 'jquery'
import { ANIMATIONS } from './animation'
const $box1 = $('.box1');
const $box2 = $('.box2');
const $year1 =$('.year1');
const $year2 =$('.year2');
const $lifezone=$('.lifezone');
const $titletext=$('.titletext');
const $score=$('.score');
const $introduce=$('.introduce');
let year1Date=new Date($year1.text()).getTime()
let year2Date=new Date($year2.text()).getTime()
$('.backgroundimg').css('background-image', 'url("./sakura.png")');
const $LifeCount = $('.LifeCount')
$box1.hide();
$box2.hide();
$lifezone.hide();
$titletext.hide();
$score.hide();
3-2. randomAnime
이 함수는 .box 요소를 반복하며 각 박스에 랜덤 애니메이션의 이미지, 출시 연도, 이름을 설정합니다.
function randomAnime() {
$('.box').each(function() {
const index = Math.floor(Math.random() * ANIMATIONS.length);
$(this).find('.anime-img').attr('src', ANIMATIONS[index].AnimationImg);
$(this).find('.anime-year').text(ANIMATIONS[index]['AnimationYear'])
$(this).find('.anime-name').text(ANIMATIONS[index]['AnimationName'])
});
year1Date = new Date($year1.text()).getTime();
year2Date = new Date($year2.text()).getTime();
}
3-3. AnimeYearVisible
이 함수는 애니메이션의 출시 연도를 잠깐 동안 보이게 했다가 숨깁니다. 3.5초 후에 연도를 다시 숨기고, randomAnime 함수를 호출하여 새로운 애니메이션을 랜덤으로 설정합니다.
function AnimeYearVisible() {
$year1.toggleClass('visible');
$year2.toggleClass('visible');
setTimeout(function() {
$year2.toggleClass('visible');
$year1.toggleClass('visible');
randomAnime();
}, 3500);
}
3-4. Clickable
이 함수는 .box1과 .box2 요소의 클릭 이벤트를 비활성화합니다. 5초 후에는 다시 클릭 가능하게 설정하여 사용자 클릭을 제어합니다.
function Clickable() {
$('.box1, .box2').css('pointer-events', 'none');
setTimeout(function() {
$('.box1, .box2').css('pointer-events', 'auto');
}, 5000);
}
3-5. RemoveAnimation
이 함수는 5초 후에 .box1과 .box2에서 애니메이션 클래스를 제거하고, DOM을 강제로 다시 렌더링하여 애니메이션 효과를 초기화합니다.
function RemoveAnimation() {
setTimeout(function() {
$box1.removeClass('animatemove1 animatehidden');
$box2.removeClass('animatemove2 animatehidden');
void $box1[0].offsetWidth;
void $box2[0].offsetWidth;
}, 5000);
}
3-6.MoveBox
이 함수는 두 애니메이션 박스의 출시 연도를 비교하여,
더 오래된 애니메이션이 있는 박스를 움직이는 애니메이션 클래스를 추가하고, 다른 박스는 숨깁니다.
function MoveBox() {
if (year1Date <= year2Date) {
$box1.addClass('animatemove1');
$box2.addClass('animatehidden');
} else {
$box2.addClass('animatemove2');
$box1.addClass('animatehidden');
}
}
3-7.CheckCorrect
함수는 클릭한 박스가 정답인지 확인하고, 생명 수나 점수를 업데이트합니다.
생명 수가 0이 되면 GameOver 함수를 호출하여 게임 종료 처리합니다.
function CheckCorrect(box) {
const $box = $(box);
const lifeCountValue = parseInt($LifeCount.text(), 10);
const scoreValue = parseInt($score.text(), 10);
if ($box.is($box1) && year1Date > year2Date || $box.is($box2) && year2Date > year1Date) {
$LifeCount.text(lifeCountValue - 1);
} else {
$score.text(scoreValue + 1);
}
if (parseInt($LifeCount.text(), 10) === 0) {
GameOver();
}
}
3-8.updateLifeImages
이 함수는 현재 생명 수를 기준으로 .life 이미지를 생성하고 .lifezone에 추가합니다.
각 이미지에는 animatebounce 클래스를 추가하여 애니메이션 효과를 줍니다.
function updateLifeImages() {
const lifeCountValue = parseInt($LifeCount.text(), 10);
$lifezone.empty(); // 기존 이미지 제거
for (let i = 0; i < lifeCountValue; i++) {
$lifezone.append('<img class="life" src="https://media.tenor.com/_-ql-hIEuY4AAAAi/zero-two.gif">');
}
$('.life').addClass('animatebounce');
}
3-9. GameOver
게임 종료 시, 주요 게임 요소들을 숨기고, 게임 오버 메시지와 점수를 포함한 소개 화면을 표시합니다.
소개 화면에 애니메이션 효과를 주고, 버튼을 "다시시작"으로 변경합니다.
function GameOver() {
$box1.hide();
$box2.hide();
$lifezone.hide();
$titletext.hide();
$score.hide();
$introduce.show();
$('.introducetitle').text("게임 오바.");
$('.introducecontent').text("너의 점수는 " + parseInt($score.text(), 10) + '점이다.');
$('.startbutton').text("다시시작");
$('.introduceimage').attr('src', 'https://media1.tenor.com/m/ITuWS_FU7cQAAAAC/anime.gif');
$introduce.addClass('animaterecomeintroducebox');
setTimeout(function() {
$introduce.removeClass('animaterecomeintroducebox');
void $introduce[0].offsetWidth;
}, 1000);
}
3-10. 버튼 클릭 이벤트
.box1과 .box2 버튼 클릭 시, Clickable, RemoveAnimation, AnimeYearVisible, MoveBox, CheckCorrect, updateLifeImages 함수를 호출하여 클릭 이벤트를 처리합니다
$('.box1').on('click', function() {
Clickable();
RemoveAnimation();
AnimeYearVisible();
MoveBox();
CheckCorrect(this);
updateLifeImages();
});
$('.box2').on('click', function() {
Clickable();
RemoveAnimation();
AnimeYearVisible();
MoveBox();
CheckCorrect(this);
updateLifeImages();
});
3-11. 시작 버튼 클릭 이벤트
시작 버튼 클릭 시, 점수와 생명 수를 초기화하고, 생명 이미지를 업데이트합니다. 소개 화면에 애니메이션을 적용하여 숨기고, 게임 요소를 표시합니다. 애니메이션 효과를 적용한 후, 요소들의 스타일을 초기화합니다.
$('.startbutton').on('click', function() {
$score.text(0);
$LifeCount.text(5);
updateLifeImages();
$introduce.addClass('animateremoveintroducebox');
setTimeout(function() {
$introduce.hide();
$box1.show();
$box2.show();
$lifezone.show();
$score.show();
$titletext.show();
randomAnime();
$lifezone.addClass('animatestartgametitle');
$titletext.addClass('animatestartgametitle');
$box1.addClass('animatestartgamebox');
$box2.addClass('animatestartgamebox');
$('.backgroundimg').css('opacity', 0.6);
setTimeout(function() {
$box1.removeClass('animatestartgamebox');
$box2.removeClass('animatestartgamebox');
$introduce.removeClass('animateremoveintroducebox');
void $introduce[0].offsetWidth;
void $box1[0].offsetWidth;
void $box2[0].offsetWidth;
}, 2000);
}, 1000);
});
4.소스 코드
https://github.com/asa9874/Animation-quiz-game
GitHub - asa9874/Animation-quiz-game: [Node.js,Jquery]애니메이션 퀴즈 게임
[Node.js,Jquery]애니메이션 퀴즈 게임. Contribute to asa9874/Animation-quiz-game development by creating an account on GitHub.
github.com
728x90
'FrontEnd > Node.js' 카테고리의 다른 글
| [Node.js] POST ui생성, 전달받기 (0) | 2024.08.16 |
|---|---|
| [Node.js] gh pages 바닐라 자바스크립트로 배포할때 base 설정하기 (0) | 2024.07.27 |
| [Node.js] 영단어 퀴즈 게임 (0) | 2024.07.06 |
