자바스크립트로 농구공이 튀는 애니메이션 만들기

18 Oct 2023

javascript

basketball

농구공이 튀는 애니메이션을 자바스크립트를 사용하여 만들어보겠습니다. 이 애니메이션은 HTML5 <canvas> 요소를 사용하여 구현됩니다.

준비물

HTML 파일: index.html
CSS 파일: style.css
자바스크립트 파일: script.js

1. HTML 파일 작성

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Basketball Animation</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <canvas id="basketball-canvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

2. CSS 파일 작성

#basketball-canvas {
  background-color: #000;
}

3. 자바스크립트 파일 작성

// Canvas 요소와 컨텍스트 가져오기
const canvas = document.getElementById('basketball-canvas');
const context = canvas.getContext('2d');

// 공 객체 생성
const ball = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 20,
  dx: 2,
  dy: -2
};

// 튀는 애니메이션 함수
function animate() {
  // 이전 프레임을 지우기
  context.clearRect(0, 0, canvas.width, canvas.height);

  // 공 그리기
  context.beginPath();
  context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  context.fillStyle = '#FF4500';
  context.fill();
  context.closePath();

  // 벽과 충돌 감지
  if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
    ball.dx = -ball.dx;
  }
  if (ball.y + ball.dy > canvas.height - ball.radius || ball.y + ball.dy < ball.radius) {
    ball.dy = -ball.dy;
  }

  // 좌표 업데이트
  ball.x += ball.dx;
  ball.y += ball.dy;

  // 애니메이션 반복
  requestAnimationFrame(animate);
}

// 애니메이션 시작
animate();

이제 웹브라우저에서 index.html 파일을 열어서 농구공이 튀는 애니메이션을 확인할 수 있습니다.

결론

이번에는 자바스크립트를 사용하여 농구공이 튀는 애니메이션을 만들어보았습니다. <canvas> 요소를 이용하여 그래픽을 그리고, 애니메이션을 구현할 수 있습니다. 이를 응용하여 다양한 애니메이션을 만들어볼 수 있습니다.

#javascript #canvas