HTML, CSS 및 JavaScript를 사용하여 뱀 게임을 만드는 방법
스네이크 게임은 프로그래밍 및 문제 해결 기술을 향상시키는 데 사용할 수 있는 고전적인 프로그래밍 연습입니다. HTML, CSS 및 JavaScript를 사용하여 웹 브라우저에서 게임을 만들 수 있습니다.
게임에서 보드 주위를 이동하는 뱀을 제어합니다. 음식을 모을수록 뱀의 크기가 커집니다. 자신의 꼬리나 벽에 부딪히면 게임이 종료됩니다.
캔버스용 UI를 만드는 방법
HTML과 CSS를 사용하여 뱀이 움직일 수 있는 캔버스를 추가하세요. 기본 개념을 수정해야 하는 경우 연습할 수 있는 다른 많은 HTML 및 CSS 프로젝트가 있습니다.
전체 소스 코드는 이 프로젝트의 GitHub 리포지토리를 참조할 수 있습니다.
- “index.html”이라는 새 파일을 만듭니다.
- Visual Code 또는 Atom과 같은 텍스트 편집기를 사용하여 파일을 엽니다. 기본 HTML 코드 구조를 추가합니다.
<!doctype html>
<html lang="en-US">
<head>
<title>Snake Game</title>
</head>
<body>
</body>
</html> - body 태그 안에 뱀의 게임 보드를 나타내는 캔버스를 추가합니다.
<h2>Snake Game</h2>
<div id="game">
<canvas id="snake"></canvas>
</div> - HTML 파일과 같은 폴더에 “styles.css”라는 새 파일을 만듭니다.
- 내부에 전체 웹 페이지에 대한 일부 CSS를 추가합니다. 다른 필수 CSS 팁과 요령을 사용하여 웹 사이트의 스타일을 지정할 수도 있습니다.
#game {
width:400px;
height:400px;
margin:0 auto;
background-color:#eee;
}
h2 {
text-align:center;
font-family:Arial;
font-size:36px;
} - HTML 파일 내에서 head 태그에 CSS에 대한 링크를 추가합니다.
<link rel="stylesheet" type="text/css" href="styles.css">
- 캔버스를 보려면 웹 브라우저에서 “index.html” 파일을 엽니다.
뱀을 그리는 방법
아래 예에서 검은색 선은 뱀을 나타냅니다.
여러 사각형 또는 “세그먼트”가 뱀을 구성합니다. 뱀이 성장함에 따라 사각형의 수도 증가합니다. 게임 시작 시 뱀의 길이는 한 조각입니다.
- HTML 파일 내에서 body 태그 하단에 있는 새 JavaScript 파일에 대한 링크:
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - script.js를 만들고 캔버스의 DOM 요소를 가져오는 것으로 시작합니다.
var canvas = document.getElementById("snake");
- 캔버스 HTML 요소의 컨텍스트를 설정합니다. 이 경우 게임에서 2D 캔버스를 렌더링하려고 합니다. 이렇게 하면 HTML 요소에 여러 도형이나 이미지를 그릴 수 있습니다.
var canvas2d = canvas.getContext("2d");
- 게임 종료 여부, 캔버스의 높이 및 너비와 같은 기타 게임 내 변수를 설정합니다.
var gameEnded = false;
canvas.width = 400;
canvas.height = 400; - “snakeSegments”라는 변수를 선언합니다. 이것은 뱀이 차지할 “사각형”의 수를 유지합니다. 뱀의 길이를 추적하는 변수를 만들 수도 있습니다.
var snakeSegments = [];
var snakeLength = 1; - 뱀의 초기 X 및 Y 위치를 선언합니다.
var snakeX = 0;
var snakeY = 0; - 새 함수를 만듭니다. 내부에서 시작 뱀 조각을 시작 X 및 Y 좌표와 함께 snakeSegments 배열에 추가합니다.
function moveSnake() {
snakeSegments.unshift({ x: snakeX, y: snakeY });
} - 새 함수를 만듭니다. 내부에서 채우기 스타일을 검은색으로 설정합니다. 이것은 뱀을 그리는 데 사용할 색상입니다.
function drawSnake() {
canvas2d.fillStyle = "black";
} - 뱀의 크기를 구성하는 모든 세그먼트에 대해 너비와 높이가 10픽셀인 정사각형을 그립니다.
for (var i = 0; i < snakeSegments.length; i++) {
canvas2d.fillRect(snakeSegments[i].x, snakeSegments[i].y, 10, 10);
} - 100밀리초마다 실행되는 게임 루프를 만듭니다. 이렇게 하면 게임이 계속해서 새 위치에 뱀을 그리게 되며, 이는 뱀이 움직이기 시작할 때 매우 중요합니다.
function gameLoop() {
moveSnake();
drawSnake(); - 웹 브라우저에서 “index.html” 파일을 열면 시작 위치에서 가장 작은 크기의 뱀을 볼 수 있습니다.
뱀을 움직이게 하는 방법
플레이어가 키보드에서 누르는 버튼에 따라 뱀을 다른 방향으로 이동하는 논리를 추가합니다.
- 파일 상단에서 뱀의 초기 방향을 선언합니다.
var directionX = 10;
var directionY = 0; - 플레이어가 키를 누를 때 실행되는 이벤트 핸들러를 추가합니다.
document.onkeydown = function(event) {
};
- 이벤트 처리기 내에서 누른 키를 기준으로 뱀이 움직이는 방향을 변경합니다.
switch (event.keyCode) {
case 37: // Left arrow
directionX = -10;
directionY = 0;
break;
case 38: // Up arrow
directionX = 0;
directionY = -10;
break;
case 39: // Right arrow
directionX = 10;
directionY = 0;
break;
case 40: // Down arrow
directionX = 0;
directionY = 10;
break;
} - moveSnake() 함수에서 방향을 사용하여 뱀의 X 및 Y 좌표를 업데이트합니다. 예를 들어 뱀이 왼쪽으로 이동해야 하는 경우 X 방향은 “-10″이 됩니다. 이렇게 하면 게임의 모든 프레임에 대해 10픽셀을 제거하도록 X 좌표가 업데이트됩니다.
function moveSnake() {
snakeSegments.unshift({ x: snakeX, y: snakeY });
snakeX += directionX;
snakeY += directionY;
} - 현재 게임은 뱀이 움직이는 동안 이전 세그먼트를 제거하지 않습니다. 이렇게 하면 뱀이 다음과 같이 보입니다.
- 이 문제를 해결하려면 drawSnake() 함수 시작 부분에서 각 프레임에 새 뱀을 그리기 전에 캔버스를 지우십시오.
canvas2d.clearRect(0, 0, canvas.width, canvas.height);
- 또한 moveSnake() 함수 내에서 snakeSegments 배열의 마지막 요소를 제거해야 합니다.
while (snakeSegments.length > snakeLength) {
snakeSegments.pop();
} - “index.html” 파일을 열고 왼쪽, 오른쪽, 위쪽 또는 아래쪽 키를 눌러 뱀을 이동합니다.
캔버스에 음식을 추가하는 방법
뱀의 음식 조각을 나타내기 위해 보드 게임에 점을 추가합니다.
- 음식 조각 배열을 저장하기 위해 파일 상단에 새 변수를 선언합니다.
var dots = [];
- 새 함수를 만듭니다. 내부에서 점에 대한 임의의 X 및 Y 좌표를 생성합니다. 언제든지 보드에 10개의 점이 있는지 확인할 수도 있습니다.
function spawnDots() {
if(dots.length < 10) {
var dotX = Math.floor(Math.random() * canvas.width);
var dotY = Math.floor(Math.random() * canvas.height);
dots.push({ x: dotX, y: dotY });
}
} - 음식의 X 및 Y 좌표를 생성한 후 빨간색을 사용하여 캔버스에 그립니다.
for (var i = 0; i < dots.length; i++) {
canvas2d.fillStyle = "red";
canvas2d.fillRect(dots[i].x, dots[i].y, 10, 10);
} - 게임 루프 내에서 새 spawnDots() 함수를 호출합니다.
function gameLoop() {
moveSnake();
drawSnake();
spawnDots();
if(!gameEnded) {
setTimeout(gameLoop, 100);
}
} - “index.html” 파일을 열어 게임판에 있는 음식을 확인하세요.
뱀을 키우는 방법
음식 점과 충돌할 때 길이를 증가시켜 뱀을 성장시킬 수 있습니다.
- 새 함수를 만듭니다. 내부에서 도트 배열의 모든 요소를 반복합니다.
function checkCollision() {
for (var i = 0; i < dots.length; i++) {
}
} - 뱀의 위치가 점의 좌표와 일치하면 뱀의 길이를 늘리고 점을 삭제합니다.
if (snakeX < dots[i].x + 10 &&
snakeX + 10 > dots[i].x &&
snakeY < dots[i].y + 10 &&
snakeY + 10 > dots[i].y) {
snakeLength++;
dots.splice(i, 1);
} - 게임 루프에서 새 checkCollision() 함수를 호출합니다.
function gameLoop() {
moveSnake();
drawSnake();
spawnDots();
checkCollision();
if(!gameEnded) {
setTimeout(gameLoop, 100);
}
} - 웹 브라우저에서 “index.html” 파일을 엽니다. 키보드를 이용해 뱀을 움직여 먹이 조각을 모아 뱀을 키워보세요.
게임 종료 방법
게임을 종료하려면 뱀이 자신의 꼬리나 벽과 충돌했는지 확인하세요.
- “게임 오버” 알림을 인쇄하는 새 기능을 만듭니다.
function gameOver() {
setTimeout(function() {
alert("Game over!");
}, 500);
gameEnded = true
} - checkCollision() 함수 내에서 뱀이 캔버스 벽에 부딪히는지 확인합니다. 그렇다면 gameOver() 함수를 호출합니다.
if (snakeX < -10 ||
snakeY < -10 ||
snakeX > canvas.width+10 ||
snakeY > canvas.height+10) {
gameOver();
} - 뱀의 머리가 꼬리 부분과 충돌했는지 확인하려면 뱀의 각 조각을 반복합니다.
for (var i = 1; i < snakeSegments.length; i++) {
}
- for 루프 내에서 뱀의 머리 위치가 꼬리 부분과 일치하는지 확인합니다. 그렇다면 머리가 꼬리와 충돌했음을 의미하므로 게임을 종료합니다.
if (snakeX === snakeSegments[i].x && snakeY === snakeSegments[i].y) {
gameOver();
} - 웹 브라우저에서 “index.html” 파일을 엽니다. 벽이나 자신의 꼬리를 치면 게임이 종료됩니다.
게임을 통한 JavaScript 개념 학습
게임을 만드는 것은 학습 경험을 더욱 즐겁게 만드는 좋은 방법이 될 수 있습니다. JavaScript 지식을 계속 향상시키기 위해 더 많은 게임을 계속 만드십시오.
답글 남기기