HTML, CSS 및 JavaScript를 사용하여 뱀 게임을 만드는 방법

2023/02/03

스네이크 게임은 프로그래밍 및 문제 해결 기술을 향상시키는 데 사용할 수 있는 고전적인 프로그래밍 연습입니다. 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>  <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 지식을 계속 향상시키기 위해 더 많은 게임을 계속 만드십시오.