[HTML소스포함] "Canvas 게임", JavaScript 예제

정보

[HTML소스포함] "Canvas 게임", JavaScript 예제

yami_mov 2023. 12. 7. 16:12

728x90

"Canvas 게임"

Canvas를 사용하여 만든 간단한 게임

자바스크립트로

게임을 어떻게 만들 수 있는지 알아볼 수 있습니다.

"Canvas 게임"

See the Pen 게임 by Yami LEE (@Yami-LEE) on CodePen.

<canvas> 요소를 사용하여
공이 움직이는 기본적인 그래픽 애니메이션

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 스타일링: 캔버스 테두리 스타일 지정 */
      #gameCanvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <!-- 캔버스 요소: 그래픽을 그릴 영역 -->
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      // JavaScript 코드
      // 캔버스와 그리기 컨텍스트 가져오기
      const canvas = document.getElementById("gameCanvas");
      const context = canvas.getContext("2d");

      // 공의 초기 위치 및 속도 설정
      let x = canvas.width / 2;
      let y = canvas.height - 30;
      let dx = 2;
      let dy = -2;

      // 공 그리는 함수
      function drawBall() {
        context.beginPath();
        context.arc(x, y, 10, 0, Math.PI * 2);
        context.fillStyle = "#0095DD"; // 공의 색상
        context.fill();
        context.closePath();
      }

      // 전체 그리기 함수
      function draw() {
        // 이전 그림 지우기
        context.clearRect(0, 0, canvas.width, canvas.height);

        // 공 그리기
        drawBall();

        // 캔버스 경계에서 튕기기
        if (x + dx > canvas.width - 10 || x + dx < 10) {
          dx = -dx; // x 방향 전환
        }

        if (y + dy > canvas.height - 10 || y + dy < 10) {
          dy = -dy; // y 방향 전환
        }

        // 다음 프레임으로 이동
        x += dx;
        y += dy;
      }

      // 일정 간격으로 draw 함수 호출하여 애니메이션 생성
      setInterval(draw, 10);
    </script>
  </body>
</html>

<canvas> 요소를 사용하여
2D 그래픽을 그리고,
공을 움직이는 기본적인 애니메이션을 만듭니다.
setInterval 함수를 사용하여
draw 함수를 주기적으로 호출함으로써
애니메이션 효과를 구현합니다.

ㅇ[HTML소스포함] 마우스따라 움직이는 눈동자, JavaScript

[HTML소스포함] 마우스따라 움직이는 눈동자, JavaScript

[HTML소스포함] JavaScript으로 만든 마우스따라 움직이는 눈동자 눈동자가 마우스를 따라 움직임 See the Pen 눈동자 by Yami LEE (@Yami-LEE) on CodePen. 코드블럭 -> JavaScript로 마우스 이동에 따라 눈동자를 움

title.kr

저작자표시 비영리 변경금지