예전에 MOOC에서 Canvas 영상을 몇 편 봤는데, 늘 글쓰기 연습을 하고 싶었어요. 저는 Snake가 비교적 단순하다고 생각합니다. 대학에 다닐 때에도 C 언어의 문자 버전을 작성했지만 여전히 많은 문제에 직면했습니다.
최종 효과는 다음과 같습니다. (사진이 너무 크면 시간이 너무 오래 걸립니다. gif 녹화 소프트웨어에는 시간 제한이 있습니다...)
게임 영역을 정의하는 것부터 시작하세요. Snake의 화면에는 뱀 몸과 사과라는 두 가지 요소만 있으며 둘 다 정사각형 격자로 구성될 수 있습니다. 사각형 사이에 간격을 추가합니다. 공백을 추가하는 이유는 무엇입니까? 모든 격자를 성공적으로 채웠을 때 틈이 없으면 크고 단단한 사각형이 될 것이라고 상상할 수 있습니다. 뱀 몸이 어떻게 생겼는지 전혀 모릅니다.
그림을 그리세요.
그리드의 왼쪽 상단의 좌표는 (0, 0)이며, 가로좌표는 오른쪽으로 갈수록 증가하고, 세로좌표는 아래로 갈수록 증가합니다. 이 방향은 Canvas와 동일합니다.
그리드를 그릴 때마다 캔버스의 왼쪽 위 모서리의 좌표는 (0, 0)이라는 것을 항상 알고 있습니다. 그리드의 측면 길이는 WIDTH입니다. 간격의 GAP_WIDTH는 (i, j)번째 그리드의 왼쪽 상단 모서리 좌표(i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) .
뱀 몸체가 세 개의 파란색 그리드로 구성되어 있다고 가정합니다. 세 개의 그리드만 그릴 수는 없지만 두 개의 보라색 간격도 그릴 수 있습니다. 그렇지 않으면 앞서 언급한 것처럼 뱀 몸체가 어떻게 생겼는지 알 수 없습니다. 아래 그림처럼 빈틈없이 플레이할 수는 있지만 경험은 확실히 달라집니다.
도면 간격 없이 인접한 그리드 사이에 간격 그리기
이제 뱀을 그려보겠습니다. 뱀 몸체는 실제로 그리드의 집합입니다. 각 그리드는 두 개의 위치 정보를 포함하는 배열로 표현됩니다. 전체 뱀은 2차원 배열로 표현될 수 있습니다.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas { background-color: #000 } </style></ head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10 // 그리드의 측면 길이 const GAP_WIDTH = 2; // 간격의 측면 길이 const ROW = 10; // 총 그리드 행 수 및 각 행에 그리드 수 let canvas = document.getElementById('canvas'); = GRID_WIDTH * ROW + GAP_WIDTH * ( ROW + 1); canvas.width = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1); = canvas.getContext('2d'); let 스낵 = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ] // 하나를 초기화합니다.