클릭하면 움직이는 원(circle)을 생성자 함수를 이용하여 만들어볼 것이다.
사고하는 과정을 기록하기 위해 만드는 과정 + 사고방식을 글로 적어볼 것이다.
Step
1. 생성자 함수를 사용할 것이다.
웹 페이지의 빈 공간을 누를 때마다 circle 오브젝트가 생성될 것이고, 그것을 생성자 함수로 구현할 것이다.
2. 가장 먼저 해야할 것은 웹 페이지 전체를 덮은 HTML element를 만드는 것이다.
전체를 덮은 엘리멘트의 클릭 이벤트가 감지될 때마다, 이벤트 객체의 x좌표와 y좌표를 뽑아내 사용할 것이다.
<head>
<style>
.screen {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgba(200, 255, 255, 1)
}
</style>
</head>
<body>
<div class="screen"></div>
</body>
<script>
const main = document.querySelector('.screen')
main.addEventListener('click', (e) => {
console.log('x 포지션은', e.clientX)
console.log('y 포지션은', e.clientY)
})
</script>
3. circle의 CSS를 구상한 뒤에 Circle 생성자 함수를 작성한다.
Circle object가 만들어질때마다, 원 모양의 div element를 만들어야 한다.
그리고 CSS를 통해 top과 left property를 설정해주어야 한다.
그 후 main element(화면 전체를 메운 엘리먼트)에 append 해주면 된다.
이 때 만약 circle의 width와 height를 100px로 주었을 경우,
circle을 내가 의도한 위치인 중앙에 오게하기 위해서
main element에서 딴 좌표를 그 절반인 -50으로 맞추어주어야 한다.
(x와 y의 0, 0 지점에서 시작하기 때문에 내가 의도한대로 나오지 않는다.
다른 방법으로는 transition의 top bottom을 건드려주는 방법이 있다.)
<style>
...
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
border: 2px rgba(0, 0, 0, 1) solid;
background: rgba(0, 255, 255, 1);
position: fixed;
}
</style>
<body>
<div class="screen"></div>
</body>
<script>
const main = document.querySelector('.screen')
function Circle(x, y) {
y = y - 50
x = x - 50
const element = document.createElement('div')
element.classList.add('circle')
element.style.top = `${y}px`
element.style.left = `${x}px`
main.append(element)
}
main.addEventListener('click', (e) => {
new Circle(e.clientX, e.clientY)
})
</script>
4. 이제 circle이 움직이게 만들어보자.
moveUp이라는 함수를 만들 것이고, 이 함수는 y 변수를 업데이트 해줄 것이다.
y축은 top 프로퍼티와 연관이 있다. circle을 200ms마다 움직이게 해보자.
function Circle(x, y) {
y = y - 50
x = x - 50
const element = document.createElement('div')
element.classList.add('circle')
element.style.top = `${y}px`
element.style.left = `${x}px`
main.append(element)
const moveUp = () => {
y = y - 20
element.style.top = `${y}px`
setTimeout(moveUp, 200)
}
moveUp()
}(생성자함수에 moveUp이라는 함수를 추가해주고 setTimeout을 통해 계속 실행될 수 있게끔 한다.)
위와같이 코드하면 circle이 만들어지고 계속 좌표를 수정해가며 -y좌표로 향하게 된다.
5. 하지만 위와 같이 코드했을 경우에는 div가 사라지지 않는다는 문제점이 있다.
따라서 클릭을 수도없이 하면 수많은 div가 생겨 계속 브라우저의 보이지 않는 곳에서 메모리를 차지할 것이다.
이는 컴퓨터를 느리게 할 수 있다.
따라서 circle의 y좌표가 0보다 작을 때 해당 엘리먼트를 삭제해주는 방법을 고려할 수 있다.
const moveUp = () => {
y = y - 20
if (y < 0) {
console.log('circle이 삭제되었다')
return element.remove()
}
element.style.top = `${y}px`
setTimeout(moveUp, 200)
}
아래는 최종 코드이다.
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Click-Circle</title>
<style>
.screen {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgba(200, 255, 255, 1)
}
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
border: 2px rgba(0, 0, 0, 1) solid;
background: rgba(0, 255, 255, 1);
position: fixed;
}
</style>
</head>
<body>
<div class="screen"></div>
</body>
<script>
const main = document.querySelector('.screen')
function Circle(x, y) {
y = y - 50
x = x - 50
const element = document.createElement('div')
element.classList.add('circle')
element.style.top = `${y}px`
element.style.left = `${x}px`
main.append(element)
const moveUp = () => {
y = y - 20
if (y < 0) {
console.log('circle이 삭제되었다')
return element.remove()
}
element.style.top = `${y}px`
setTimeout(moveUp, 200)
}
moveUp()
}
main.addEventListener('click', (e) => {
new Circle(e.clientX, e.clientY)
})
</script>
</html>'Javascript' 카테고리의 다른 글
| 함수 장난 (1) (0) | 2023.01.27 |
|---|---|
| circle live 10 ( 이벤트버블링, stopPropagation() ) (0) | 2023.01.10 |
| [클래스] 클래스를 왜 배우는가? (0) | 2022.11.26 |
| 비디오 이벤트 연습(마우스 대면 플레이, 떼면 스탑 + 시간 카운트) (0) | 2022.10.31 |
| Pokemon viewer (프로미스 연습) 코드리뷰 (0) | 2022.10.31 |
