728x90
"Canvas 게임"
Canvas를 사용하여 만든 간단한 게임
![[HTML소스포함]_"Canvas 게임",_JavaScript_예제](https://blog.kakaocdn.net/dn/tSJtc/btsBYuLB3qp/Ow0rPIB7WBeJKbcLZl8m51/img.png)
자바스크립트로
게임을 어떻게 만들 수 있는지 알아볼 수 있습니다.
"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
반응형
'정보' 카테고리의 다른 글
| [HTML소스포함] "마우스를 클릭하면 숫자 증가" JavaScript 예제 (0) | 2023.12.15 |
|---|---|
| [HTML소스포함] 클릭으로 박스 이동하기, JavaScript 예제 (0) | 2023.12.08 |
| [HTML소스포함] 마우스따라 움직이는 눈동자, JavaScript 예제 (0) | 2023.12.07 |
| [HTML소스포함] 텍스트 애니메이션, JavaScript 예제 (0) | 2023.12.07 |
| 샤토 슈발블랑(Cheval Blanc) 프리미어 그랑크뤼 프랑스 보르도 와인 (0) | 2023.06.01 |
댓글