[Vanilla JS] 🎮 반려동물 룰렛 미니게임

하유민·2021년 8월 11일

JavaScript vanilla js

📋 Vanilla JS Projects

목록 보기

3/3

👤 계기

이번주 초반,

IT동아리 면접을 본 후 결과를 기다리는데, 갑자기 현타를 맞아 아무것도 하기가 싫었다.

이거 떨어지면 또 다른 걸 해야하는데, 자소서는 언제 쓰고 면접은 언제 준비하고 .. 생각이 들어 토요일에 면접을 본 뒤로 합불 결과가 나올 때까지 아무것도 하지 않았다. ^-^ (물론 커밋은 채웠다.)

심지어 다른 IT 동아리는 당장 화요일까지 마감이여서 쉴 시간도 없이 자소서부터 써야했었는데 그냥 포기하고 아무것도 하지 않았다.

<화요일 낮까지 나의 상태>

그러다가 결과를 받은 후 친한 언니와 함께 카공을 하러 갔다.

여전히 코딩을 하기는 싫어서 딴짓만 하던 중, 언니가 갑자기 미래 남편 뽑기 같은 이상한 걸 만들어보라고 했다.

~~띠용?~~

이상하긴 한데.. 왠지 끌린다.

거기에 영감을 얻어 반려동물에게 간택 당하는 미니 룰렛을 만들어보기로 하였다. ~~영감을 준 언니에게 감사를..~~

🟢 초기 세팅

우선 여러장의 반려동물 사진이 필요했다.

따라서 내 주변 반려인들의 반려동물 + 우리집 고양이들 까지 해서 많은 사진들을 받아왔다.

filestructure

html css js 파일을 만들고 추가로 img 폴더를 생성해 이곳저곳에서 가져온 반려동물 사진들을 넣었다.

📄 animal.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="animal.css">
    <script defer src="./animal.js"></script>
    <title>귀염둥이 고르기</title>
</head>
<body>
    <header>
        <div id="header-div">
            <p>반려동물의 선택</p>
            <button id="btn" onclick=start()>시작하기</button>
            <button id="stop" onclick=stop()>멈추기</button>
        </div>
    </header>
    <div id="main-div">
    </div>
</body>
</html>

html 은 크게 꾸미는 것 없이 기본적으로 구성했다.

📄 animal.js

