Создание игры «Змейка» на чистом JavaScript и HTML5
Змейка — классическая игра, которую мы знаем еще с давних времен. Мы представляем вам статью, в ходе которой мы создадим полноценную игру «Змейка» на чистом JavaScript и HTML5.
Для создания веб игр на языке JavaScript используется технология Canvas , которая позволяет выполнять JavaScript код в HTML5 документе. Вы можете более детально ознакомиться с этой технологией посмотрев видео ниже:
HTML страница может содержать классическую разметку, в которую необходимо вписать canvas для отображения игры внутри него. Пример кода:
Игра на JavaScript Внутри этого файла мы подключаем скрипт «game.js«, который будет описывать весь функционал нашей игры.
JavaScript файл
Внутри JavaScript файла добавьте выборку канваса, а также укажите контекст игры.
var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d");Добавление изображений и аудио
Далее необходимо загрузить все основные изображения, которые будут использоваться в игре. Для этого используйте класс Image . Ниже вы можете скачать все необходимые картинки к игре.
Код добавления изображений и аудио в игру:
const ground = new Image(); // Создание объекта ground.src = "img/ground.png"; // Указываем нужное изображение const foodImg = new Image(); // Создание объекта foodImg.src = "img/food.png"; // Указываем нужное изображениеРисование объектов
Чтобы нарисовать объекты, а также добавить функционал к игре необходимо прописать функцию, которая будет постоянно вызываться. Такую функцию вы можете назвать как вам будет угодно. Чтобы функция работала постоянно, вы можете запустите её выполнение через setInterval() .
function draw() < // Какой-либо код >let game = setInterval(draw, 100); // Вызов функции из внеВесь код игры стоит помещать в этот метод, ведь в нем он будет постоянно обрабатываться и игра будет выглядеть живой и анимированной.
Чтобы отследить нажатие игрока на какую-либо клавишу, необходимо использовать отслеживание событий — addEventListener . К примеру, чтобы отследить нажатие на любую клавишу на клавиатуре надо прописать следующий код:
// При нажатии на какую-либо кнопку document.addEventListener("keydown", someMethod); // Вызывается метод someMethod function someMethod() < // Изменяем что-то в коде >Видео урок
Это были лишь небольшие азы перед созданием самой игры. Предлагаем вам ознакомиться с большим видео уроком, в ходе которого вы создадите 2D игру «Змейка» на чистом JavaScript’е.
Полезные ссылки из видео:
- Текстовый редактор Atom.io ;
- Подбор иконок IconFinder ;
- Хостинг компания Reg.ru .
Весь JS код игры
Ниже вы можете посмотреть на полностью весь код JavaScript файла, который был создан в ходе видео урока выше:
const canvas = document.getElementById("game"); const ctx = canvas.getContext("2d"); const ground = new Image(); ground.src = "img/ground.png"; const foodImg = new Image(); foodImg.src = "img/food.png"; let box = 32; let score = 0; let food = < x: Math.floor((Math.random() * 17 + 1)) * box, y: Math.floor((Math.random() * 15 + 3)) * box, >; let snake = []; snake[0] = < x: 9 * box, y: 10 * box >; document.addEventListener("keydown", direction); let dir; function direction(event) < if(event.keyCode == 37 && dir != "right") dir = "left"; else if(event.keyCode == 38 && dir != "down") dir = "up"; else if(event.keyCode == 39 && dir != "left") dir = "right"; else if(event.keyCode == 40 && dir != "up") dir = "down"; >function eatTail(head, arr) < for(let i = 0; i < arr.length; i++) < if(head.x == arr[i].x && head.y == arr[i].y) clearInterval(game); >> function drawGame() < ctx.drawImage(ground, 0, 0); ctx.drawImage(foodImg, food.x, food.y); for(let i = 0; i < snake.length; i++) < ctx.fillStyle = i == 0 ? "green" : "red"; ctx.fillRect(snake[i].x, snake[i].y, box, box); >ctx.fillStyle = "white"; ctx.font = "50px Arial"; ctx.fillText(score, box * 2.5, box * 1.7); let snakeX = snake[0].x; let snakeY = snake[0].y; if(snakeX == food.x && snakeY == food.y) < score++; food = < x: Math.floor((Math.random() * 17 + 1)) * box, y: Math.floor((Math.random() * 15 + 3)) * box, >; > else snake.pop(); if(snakeX < box || snakeX >box * 17 || snakeY < 3 * box || snakeY >box * 17) clearInterval(game); if(dir == "left") snakeX -= box; if(dir == "right") snakeX += box; if(dir == "up") snakeY -= box; if(dir == "down") snakeY += box; let newHead = < x: snakeX, y: snakeY >; eatTail(newHead, snake); snake.unshift(newHead); > let game = setInterval(drawGame, 100);Также вы можете скачать весь проект целиком по этой ссылке .
Больше интересных новостей
Давайте создавать веб-приложения, которые могут слушать!
JavaScript: Обзор фреймворков и выбор для новичков
Важные советы программистам для карьерного роста: ТОП-5
11 бюджетных инструментов для веб-дизайнера
Комментарии (4)
Саня 20 ноября 2023 в 09:47
А как сделать так, чтобы игра начиналась заново после проигрыша?
Михаил 27 марта 2023 в 11:53
а где файл со стилямимиша 05 мая 2023 в 18:18
зажми контрл и нажми на этот текст
Елена 03 августа 2022 в 13:28
Кирилл Михайлович 17 мая 2022 в 20:33
Ввод в разработку Web-игр
Современный web позволяет не только передавать различную информацию, но и создавать интерактивный контент. Например, потрясающие, высококачественные игры.
Диапазон игр, которые вы можете встретить в web поражает и не уступает «нативным» играм, реализованным с использованием языка программирования c++ и java.Причём это касается не только относительно небольших игр, но и объёмных игр жанра РПГ, 3d шутерах и многом другом. Это уже не аналоги простых карточных игр или многопользовательских социальных играх, реализованных с помощью Flash®, а гораздо более сложные вещи. Благодаря значительным улучшениям языка программирования JavaScript и появлению новых API браузера, вы можете создавать игры, не зависящие от операционной системы. Для их работы необходим только браузер. А иногда, например на устройствах с поддержкой HTML5, таких как Firefox OS, не нужен даже он.
Игровая платформа HTML5
Вы действительно можете подумать, что Web — лучшая платформа для вашей игры. Как мы любим говорить:»Web — это тоже платформа.» Давайте посмотрим на главные аспекты Web платформы:
| Функционал | Технология |
|---|---|
| Аудио | Web Audio API (en-US) |
| Графика | WebGL (OpenGL ES 2.0) |
| Ввод | Touch events (en-US) , Gamepad API (en-US) , датчики устройства, WebRTC (en-US) , Full Screen API (en-US) , Pointer Lock API (en-US) |
| Язык | JavaScript (или C/C++ используйте Emscripten для компиляции в JavaScript) |
| Сеть | WebRTC (en-US) и/или WebSockets |
| Данные | IndexedDB или «облако» |
| Веб | HTML, CSS, SVG (en-US) , Social API (и многое другое!) |
Экономическое обоснование
Как разработчик игр, независимо от того, являетесь ли вы частным лицом или крупной игровой студией, вы хотите знать, почему имеет смысл ориентироваться на Web со своим игровым проектом. Давайте посмотрим, как сеть может помочь вам.
- Охват паутины огромен, она повсюду. Игры, построенные на HTML5, работают на смартфонах, планшетах, ПК и смарт-телевизорах.
- Маркетинг и открытость улучшаются. Вы не ограничиваетесь продвижением своего приложения в чужом магазине приложений. Вместо этого вы можете рекламировать и продвигать свою игру по всему интернету, а также в других средствах массовой информации, используя преимущества присущей сети связности и доступности для новых клиентов.
- У вас есть контроль, где это имеет значение: Платежи. Вы не должны отдавать 30% своих доходов кому-то другому только потому, что ваша игра в их экосистеме. Вместо этого, взимать плату, что вы хотите, и использовать любую услугу обработки платежей вам нравится.
- Опять же, с большим контролем, вы можете обновить игру, когда захотите. Не жди, затаив дыхание, одобрения, пока кто-то прячется внутри другого.
- Контролируйте свою аналитику! Вместо того чтобы полагаться на кого-то другого в принятии решений о том, какая аналитика вам нужна, вы можете собрать свою собственную-или выбрать третью сторону, которая вам больше всего нравится, — чтобы собрать информацию о ваших продажах и досягаемости вашей игры.
- Вы можете управлять своими отношениями с клиентами более тесно, по-своему. Больше не придётся работать с обратной связью магазина приложений. Взаимодействуйте со своими клиентами так, как вы хотите, без посредника.
- Ваши игроки могут играть в вашу игру в любом месте, в любое время. Поскольку Web распространён повсеместно, ваши клиенты могут проверить статус своей игры на своих телефонах, планшетах, домашних ноутбуках, рабочих столах или на чем-либо ещё.
Web-технологии для разработчиков игр
Давайте покопаемся в API веба, которое приносит на стол и обслуживает разработчиков игр. Вот подробный список, чтобы дать вам представление о том, что Web может сделать для вас:
Этот простой API позволяет вашей игре использовать весь экран, тем самым погружая игрока в действие.
Если вы хотите, чтобы ваши пользователи могли использовать геймпады и прочие игровые контроллеры для работы с игрой, вам потребуется этот API
Эти технологии помогут вам создать и разместить UI вашей игры, а HTML-элемент это один из способов создать 2D-графику
Мощный API для хранения пользовательских данных на собственном компьютере или устройстве. Отличный способ локально сохранить состояние игры и другую информацию, без необходимости подгружать её каждый раз при необходимости. Также полезно для того, чтобы сделать ваш проект играбельным, даже если пользователь не подключён к Интернету (например, когда он оказался в самолёте на несколько часов).
JavaScript, язык программирования, используемый в Интернете, быстро развивается в современных браузерах и становится ещё быстрее. Используйте его возможности для написания кода своей игры или используйте такие технологии, как Emscripten или Asm.js, чтобы с лёгкостью переносить существующие игры.
API Pointer Lock позволяет блокировать мышь или другое указывающее устройство в интерфейсе вашей игры. Вместо абсолютного позиционирования курсора вы получаете координаты дельты, которые дают вам более точные измерения того, что делает пользователь, и предотвращают случайную отправку ввода где-то ещё, тем самым упуская важные пользовательские действия.
SVG (en-US) (масштабируемая векторная графика)
Позволяет создавать векторную графику, которая плавно масштабируется независимо от размера или разрешения дисплея пользователя.
Типизированные массивы JavaScript дают вам доступ к необработанным двоичным данным из кода, что позволяет вам манипулировать текстурами GL, игровыми данными или чем-то ещё, даже если код не в формате JavaScript.
Этот API необходим для управления воспроизведением, синтезом звука и манипулированием аудио из кода JavaScript. Позволяет создавать потрясающие звуковые эффекты, а также воспроизводить и манипулировать музыкой в режиме реального времени.
Позволяет создавать высокопроизводительную аппаратно-ускоренную 3D (и 2D) графику из веб-контента. Это веб-реализация OpenGL ES 2.0.
API WebRTC (Real-Time Communications) даёт вам возможность управлять аудио- и видеоданными, включая телеконференции и передачу данных из других приложений между двумя пользователями. Хотите, чтобы ваши игроки могли общаться друг с другом, взрывая монстров? Это API для вас!
The WebSocket API позволяет подключить ваше приложение или сайт к серверу для передачи данных в реальном времени. Идеально подходит для многопользовательских игр, чатов и т. д.
Web Workers даёт вам возможность создавать фоновые потоки, выполняющие собственный код JavaScript, используя преимущества современных многоядерных процессоров.
Комбинация XMLHttpRequest и File API позволяет отправлять и получать любые нужные для вас данные (не позволяйте «XML» выкинуть вас!) с веб-сервера. Это отличный способ сделать что угодно: от загрузки новых игровых уровней и иллюстраций, до передачи информации о статусе игры в режиме non-real-time и обратно.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
2D игра на чистом JavaScript
В этом пошаговом руководстве мы создадим простую игру MDN Breakout, написанную на чистом JavaScript и отрендеренную на HTML5 .
К каждому шагу прилагаются редактируемые live-примеры, с которыми можно поиграть, чтобы увидеть, как должна выглядеть игра на промежуточных этапах. Вы изучите основы использования элемента для реализации таких фундаментальных игровых механик, как рендеринг и перемещение изображений, обнаружение столкновений, механизмы управления, а также состояния выигрыша и проигрыша.
Для извлечения максимальной пользы из этой серии статей необходимо иметь средние (или хотя бы базовые) знания языка JavaScript. После прохождения этого урока вы сможете создавать собственные простые браузерные игры.
Детали к урокам
Все уроки и версии игры MDN Breakout доступны в GitHub:
Лучший способ получить надёжные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, нелишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript.
Примечание: Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей 2D игра Breakout с использованием Phaser (en-US) .
Примечание: Эту серию статей можно использовать как материал для практических занятий по разработке игр. Также можно воспользоваться набором инструментов Gamedev Canvas Content Kit, основанном на этом уроке, если нужно сделать доклад о разработке игр в целом.
HTML5 Canvas — простая игра
До сих пор мы изучали, каким образом применить к холсту некоторые ключевые методы программирования, чтобы демонстрировать интерактивные рисунки и анимацию. Эти методы позволяют использовать холст не только для простого рисования, но и создавать на его основе завершенные, автономные приложения, такие как игры или мини-приложения в стиле Flash.
На рисунке ниже показан более амбициозный пример интерактивности и анимации, для реализации которого применяются все приобретенные нами на данный момент знания. Это простая игра, в которой пользователь должен провести значок через лабиринт. Значок начинает двигаться в определенном направлении после нажатия клавиши со стрелкой и продолжает перемещаться, пока не столкнется со «стеной» лабиринта. Для продолжения движения нужно нажать клавишу со стрелкой в направлении, в котором нет препятствий:
С точки зрения посетителя веб-страницы это забавная игра, а с точки зрения разработчика это эффективное использование возможностей холста HTML5 и искусного программирования на JavaScript. Посмотреть этот пример вживую вы можете на странице — «HTML5 Canvas — лабиринт». Оттуда же можно скачать необходимые файлы изображений для этого примера — face.png, maze.png и easy_maze.png.
Использование холста для создания сложного приложения требует от разработчика перелопатить значительный объем кода. В следующих разделах мы изучим основные моменты создания этого приложения, но будьте готовы хорошенько попотеть с программированием JavaScript.
Подготовительные работы
Прежде чем анимировать что-либо, нам нужно создать для этого соответствующие условия, подготовив должным образом холст. Хотя весь лабиринт можно было бы нарисовать на холсте линиями и прямоугольниками, для этого потребовался бы внушительный объем кода, написание которого вручную будет чрезвычайно долгим и утомительным процессом. Для этого нужно составить логическую модель всего лабиринта, а потом вырисовывать каждую его часть отдельной операцией.
Для этого подхода почти наверняка потребуется инструмент для автоматического создания кода рисования. Например, лабиринт можно будет нарисовать в Adobe Illustrator, а потом преобразовать его в код для холста с помощью какого-либо модуля расширения.
Другой вариант — взять готовую графику лабиринта и прорисовать ее на холсте. Этот подход будет особенно легким, т.к. Интернет изобилует бесплатными страницами для создания лабиринтов. Найти такие страницы очень легко — просто выполните поиск в Google по словам «maze generator», и вы получите буквально тысячи ссылок. Выбрав понравившийся вам генератор, укажите несколько параметров (например, размер, форму, цвета, плотность и сложность лабиринта), нажмите кнопку Создать, и в считанные секунды вы получите рисунок лабиринта, который можно сохранить на своем компьютере.
Исходная разметка примера выглядит следующим образом:
HTML5 Canvas - Лабиринт canvas < border: 6px double black; background: white; >img < display: none; >button В нашем примере используется готовый рисунок лабиринта. При загрузке страницы код отображает этот рисунок (хранящийся в файле maze.png) на холсте. Далее приводится код, который запускает этот процесс при загрузке страницы:
// Определяем глобальные переменные для холста и контекста var canvas; var context; window.onload = function() < // Подготавливаем холст canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); // Рисуем фон лабиринта drawMaze("maze.png", 268, 5); // При нажатии клавиши вызываем функцию processKey() window.onkeydown = processKey; >;В действительности этот код не рисует фон лабиринта, а вызывает для этого другую функцию — drawMaze(). Использование в этом примере отдельной функции рисования лабиринта означает, что он не ограничен одним видом лабиринта, а позволяет загрузить любую картинку лабиринта. Для этого нужно просто вызвать функцию drawMaze() и передать ей название файла изображения лабиринта и координаты начала его прохождения. В следующем листинге приведен код этой функции:
// Отслеживаем текущую позицию значка var x = 0; var y = 0; // Таймер, включающий и отключающий новый лабиринт в любое время var timer; function drawMaze(mazeFile, startingX, startingY) < // Остановить таймер (если запущен) clearTimeout(timer); // Остановить перемещение значка dx = 0; dy = 0; // Загружаем изображение лабиринта var imgMaze = new Image(); imgMaze.onload = function() < // Изменяем размер холста в соответствии // с размером изображения лабиринта canvas.width = imgMaze.width; canvas.height = imgMaze.height; // Рисуем лабиринт context.drawImage(imgMaze, 0,0); // Рисуем значок x = startingX; y = startingY; var imgFace = document.getElementById("face"); context.drawImage(imgFace, x, y); context.stroke(); // Рисуем следующий кадр через 10 миллисекунд timer = setTimeout("drawFrame()", 10); >; imgMaze.src = mazeFile; >В коде используется двухэтапный метод рисования изображения на холсте. Сначала определяется функция для обработки события изображения onload и последующего отображения загруженного изображения на холсте. Потом устанавливается атрибут src объекта изображения, что загружает изображение и активирует код. Этот двухэтапный процесс немного посложнее, чем просто получение изображения из скрытого элемента на странице, но он необходим для создания функции, позволяющей загружать любое изображение лабиринта.
После загрузки изображения лабиринта код подгоняет размер холста к размеру изображения, устанавливает значок в исходную позицию, а потом прорисовывает ее на холсте. Наконец, вызывается метод setTimeout(), чтобы начать показ кадров анимации.
Анимация значка
Процесс прохождения лабиринта начинается, когда пользователь нажмет одну из клавиш со стрелками. Например, при нажатии клавиши значок начинает двигаться вниз, пока не натолкнется на препятствие или не будет нажата другая клавиша.
Для этого в коде используются две глобальные переменные для отслеживания скорости значка, иными словами, количества пикселов, на которое он смещается по оси x или y в каждом кадре. Эти переменные называются dx и dy.
Когда пользователь нажимает какую-либо клавишу, холст вызывает функцию processKey(). Эта функция проверяет, не была ли нажата одна из клавиш со стрелкой, и если была, изменяет направление движения значка. Чтобы определить, какая именно клавиша со стрелкой была нажата, проверяется код нажатой клавиши. Например, код 38 соответствует клавише . Функция processKey() игнорирует все клавиши, за исключением клавиш со стрелками:
// Скорость перемещения значка var dx = 0; var dy = 0; function processKey(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; >>Функция processKey() не меняет текущую позицию значка и не пытается обновить ее отображение на холсте. Эта задача осуществляется функцией drawFrame(), которая вызывается каждые 10 мс:
function drawFrame() < // Обновляем кадр только если значок движется if (dx != 0 || dy != 0) < // Закрашиваем перемещение значка желтым цветом context.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 (y > (canvas.height - 17)) < alert("Ты победил!"); return; >> // Рисуем следующий кадр через 10 миллисекунд timer = setTimeout("drawFrame()", 10); >Код функции drawFrame() довольно простой, но всеохватывающий, решающий несколько задач. Прежде всего, он проверяет, движется ли значок в каком-либо направлении. Если не движется, то функция, по сути, ничего не делает.
Если же значок движется, то функция drawFrame() закрашивает желтым цветом текущую позицию значка, создавая, таким образом, след после продвижения. Потом значок перемещается в новую позицию. Затем код вызывает функцию checkForCollision(), чтобы проверить новую позицию. (Код этой функции проверки попадания рассматривается в следующем разделе.) Если новая позиция не верна, это означает, что значок столкнулся с преградой, и его нужно возвратить назад в старую позицию и прекратить движение.
Потом проверяется, не вышел ли значок за пределы лабиринта, т.е. прошел его. Если вышел, то выводится соответствующее сообщение. В противном случае код устанавливает время ожидания для вызова метода drawFrame() опять 10 мс.
На данном этапе мы рассмотрели весь код для игры в лабиринт, за исключением логики функции checkForCollision(), которая выполняет проверку столкновения значка с преградой.
Проверка попадания с использованием цвета пикселов
В предыдущей статье вы увидели, как можно выполнять проверку попадания посредством математических вычислений. Но это можно сделать и другим способом. Вместо того чтобы просматривать коллекцию нарисованных объектов, можно исследовать цвет блока пикселов. В некоторых отношениях этот подход более простой, т.к. для него не требуется обрабатывать все объекты и код для отслеживания позиции объекта. Но он будет работать только в случае четко определенных предположений об исследуемых цветах.
Проверка попадания посредством тестирования пикселов является идеальным способом для применения в игре «Лабиринт». С помощью этого метода можно определить, когда значок столкнулся со стеной лабиринта черного цвета. Если бы не этот метод, то нужно было бы сохранить всю информацию о лабиринте в памяти, а потом определять, не перекрывают ли координаты значка линии стен лабиринта.
Метод проверки на столкновения посредством анализа цвета пикселов возможен благодаря предоставляемой холстом возможности манипулировать отдельными пикселами, из которых состоит любое изображение. Контекст рисования имеет три метода для манипулирования пикселами: getImageData(), putImageData() и createImageData().
Метод getImageData() применяется для захвата пикселов прямоугольной области холста. Захваченные пикселы можно изменить и вставить обратно в холст с помощью метода putImageData(). А метод createImageData() позволяет создать в памяти новый, пустой блок пикселов, которые можно изменить, а потом вставить в холст посредством метода putImageData().
Если вы ожидаете, что каждый пиксел представляется одним числом, то ошибаетесь. Каждый пиксел представляется четырьмя числами — тремя для красной, зеленой и синей цветовых составляющих и одним для прозрачности. Поэтому, чтобы исследовать каждый пиксел, нам требуется цикл, который проходит через массив с шагом в четыре элемента. Ниже показана структура метода checkForCollision(), выполняющего проверку столкновения с преградой:
function checkForCollision() < // Перебираем все пикселы и инвертируем их цвет var imgData = context.getImageData(x-1, y-1, 15+2, 15+2); var pixels = imgData.data; // Получаем данные для одного пиксела for (var i = 0; n = pixels.length, i < n; i += 4) < var red = pixels[i]; var green = pixels[i+1]; var blue = pixels[i+2]; var alpha = pixels[i+3]; // Смотрим на наличие черного цвета стены, что указывает на столкновение if (red == 0 && green == 0 && blue == 0) < return true; >// Смотрим на наличие серого цвета краев, что указывает на столкновение if (red == 169 && green == 169 && blue == 169) < return true; >> // Столкновения не было return false; >Итак, обсуждение программы «Лабиринт» завершено.
Примеры игр на HTML5 Canvas
Диапазон творческих возможностей холста практически неограничен. Интернет содержит огромное множество еще более амбициозных примеров работы с холстом, которые демонстрируют высшее мастерство кодирования на HTML5. Далее приводится список некоторых веб-сайтов, демонстрирующих потрясающие примеры:
Этот сайт содержит столько увлекательных примеров разработок на основе холста, что вы не сможете оторваться от экрана. Можно порекомендовать начать знакомство с этим сайтом с игры Mutant Zombie Monsters или инструмента для построения графиков биржевых котировок TickerPlot.
Это впечатляющее приложение на основе холста графически представляет статьи английской Википедии, где связанные темы соединяются тонкими линиями, похожими на паутину. При выборе новой темы соответствующая часть карты знаний помещается в центр страницы посредством плавной анимации.
В этой игре вы ходите с автоматом наперевес по простому трехмерному лабиринту, наподобие древней 3D-игры Wolfenstein, которая открыла повальное увлечение стрелялками в далеком 1992 г.