자바스크립트 엘리베이터 동작 시뮬레이션
먼저 위의 gif 그림을 살펴보자. 웹페이지의 중에 있는 사각형은 5층짜리 건물이다.
이 건물에는 엘리베이터가 설치되어 있고 엘리베이터에서 원하는 층의 버튼을 누르면 해당층으로 이동하는 엘리베이터 시뮬레이션 프로그램인 것을 알 수 있다.
html, css, javascript로 위 기능을 하는 웹프로그램을 작성해 보도록 하겠다.
elevator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>엘리베이터 시뮬레이터</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="building">
<div id="floors">
<!-- 각 층을 나타내는 요소들 -->
<div class="floor" data-floor="1">
<div class="floor-label">1층</div>
</div>
<div class="floor" data-floor="2">
<div class="floor-label">2층</div>
</div>
<div class="floor" data-floor="3">
<div class="floor-label">3층</div>
</div>
<div class="floor" data-floor="4">
<div class="floor-label">4층</div>
</div>
<div class="floor" data-floor="5">
<div class="floor-label">5층</div>
</div>
</div>
<div id="elevator-shaft">
<!-- 엘리베이터 -->
<div id="elevator">
<!-- 엘리베이터 버튼들 -->
<div id="elevator-buttons">
<button data-floor="1">1</button>
<button data-floor="2">2</button>
<button data-floor="3">3</button>
<button data-floor="4">4</button>
<button data-floor="5">5</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
document.addEventListener('DOMContentLoaded', () => {
// DOMContentLoaded 이벤트: HTML 문서의 모든 요소가 완전히 로드되고 파싱된 후에 발생하는 이벤트입니다.
// 여기서는 HTML 문서가 완전히 로드된 후에 JavaScript 코드를 실행하도록 설정합니다.
// 엘리베이터와 버튼 요소를 DOM에서 찾아 변수에 할당합니다.
const elevator = document.getElementById('elevator');
const floorButtons = document.querySelectorAll('#elevator-buttons button');
const floors = document.querySelectorAll('.floor'); // 각 층 요소를 선택합니다.
// 현재 엘리베이터의 층, 목표 층, 엘리베이터의 움직임 여부를 추적하기 위한 변수를 초기화합니다.
let currentFloor = 1;
let targetFloor = null;
let moving = false;
// 엘리베이터가 한 층을 이동할 때 호출되는 함수입니다.
const moveElevator = (floor) => {
// 엘리베이터가 이미 움직이고 있는지 확인합니다.
if (!moving) {
moving = true; // 엘리베이터가 움직인다는 상태를 나타냅니다.
targetFloor = floor; // 목표 층을 설정합니다.
// 각 층의 높이를 계산합니다.
const floorHeight = floors[0].clientHeight;
// 엘리베이터가 이동해야 할 위치를 계산합니다.
const targetPosition = (floor - 1) * floorHeight - 200;
// 엘리베이터의 위치를 애니메이션 효과와 함께 변경합니다.
elevator.style.bottom = `${targetPosition}px`;
// 엘리베이터 이동이 완료된 후에 수행할 작업을 설정합니다.
setTimeout(() => {
currentFloor = floor; // 현재 층을 업데이트합니다.
moving = false; // 엘리베이터의 움직임이 끝났음을 나타냅니다.
// 목표 층에 도착한 경우 목표 층을 null로 설정합니다.
if (currentFloor === targetFloor) {
targetFloor = null;
}
}, Math.abs(currentFloor - floor) * 2000); // 엘리베이터가 이동하는 시간을 계산합니다.
}
};
// 초기 엘리베이터 위치를 설정하는 부분입니다.
const initialPosition = (currentFloor - 1) * floors[0].clientHeight - 200;
elevator.style.bottom = `${initialPosition}px`;
// 각 버튼에 클릭 이벤트를 추가하여 엘리베이터 이동을 호출합니다.
floorButtons.forEach(button => {
button.addEventListener('click', () => {
const floor = parseInt(button.dataset.floor); // 클릭된 버튼에 해당하는 층을 가져옵니다.
if (targetFloor === floor) {
targetFloor = null;
} else {
moveElevator(floor);
}
});
});
});
위 코드를 자세히 이해하는데 도움이 되기 위한 추가 설명은 아래를 참고해 주시기 바란다.
document.addEventListener('DOMContentLoaded', () => {
이벤트 리스너를 사용하여 HTML 문서의 로드가 완료되면 실행될 코드 블록을 설정합니다. 이 경우에는 HTML 문서의 DOM 요소들이 모두 로드되고 준비된 상태에서 JavaScript 코드를 실행하도록 합니다.
const elevator = document.getElementById('elevator');
HTML 문서에서 id가 "elevator"인 요소를 찾아 해당 요소를 변수 elevator에 할당합니다. 이 요소는 엘리베이터를 나타냅니다.
const floorButtons = document.querySelectorAll('#elevator-buttons button');
HTML 문서에서 id가 "elevator-buttons"인 요소 안의 모든 button 요소들을 선택하여 해당 요소들을 변수 floorButtons에 할당합니다. 이 요소들은 각 층을 나타내는 버튼입니다.
const floors = document.querySelectorAll('.floor');
HTML 문서에서 클래스가 "floor"인 모든 요소를 선택하여 해당 요소들을 변수 floors에 할당합니다. 이 요소들은 건물의 각 층을 나타냅니다.
let currentFloor = 1;
현재 엘리베이터의 층을 나타내는 변수 currentFloor를 1로 초기화합니다.
let targetFloor = null;
엘리베이터가 이동할 목표 층을 나타내는 변수 targetFloor를 초기화합니다. 초기에는 이동할 목표 층이 없으므로 null로 설정합니다.
let moving = false;
엘리베이터가 움직이고 있는지 여부를 나타내는 변수 moving을 false로 초기화합니다.
const moveElevator = (floor) => {
moveElevator 함수를 정의합니다. 이 함수는 엘리베이터를 특정 층으로 이동시키는 역할을 합니다. 매개변수 floor는 엘리베이터가 이동할 목표 층을 나타냅니다.
if (!moving) {
엘리베이터가 이미 이동 중인지 확인합니다. 만약 엘리베이터가 이동 중이 아니라면 아래의 코드 블록을 실행합니다.
moving = true;
moving 변수를 true로 설정하여 엘리베이터가 이동 중임을 나타냅니다.
targetFloor = floor;
targetFloor 변수에 엘리베이터가 이동할 목표 층인 floor를 할당합니다.
const floorHeight = floors[0].clientHeight;
건물의 각 층의 높이를 계산하기 위해 첫 번째 층의 높이를 가져옵니다.
const targetPosition = (floor - 1) * floorHeight - 200;
엘리베이터가 이동할 목표 위치를 계산합니다. 엘리베이터가 이동할 위치는 층의 높이에 따라 결정되며, 건물의 가장 아래 부분에서 200px만큼 위로 올라가는 위치입니다.
elevator.style.bottom = ${targetPosition}px;
계산된 목표 위치를 엘리베이터의 CSS bottom 속성에 적용하여 엘리베이터의 위치를 변경합니다. 이를 통해 엘리베이터가 이동하는 애니메이션 효과가 나타납니다.
setTimeout(() => {
setTimeout 함수를 사용하여 일정 시간이 지난 후에 특정 작업을 수행하도록 설정합니다. 이 경우에는 엘리베이터가 이동하는 동안의 시간을 지연시킨 후에 다음 작업을 수행하도록 합니다.
currentFloor = floor;
현재 층을 업데이트하여 엘리베이터가 도착한 층을 나타냅니다.
moving = false;
moving 변수를 false로 설정하여 엘리베이터의 이동이 완료되었음을 나타냅니다.
if (currentFloor === targetFloor) { targetFloor = null; }
엘리베이터가 목표 층에 도착한 경우 목표 층을 null로 설정하여 엘리베이터가 다시 이동할 수 있도록 합니다.
const initialPosition = (currentFloor - 1) * floors[0].clientHeight - 200;
초기 엘리베이터의 위치를 계산합니다. 이는 엘리베이터가 처음에 어디에 위치해 있는지를 결정합니다.
elevator.style.bottom = ${initialPosition}px;
계산된 초기 위치를 엘리베이터의 CSS bottom 속성에 적용하여 엘리베이터를 초기 위치로 설정합니다.
button.addEventListener('click', () => {
각 버튼 요소에 클릭 이벤트 리스너를 추가합니다. 사용자가 버튼을 클릭하면 이벤트가 발생하고, 클릭된 버튼에 대한 처리를 수행하기 위해 콜백 함수가 실행됩니다.
const floor = parseInt(button.dataset.floor);
클릭된 버튼의 data-floor 속성 값을 가져와서 해당 층을 나타내는 정수형 변수 floor에 저장합니다.
if (targetFloor === floor) { targetFloor =null; } else { moveElevator(floor); }
클릭된 버튼이 이미 엘리베이터가 가야할 목표 층이라면 targetFloor를 null로 설정하여 취소하고, 그렇지 않다면 moveElevator 함수를 호출하여 엘리베이터를 해당 층으로 이동시킵니다.
style.css
/* CSS 영역 */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f0f0f0;
}
#building {
display: flex;
align-items: flex-start;
width: 300px; /* 건물의 너비를 300px로 설정 */
height: 200px;
border: 2px solid #000;
position: relative;
background: #fff;
}
#floors {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
width: 50px;
}
.floor {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
border-bottom: 1px solid #000;
padding: 5px;
}
#elevator-shaft {
flex: 1;
border-left: 1px solid #000;
position: relative;
}
#elevator {
width: 100%;
height: 30px;
background: blue;
position: absolute;
bottom: 0;
transition: bottom 2s;
display: flex;
justify-content: center;
align-items: center;
}
#elevator-buttons {
display: flex;
}
#elevator-buttons button {
margin: 2px;
width: 30px;
}
이상으로 이번 글에서는 엘리베이터 버튼을 누르면 해당 층으로 엘리베이터가 이동하는 재미있는 코드를 작성해 보았다.
'vita_Programing' 카테고리의 다른 글
| Javascript 벽돌깨기 게임 소스 공유 (0) | 2024.05.29 |
|---|---|
| MSSQL case when then else 문 예제와 활용 (0) | 2024.05.28 |
| MSSQL 개별 테이블 사용 용량 확인하는 방법 (0) | 2024.05.27 |
| javascript/jquery 다중 체크박스 값 가져오기 (0) | 2024.05.27 |
| HTML+CSS 드롭다운 메뉴 튜토리얼 (1) | 2024.05.26 |