const data = [
    {
        file : 'churo.jpg',
        description : '추로',
    },
    {
        file : 'ddang.jpg',
        description : '땅콩',
    },
  	.
  	.
  	.

js 에는 이렇게 데이터를 만들어주었다. ~~데이터는 너무 많아서 뒷 부분은 잘랐다.~~

🔵 개발

1. `SetInterval` : 사진 전환

// 요소 가져오기 
const btn = document.querySelector('#btn');
const mainDiv=document.querySelector('#main-div');
const image = document.createElement('img');
const info = document.createElement('p');

const changePic = () => {
    let i = 0;
    // 사진 돌아가하는 함수 setInterval 사용
    changePicId = setInterval(() => {
        image.src =`./img/${data[i].file}`;
        // 감자 예외처리
        if (data[i].file === 'potato.jpg') {
            info.innerHTML = `안타깝네요.. 당신은 ${data[i].description}의 선택을 받아버리고 말았습니다..`;
        } else {
            info.innerHTML =`당신은 ${data[i].description}의 선택을 받았습니다 !`
        }
        // 무한반복 로직
        if (i > data.length-1 || i === data.length-1) {
            i=0
        } else {
            i+=1;
        }
    }, 20)
}

위의 코드는 0.02초에 한 번씩 data 의 사진을 돌아가면서 출력해주는 코드이다.

시작하기 버튼을 누르면 changePic 함수가 실행된다.
image 태그의 src주소를 i 에 해당하는 data 의 file 값을 넣어주었다.
감자 사진일 때 예외처리를 넣었다.
i 에 해당하는 description 을 가져와 감자 사진일 때는 한탄하는 문구를, 다른 귀여운 동물들이 나오면 축하한다는 문구를 띄우게 했다.
리스트가 무한으로 돌아가야하기 때문에, i가 data의 길이 -1 (즉, 마지막 인덱스까지 갈 경우)일 경우, i를 0으로 초기화시켜 다시 리스트를 돌도록 하였다.
이 외의 경우에는 i 를 1씩 증가시켜 다음 사진으로 넘어가게 한다.

여기까지 하면 시작하기 버튼을 눌렀을 때, 사진이 빠른 속도로 무한 돌아가는 것을 확인할 수 있다.

animal

2. Start, Stop(`clearInterval`)

// 시작 이벤트
const start = () => {
    mainDiv.style.backgroundColor = 'white';
    image.setAttribute('height','400px');
    image.setAttribute('width','400px');
    mainDiv.appendChild(image);
    mainDiv.appendChild(info);
 
    changePic();
}

// 멈추기 이벤트
const stop = () => {
    mainDiv.style.backgroundColor = 'yellow';
    clearInterval(changePicId);
};

start 버튼을 눌렀을 때 img 위치를 정해 mainDiv 의 자식으로 들어가게 했다.
stop 버튼을 눌렀을 때 clearInterval 을 하여 화면 전환을 멈추도록 했다.
stop 했을 때, 배경색을 노란색으로 바꿔 강조가 되도록 했다.

🔴 Trouble Shooting

Stop 이벤트가 실행이 안 되는 문제가 발생했다.

이유는, changePicId 는 지역변수이기 때문에 stop 함수 내에서 사용할 수 없기 때문이었다.

구글링을 해본 결과, 이럴 때는 어쩔 수 없이 var 를 사용하여 해결을 하는 것 같았다. ㅠㅠ

// 요소 가져오기 
const btn = document.querySelector('#btn');
const mainDiv=document.querySelector('#main-div');
const image = document.createElement('img');
const info = document.createElement('p');
// 어쩔 수 없는 var 사용 
var changePicId;

초기에 요소를 설정할 때 var 로 changePicId 를 선언해주어서 전역으로 쓸 수 있게 해주었다.

그리하여 .. 3시간만에 개발이 끝났다.

✅ 결과

animal_last

~~중간에 이상한 게 보이는 것은 기분탓이다.~~

✔ 느낀점

힐링되는 코딩이었다.. 정말 아무생각없이 만들었고 즐거웠다 ^^
이런 간단한 미니프로젝트도 도움이 많이 된다는 것을 느꼈다. setInterval, clearInterval 같이 꼭 필요한 이벤트를 배울 수 있어 의미 있었다.
쉬어가는 느낌으로 간단하게 했는데 결과가 잘 나온 것 같아 뿌듯했다.

🌿 GITHUB

하유민

💻프론트엔드개발자

이전 포스트

[Vanilla JS] 🎮 반려동물 룰렛 미니게임

📋 Vanilla JS Projects

👤 계기

🟢 초기 세팅

📄 animal.html

📄 animal.js

🔵 개발

1. `SetInterval` : 사진 전환

2. Start, Stop(`clearInterval`)

🔴 Trouble Shooting

그리하여 .. 3시간만에 개발이 끝났다.

✅ 결과

✔ 느낀점

[Vanilla JS] TODOLIST (2) - END

0개의 댓글

관련 채용 정보

[Vanilla JS] 🎮 반려동물 룰렛 미니게임

📋 Vanilla JS Projects

👤 계기

🟢 초기 세팅

📄 animal.html

📄 animal.js

🔵 개발

1. SetInterval : 사진 전환

2. Start, Stop(clearInterval)

🔴 Trouble Shooting

그리하여 .. 3시간만에 개발이 끝났다.

✅ 결과

✔ 느낀점

[Vanilla JS] TODOLIST (2) - END

0개의 댓글

관련 채용 정보

1. `SetInterval` : 사진 전환

2. Start, Stop(`clearInterval`)