728x90
안녕하세요 오늘은 js 를 이용하여 화면내에 공을 이동시키도록 하겠습니다.
index.html 파일을 생성해줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ball Movement</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}
#ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
const ball = document.getElementById('ball');
let x = window.innerWidth / 2;
let y = window.innerHeight / 2;
const step = 10;
function moveBall(event) {
switch (event.key) {
case 'ArrowUp':
y -= step;
break;
case 'ArrowDown':
y += step;
break;
case 'ArrowLeft':
x -= step;
break;
case 'ArrowRight':
x += step;
break;
}
ball.style.transform = `translate(${x}px, ${y}px)`;
}
window.addEventListener('keydown', moveBall);
</script>
</body>
</html>
결과는 아래와 같습니다.
'JavaScript' 카테고리의 다른 글
| [Javascript] stripe만들기 (0) | 2024.06.23 |
|---|---|
| [Javascript] wikipedia 데이터 가져오기 (2) | 2024.06.19 |
| [JavaScript] 아이템 슬라이드 (0) | 2024.06.13 |
| [JavaScript] 아이템 동적추가 삭제 (0) | 2024.06.07 |
| [Javascript] 문단 동적생성 (0) | 2024.06.01 |