Логическая игра с использованием элемента HTML5 canvas
Один из новых интересных элементов в HTML5 - <canvas>
. Он позволяет разработчику рисовать все, что угодно с помощью JavaScript. В данном уроке мы создадим логическую игру на его основе.
Игра называется "Выключатель" и навеяна оригинальной версией для iPhone. Цель игры - выключить все лампочки, нажимая на них. При этом соседние лампочки переключают свое состояние. Довольно занимательная логическая головоломка.
HTML/CSS
Разметка для нашей игры будет весьма незатейлива. Элемент <canvas>
в контейнере и простые стили.
<div id="lightcontainer"> <canvas id="lightpanel" width="500" height="500"></canvas> </div>
#lightcontainer { margin:20px auto; width:500px; } #lightpanel { background-color:#002B33; -moz-box-shadow:0 0 5px #999; -moz-border-radius:10px; -webkit-box-shadow:0 0 5px #999; -webkit-border-radius:10px; box-shadow:0 0 5px #999; border-radius:10px; }
Идея
Ниже представлено несколько рисунков, которые описывают идею игры.
Сначала нам нужно создать игровое поле.
Затем реализуется логика переключений. Красными стрелками обозначены места, в которых посетитель нажимает клавишу мыши. При этом соседние ячейки переключают свое состояние - если они были включены, то выключаются и наоборот.
В завершении создаем стартовую позицию.
JavаScript
Двумерный массив отлично подходит для отображения игрового поля. С ним легко работать, и он отлично представляет игровую ситуацию.
// Двумерный массив, который представляет игровое поле // "x" означает "включено" // "o" означает "выключено" var lightField = [ [ "x", "o", "o", "x", "x" ], [ "o", "o", "x", "o", "x" ], [ "o", "x", "o", "x", "o" ], [ "x", "o", "x", "o", "o" ], [ "x", "x", "o", "o", "x" ] ];
Обработчик события мыши проверят, в какой ячейке произошло событие и выполняет обработку окружающих ячеек. Если посетитель уже достиг поставленной цели, то событие игнорируется.
// Привязываем обработчик события click $("#lightpanel").click(function(e) { if(!userCanClick) { return false; } // e дает нам абсолютные значения x и y, // поэтому нам надо провести вычисления относительно положения элемента canvas var pos = $("#lightpanel").position(); var ox = e.pageX - pos.left; var oy = e.pageY - pos.top; // Проверяем, какие поля надо перевернуть var yField = Math.floor(oy / 100); var xField = Math.floor(ox / 100); // Поле, на котором произошло событие click lightField[yField][xField] = lightField[yField][xField] == "x" ? "o" : "x"; // Поле выше if(yField-1 >= 0) { lightField[yField-1][xField] = lightField[yField-1][xField] == "x" ? "o" : "x"; } // Поле ниже if(yField+1 < 5) { lightField[yField+1][xField] = lightField[yField+1][xField] == "x" ? "o" : "x"; } // Поле справа if(xField-1 >= 0) { lightField[yField][xField-1] = lightField[yField][xField-1] == "x" ? "o" : "x"; } // Поле слева if(xField+1 < 5) { lightField[yField][xField+1] = lightField[yField][xField+1] == "x" ? "o" : "x"; } repaintPanel(); });
Очень важная функция - вывод панели.
/* * Выводим панель */ function repaintPanel() { // Получаем элемент canvas var canvas = document.getElementById("lightpanel"); // Проверяем поддержку браузером элемента <canvas> if (!canvas.getContext){ alert("Для данной игры ваш браузер должен поддерживать элемент <canvas>."); return; } else { clear(); // Получаем контекст для рисования var ctx = canvas.getContext("2d"); // Создаем поля var allLightsAreOff = true; for(var i = 0; i < lightField.length; i++) { // Строки for (var j = 0; j < lightField[i].length; j++) { // Столбцы // Устанавливаем кисти ctx.lineWidth = 3; ctx.strokeStyle = "#83BD08"; // Начинаем вывод ctx.beginPath(); // arc( x, y, радиус, стартовый_угол, конечный_угол, против_часовой_стрелки) ctx.arc(j * 100 + 50, i * 100 + 50, 40, 0, Math.PI*2, true); // Выводим рамку ctx.stroke(); // Проверяем, нужно ли заполнять рамку if(lightField[i][j] == "x") { ctx.fillStyle = "#FFBD38"; ctx.beginPath(); ctx.arc(j * 100 + 50, i * 100 + 50, 38, 0, Math.PI*2, true); ctx.fill(); // Так как нам нужно заполниить данное поле, то значит не все лампочки выключены allLightsAreOff = false; } } } // Проверка выключения всех лампочек if(allLightsAreOff) { // Пользователь больше не может нажимать на элементы userCanClick = false; // Выводим сообщение alert("Все лампочки выключены! Поздравляю с победой!"); } } }
Так как элемент <canvas>
не обновляется после перерисовки, нам придется вручную очищать его специальным методом clear:
/* * Очищаем элемент canvas */ function clear() { var canvas = document.getElementById("lightpanel"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500); }
Готово!
Данный урок является демонстрацией возможностей использования элемента <canvas>
в веб проектах. Для создания полноценной игры требуется еще поработать над кодом: ввести дополнительные уровни, таймер, учет лучшего результата и так далее.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/SVI7_7XALgA/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
"Самый чепуховый и бесперспективный проект, но уже запущенный и работающий в Сети, принесет гораздо больше результатов и прибыли, чем самый совершенный проект, который из-за своего постоянного предстартового совершенствования никогда не будет запущен." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.