728x90
안녕하세요.
자바스크립트로 간단한 비행기 슈팅 게임을 만들어보겠습니다.
오늘은 먼저 다음 영상처럼 화면에 비행기를 그리고 키보드 입력에 따라 좌우로 움직이도록 해보겠습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 브라우저에서 문서가 UTF-8로 인코딩되도록 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 모바일 기기에서도 웹페이지가 올바르게 표시되도록 설정 -->
<title>비행기 슈팅 게임</title>
<!-- 웹페이지의 제목을 설정 -->
<link rel="stylesheet" href="style.css">
<!-- 외부 스타일 시트(CSS) 파일 연결 -->
</head>
<body>
<!-- 캔버스 태그는 게임 화면을 표시할 공간입니다 -->
<canvas id="gameCanvas"></canvas>
<!-- 자바스크립트 파일을 연결 -->
<script src="script.js"></script>
</body>
</html>
style.css
/* 전체 화면의 기본 설정 */
body {
margin: 0; /* 여백 제거 */
display: flex; /* 화면을 중앙으로 정렬하기 위한 flexbox 사용 */
justify-content: center; /* 수평 중앙 정렬 */
align-items: center; /* 수직 중앙 정렬 */
height: 100vh; /* 화면 전체 높이 설정 */
background-color: #000; /* 배경색을 검정색으로 설정 */
}
/* 캔버스 스타일 */
canvas {
background-color: #111; /* 캔버스 배경색을 어두운 회색으로 설정 */
border: 2px solid #fff; /* 캔버스 테두리를 흰색으로 설정 */
}
script.js
// 1. 캔버스와 2D 렌더링 컨텍스트 가져오기
const canvas = document.getElementById('gameCanvas'); // HTML에서 캔버스를 가져옵니다.
const ctx = canvas.getContext('2d'); // 캔버스에서 2D 그리기 기능을 사용할 수 있게 합니다.
// 2. 캔버스 크기 설정
canvas.width = 400; // 캔버스의 너비를 400px로 설정
canvas.height = 600; // 캔버스의 높이를 600px로 설정
// 3. 비행기 객체 설정
const plane = {
x: canvas.width / 2 - 20, // 비행기의 초기 x 위치를 캔버스 중앙에 설정
y: canvas.height - 60, // 비행기의 초기 y 위치를 캔버스 하단에 설정
width: 40, // 비행기의 너비
height: 40, // 비행기의 높이
speed: 5, // 비행기의 이동 속도
moveLeft: false, // 왼쪽으로 이동 중인지 여부
moveRight: false, // 오른쪽으로 이동 중인지 여부
};
// 4. 비행기 그리기 함수
function drawPlane() {
ctx.fillStyle = 'white'; // 비행기의 색상을 흰색으로 설정
ctx.fillRect(plane.x, plane.y, plane.width, plane.height); // 비행기를 직사각형으로 그립니다.
}
// 5. 비행기 위치 업데이트 함수
function update() {
if (plane.moveLeft && plane.x > 0) { // 왼쪽으로 이동 중이고 캔버스를 벗어나지 않았을 때
plane.x -= plane.speed; // 왼쪽으로 이동
}
if (plane.moveRight && plane.x + plane.width < canvas.width) { // 오른쪽으로 이동 중이고 캔버스를 벗어나지 않았을 때
plane.x += plane.speed; // 오른쪽으로 이동
}
}
// 6. 키보드 입력 처리: 키를 눌렀을 때
window.addEventListener('keydown', function(e) {
if (e.code === 'ArrowLeft') { // 왼쪽 화살표 키가 눌렸을 때
plane.moveLeft = true; // 왼쪽 이동을 시작
}
if (e.code === 'ArrowRight') { // 오른쪽 화살표 키가 눌렸을 때
plane.moveRight = true; // 오른쪽 이동을 시작
}
});
// 7. 키보드 입력 처리: 키를 뗐을 때
window.addEventListener('keyup', function(e) {
if (e.code === 'ArrowLeft') { // 왼쪽 화살표 키를 뗐을 때
plane.moveLeft = false; // 왼쪽 이동을 멈춤
}
if (e.code === 'ArrowRight') { // 오른쪽 화살표 키를 뗐을 때
plane.moveRight = false; // 오른쪽 이동을 멈춤
}
});
// 8. 게임 루프 함수: 게임의 각 프레임을 업데이트하고 렌더링하는 함수
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스 전체를 지워서 이전 프레임의 그림을 지움
drawPlane(); // 비행기를 캔버스에 그립니다.
update(); // 비행기의 위치를 업데이트합니다.
requestAnimationFrame(gameLoop); // 다음 프레임에서 gameLoop 함수를 다시 호출
}
gameLoop(); // 게임 시작
이렇게 게임 화면을 생성하고, 키보드 입력에 따라 비행기를 움직여보았습니다.
다음 시간에는 화면에 적을 만들고, 총알을 발사할 수 있도록 구현해보겠습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 비행기 슈팅 게임 만들기 - (3) 총알 발사하기 (2) | 2024.09.28 |
|---|---|
| [JavaScript] 비행기 슈팅 게임 만들기 - (2) 적 생성하기 (2) | 2024.09.21 |
| [JavaScript] 간단한 테트리스 게임 만들기 (3) - 일시정지 (0) | 2024.09.14 |
| [JavaScript] 틱택토(Tic-Tac-Toe) 게임 만들기 (2) | 2024.09.09 |
| [JavaScript] 도형을 드래그하여 테두리에 정확히 맞추기 (2) | 2024.09.05 |