Пример быстрой реализации простой игры-лабиринта на холсте

(В последнее время я немного увлекся шаблонами проектирования, и мне немного скучно все время сталкиваться с чистым js -_-. Поэтому я написал кое-что интересное, чтобы оживить ситуацию)

Холст не нов, но поскольку он не часто используется в повседневной работе, практики мало. Сегодня я поделюсь, как реализовать простой холст-лабиринт. Этот пример взят из второго издания «Чит-кодов HTML5», и его код был немного изменен.

Поскольку при использовании холста для получения информации об изображении есть средний шаг, необходимо использовать серверную среду. Поэтому я сначала написал образец и закинул его на сервер, чтобы каждый мог сначала ощутить эффект (используйте чувство достижения в качестве движущей силы, ха-ха-ха).

Нажмите на меня, чтобы испытать

git-адрес

Реализовать эту небольшую игру несложно. Давайте подумаем об основных элементах игры-лабиринта.

Прежде всего, конечно, должна быть карта, а затем должен быть движущийся злодей. Чтобы нарисовать этих двоих, мы используем каваны;

Далее идет программа перемещения объектов. Эта программа в основном включает в себя два аспекта:

1. Пусть объект движется по заданным нами инструкциям;

2. Определите, касается ли объект стены или выхода.

Рисование карты лабиринта и движущихся фигур

Основные этапы создания карты:

1. Получить изображение карты
2. Используйте каваны для рисования изображений.

Генерацию карты лабиринта можно получить с помощью онлайн-генератора лабиринтов от Google.

То же самое и с рисованием злодея. Просто найдите изображение злодея. Однако здесь нужно обратить внимание на то, что вам нужно найти квадратную картинку, потому что позже нам понадобится сделать мобильное обнаружение столкновений и квадратов. их легче судить.

Далее мы напишем основные функции для рисования лабиринтов и злодеев.

 function drawMaze(mazeFile, startX, startY) { var imgMaze = new Image() imgMaze.onload = function () { // Регулировка размера холста Canvas.width = imgMaze.width Canvas.height = imgMaze.height // Рисуем улыбающееся лицо var imgFace = document.getElementById(face) context.drawImage(imgMaze, 0, 0) x = startX y = startY context.drawImage(imgFace, x, y) context.stroke() } imgMaze.src = mazeFile}

mazeFile — это адрес изображения лабиринта, startX и startY — координаты начальной точки. Здесь есть два способа введения изображений. Причина в том, что я не часто меняю изображения злодея, поэтому пишу их прямо на странице. Карта лабиринта должна быть переменной, поэтому я ввожу ее. js. Если вы хотите. Нет проблем, если вы импортируете его напрямую с помощью js. Остальные части относительно просты и не будут описываться снова.

Основными принципами движения являются:

Примите указанный пользовательский ввод (в данном случае ответьте на клавиши направления) и преобразуйте его в соответствующие инструкции движения. Затем периодически проверяйте инструкции по перемещению и рисуйте соответствующую целевую позицию. Приведите простой пример:

Например, при каждом нажатии клавиши направления вверх записывается, что он должен двигаться вверх, а затем каждые 100 миллисекунд он проверяет текущую команду движения, рисует целевое местоположение, куда он должен двигаться, и повторяет этот процесс. Код также относительно прост:

 // Перемещение функции functionprocessKey(e) { dx = 0 dy = 0 // Обнаружение клавиш направления вверх, вниз, влево и вправо if (e.keyCode === 38) { dy = -1 } if (e.keyCode = == 40) { dy = 1 } if (e.keyCode === 37) { dx = -1 } if (e.keyCode === 39) { dx = 1 }}// Рисуем рамку function drawFrame() { if (dx != 0 || dy != 0) { // context.clearRect(x,y,canvas.width,canvas.height) // Рисуем контекст движущейся траектории. BeginPath(); context.fillStyle = rgb(254,244,207) context.rect(x, y, 15, 15) context.fill() x += dx y += dy // Обнаружение столкновений if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } //Рисуем место, куда злодей должен двигаться var imgFace = document.getElementById( 'face') context.drawImage(imgFace, x, y) if (canvas.height - y < 17) { // isFirst = false alert('Поздравляем с завершением игры') return false } // Если здесь сбросить, движение станет неавтоматическим, то есть при каждом нажатии клавиши направления оно будет перемещаться только на один шаг вперед с момента текущего опыта. это нехорошо, мы не будем его сбрасывать сейчас // dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}

В приведенном выше коде функция перемещения относительно проста. Более важной функцией для рисования кадров является функция обнаружения столкновений, которая подробно объясняется ниже.

Чтобы определить, сталкивается ли объект со стеной, обычно необходимо сначала сохранить информацию о карте в памяти, а затем определить, сталкивается ли он с текущей стеной при перемещении объекта. Однако, поскольку фон нашей карты черный и. Белый лабиринт, мы можем использовать цвет для обнаружения столкновений. Конкретный метод:

Получите координаты текущего объекта и используйте холст, чтобы определить, является ли цвет этой позиции на текущей карте черным. Если это так, то говорят, что это стена, и движение не должно выполняться. Следующий код:

 function checkForCollision() { var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2) var пикселей = imageData.data for (var i = 0, len = Pixels.length; i < len ; i++) { var красный = пиксели[i], зеленый = пиксели[i + 1] синий = пиксели[i + 2] альфа = пикселей[i + 3] // Проверяем, ударяется ли он о черную стену if (красный === 0 && зеленый === 0 && синий === 0) { return true } } return false}

Здесь 15 — ширина злодея. Мы определяем диапазон в 1 пиксель по обе стороны от злодея (соответствует getImageData(x — 1, y — 1, 15 + 2, 15 + 2) в коде. Можете подумать. почему здесь + 2), если он черный, значит обнаружено столкновение.

В код я добавил еще некоторые функции, такие как подсказки ответов и т.д. Что касается изменения карты, то это относительно просто: сохраните адрес файла, координаты начальной точки, путь изображения ответа и т. д., соответствующие карте, в объекте, затем установите массив карт, переключите карту и выполните повторный рендеринг при нажатии. Есть еще некоторые области, которые стоит оптимизировать, например:

1. Опыт обнаружения столкновений в поворотах плохой;
2. Есть следы при запуске в текущей ситуации Как убрать следы в режиме ответа?

Заинтересованные студенты могут попробовать реализовать это самостоятельно.

Этот пример относительно простой и не предъявляет высоких требований к js. С ним неплохо поиграться.

И потом каждый раз один и тот же финал. Если есть какие-либо ошибки в содержании, укажите на это; если это полезно для вас, пожалуйста, поставьте лайк и сохраните его. Перед перепечаткой спросите разрешение и укажите источник. По любым вопросам обращайтесь через личное сообщение. Домашняя страница Есть адрес электронной почты~ ускользнул.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.