Раньше я смотрел несколько серий видеороликов Canvas на MOOC, и мне всегда хотелось попрактиковаться в написании чего-нибудь. Я считаю, что Snake относительно прост. Когда я учился в колледже, я также написал символьную версию языка C. Неожиданно я все еще сталкивался со многими проблемами.
Конечный эффект следующий (если картинка слишком большая, то она будет длиться слишком долго. Программа для записи gif имеет ограничение по времени...)
Начните с определения игровой зоны. На экране Snake всего два элемента: тело змеи и яблоко, и оба они могут состоять из квадратных сеток. Добавьте промежутки между квадратами. Зачем добавлять пробелы? Вы можете себе представить, что когда вы успешно заполните все сетки, и если не будет пробелов, это будет большой сплошной квадрат... Вы понятия не имеете, как выглядит тело змеи.
Нарисуйте картинку.
Координаты верхнего левого угла сетки (0, 0), абсцисса увеличивается вправо, а ордината увеличивается вниз. Это направление такое же, как Canvas.
Каждый раз, когда мы рисуем сетку, мы должны начинать с верхнего левого угла. Мы всегда знаем, что координаты верхнего левого угла Canvas равны (0, 0). Предполагается, что длина стороны сетки равна GRID_WIDTH, а ширина. разрыва равен GAP_WIDTH, мы можем получить (i, j)-е координаты верхнего левого угла сетки (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) .
Предположим, что тело змеи состоит из трех синих сеток. Мы не можем нарисовать только три сетки, но также и два фиолетовых промежутка. В противном случае, как упоминалось ранее, вы не будете знать, как выглядит тело змеи. Как показано на рисунке ниже, хотя в нее можно играть, не делая пробелов, впечатления определенно будут другими.
Рисуйте промежутки между соседними сетками, не рисуя промежутков.
Теперь мы можем попробовать нарисовать змею. Тело змеи на самом деле представляет собой набор сеток. Каждая сетка представлена массивом, содержащим информацию о двух позициях. Вся змея может быть представлена двумерным массивом.
<!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 Snack = [[2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // Инициализируем один