Создайте интерактивную веб-игру с серпантируемой карточкой

Введение

В этом проекте мы проведем вас через процесс создания простой веб-игры в виде "Серпантинной карточки". Эта игра позволяет пользователям удалить серый фон и увидеть изображение, которое может быть либо "Победитель" или "Попробуйте еще раз". Мы будем использовать HTML для структуры, CSS для стилизации и JavaScript для интерактивности.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

настраивать базовый веб-проект с использованием HTML, CSS и JavaScript;
манипулировать HTML5-канвасом для создания интерактивных эффектов;
использовать JavaScript для обработки взаимодействий пользователя, таких как нажатия и движения мыши;
работать с изображениями в веб-разработке, включая их динамическую загрузку и отображение;
реализовывать простую игровую логику, которая случайным образом определяет исход для пользователя.

🏆 Достижения

После завершения этого проекта вы сможете:

продемонстрировать твердый уровень знаний HTML5-канваса и его возможностей для веб-игры и интерактивных приложений;
показать навыки в использовании JavaScript для создания динамического контента и реакции на ввод пользователя;
интегрировать различные веб-технологии для создания полноценного и функционального веб-приложения;
спроектировать простой, но привлекательный интерфейс для веб-игры;
применить базовые концепции разработки игр, такие как случайные исходы и взаимодействие с пользователем.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/functions -.-> lab-445725{{"Создайте веб-игру с серпантируемой карточкой"}} javascript/array_methods -.-> lab-445725{{"Создайте веб-игру с серпантируемой карточкой"}} javascript/dom_select -.-> lab-445725{{"Создайте веб-игру с серпантируемой карточкой"}} javascript/dom_manip -.-> lab-445725{{"Создайте веб-игру с серпантируемой карточкой"}} javascript/event_handle -.-> lab-445725{{"Создайте веб-игру с серпантируемой карточкой"}} end

Создайте структуру HTML

В этом шаге мы настраиваем базовую структуру веб-страницы в index.html, включая объявление DOCTYPE, элемент html и разделы head и body. Мы определяем кодировку символов как UTF-8 для универсального распознавания символов и настраиваем viewport для адаптивного дизайна, обеспечивая, чтобы наша игра "Серпантинная карточка" выглядела хорошо на устройствах различных размеров.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Серпантинная карточка</title>
  </head>
  <body>
    <div id="main">
      <div class="msg">
        Сегодня везет? Попробуйте!
        <a href="#" onclick="window.location.reload()">Попробовать снова</a>
      </div>
      <div>
        <canvas></canvas>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Внутри body мы создаем элемент div с id "main", который служит контейнером для нашей игры. В этом контейнере мы включаем div с классом "msg", чтобы отобразить веселое сообщение, приглашая пользователя сыграть в удачу. В этом сообщении также есть ссылка, которая при нажатии перезагружает страницу, позволяя пользователям сыграть в "Серпантинную карточку" снова, не нужно вручную обновлять браузер.

Наконец, мы включаем элемент canvas, где будет реализован эффект "Серпантинной карточки", и мы подключаем внешний JavaScript-файл с именем "main.js", где будет располагаться логика нашей игры.

Эта структура HTML обеспечивает необходимую основу для нашей игры "Серпантинная карточка", определяя области, где будут отображаться текст и поверхность для "серпантирования".

✨ Проверить решение и практиковаться

Стилизуйте канвас

В JavaScript-файле main.js мы начинаем с выбора элемента канвас и применения некоторых начальных стилей.

const canvas = document.querySelector("canvas");
canvas.style.backgroundColor = "transparent";
canvas.style.position = "absolute";

Мы устанавливаем backgroundColor в "transparent", чтобы убедиться, что фон канваса не скрывает никакой части веб-страницы, на которой он размещен. Задав position равным "absolute", мы получаем больше гибкости при размещении канваса поверх других элементов, если это необходимо.

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

✨ Проверить решение и практиковаться

Загрузите изображение для "серпантирования"

Здесь мы загружаем случайное изображение, которое будет использоваться в качестве фона для игры "Серпантинная карточка".

// Продолжайте в main.js

// Массив возможных изображений для отображения
const images = ["winner.png", "try_again.png"];
const selectedImage = images[Math.floor(Math.random() * images.length)];

// Создайте новый объект Image и задайте источник
const img = new Image();
img.src = selectedImage;

// Когда изображение загрузится, измените размер и фон канваса
img.onload = () => {
  const ctx = canvas.getContext("2d");
  const w = img.width;
  const h = img.height;
  canvas.width = w;
  canvas.height = h;
  canvas.style.backgroundImage = `url(${img.src})`;

Мы создаем массив под названием images, содержащий имена файлов возможных изображений. Затем мы случайным образом выбираем одно изображение из этого массива с использованием Math.floor(Math.random() * images.length).

Мы создаем новый объект Image и задаем его источник (src) выбранному изображению. Слушатель события onload гарантирует, что мы продолжаем выполнять остальную часть скрипта только после полной загрузки изображения, предотвращая любые проблемы, которые могут возникнуть при попытке манипулировать изображением, которое еще не было полностью загружено.

Этот шаг важен для динамики игры "Серпантинная карточка", так как он добавляет изменчивость и неожиданность каждый раз, когда приложение загружается или обновляется. Загружая случайное изображение, мы имитируем неопределенный исход настоящего "серпантинного билета", улучшая опыт пользователя.

✨ Проверить решение и практиковаться

Подготовьте слой для "серпантирования"

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

// Продолжайте в main.js

// Закройте канвас серым прямоугольником, чтобы создать слой для "серпантирования"
ctx.fillStyle = "серый";
ctx.fillRect(0, 0, w, h);

// Подготовьте канвас для эффекта "серпантирования"
ctx.globalCompositeOperation = "destination-out";

В этом шаге мы устанавливаем стиль заливки в серый и рисуем прямоугольник, покрывающий весь канвас, создавая таким образом слой для удаления на выбранном изображении. globalCompositeOperation, установленный на "destination-out", гарантирует, что любые новые нарисованные на канвасе фигуры будут делать нижележащие слои прозрачными, позволяя открыть изображение ниже в тех местах, где пользователь проведёт "серпание".

✨ Проверить решение и практиковаться

Создайте функцию для "серпантирования"

Для реализации эффекта "серпантирования" мы определяем функцию draw, которая будет вызываться каждый раз, когда пользователь взаимодействует с канвасом. Эта функция проверяет, находится ли пользователь в данный момент в процессе рисования (флаг isDrawing), а затем вычисляет позицию курсора или касания относительно канваса. Затем она рисует круг в этой позиции с использованием операции композиции, которая делает серый слой прозрачным, открывая изображение ниже.

// Продолжайте в main.js

let isDrawing = false;

// Определите функцию для имитации "серпантирования"
const draw = (e) => {
  if (!isDrawing) return;
  e.preventDefault();
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  const rect = canvas.getBoundingClientRect();
  const x = clientX - rect.left;
  const y = clientY - rect.top;

  // Нарисуйте круг в позиции курсора или касания
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill();
};

Эта функция сначала проверяет, что флаг isDrawing равен true, что означает, что пользователь начал действие "серпантирования". Затем она вычисляет точную позицию, где происходит "серпание", и рисует круг в этой позиции, фактически удаляя серый слой и открывая части нижележащего изображения.

✨ Проверить решение и практиковаться

Добавьте слушатели событий для действий "серпантирования"

Наконец, нам нужно определить, когда пользователь совершает действия на канвасе, чтобы запустить эффект "серпантирования".

// Продолжайте в main.js

  // Слушатели событий для обработки взаимодействия мыши и касания
  canvas.addEventListener("mousedown", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("touchstart", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", draw);
  canvas.addEventListener("mouseup", () => {
    isDrawing = false;
  });
  canvas.addEventListener("touchend", () => {
    isDrawing = false;
  });
}

Мы добавляем слушатели событий для mousedown, mousemove, mouseup, touchstart, touchmove и touchend. Эти слушатели устанавливают флаг isDrawing и вызывают функцию draw соответственно, чтобы создать интерактивный эффект "серпантирования".

Когда пользователь нажимает кнопку мыши или касается экрана (mousedown или touchstart), мы устанавливаем isDrawing в true и начинаем отслеживать их движение, чтобы создать эффект "серпантирования". Когда они отпускают кнопку или перестают касаться экрана (mouseup или touchend), мы устанавливаем isDrawing в false, останавливая действие "серпантирования". События mousemove и touchmove продолжают вызывать функцию draw, пока isDrawing равно true, позволяя пользователю удалить серый слой и открыть изображение ниже, когда они перемещают мышью или пальцем по канвасу.

Для просмотра следующих эффектов нажмите кнопку Go Live в нижнем правом углу WebIDE и переключитесь на вкладку "Web 8080".

✨ Проверить решение и практиковаться

Обзор

В этом проекте мы создали простую игру "Серпантинная карточка", в которой пользователи могут удалить слой, чтобы открыть скрытое сообщение. Мы настроили HTML-структуру, инициализировали канвас на JavaScript, загрузили и отобразили изображения, а также реализовали эффект "серпантирования" с использованием API канваса. Этот проект может быть веселым дополнением к веб-страницам и может быть расширён по-разному, например, добавив больше изображений, улучшив дизайн или интегрировав его в более крупную игру.