Skip to content

Instantly share code, notes, and snippets.

@ilyar
Last active June 24, 2024 21:01
Show Gist options
  • Save ilyar/81cb3bcbd375f0515f1c245bf7d6c75f to your computer and use it in GitHub Desktop.
Save ilyar/81cb3bcbd375f0515f1c245bf7d6c75f to your computer and use it in GitHub Desktop.
Игра на чистом JavaScript — Создание Canvas и рисование на нём — шаг 1 из 10

Игра на чистом JavaScript

Создание Canvas и рисование на нём — шаг 1 из 10

Это 1й шаг из 10. Прежде чем мы сможем начать писать функциональные возможности игры, нам необходимо создать базовую структуру для рендеринга игры внутри. Это можно сделать с помощью HTML и элемента <canvas>.

HTML игры

Структура HTML документа довольно проста, так как игра будет полностью визуализироваться в <canvas> элементе. Используя Ваш любимый текстовый редактор, создайте новый HTML документ, сохраните его как index.html в любом удобном месте, и скопируйте в него этот код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>Game Pure JavaScript</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    canvas {
      background: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<canvas id="game" width="480" height="320"></canvas>
<script>
  // JavaScript код будем писать здесь
</script>
</body>
</html>

Мы определили charset, <title> и некий базовый CSS <style> в заголовке. Тело документа содержит элементы <canvas> и <script> — мы будем визуализировать игру внутри первого и писать JavaScript код, который управляет игрой, во втором. Элемент <canvas> имеет id равный game, который позволяет однозначно отыскать элемент. Так же этот элемент имеет ширину 480 пикселей и высоту 320 пикселей. Весь JavaScript код мы будем писать между открывающим тегом <script> и закрывающим тегом </script>.

Основы Canvas

Чтобы иметь возможность визуализировать игру в элементе, сначала мы должны сослаться на этот элемент в коде JavaScript. Добавьте следующий код после открывающего тега <script>.

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

Таким образом, мы храним ссылку на <canvas> элемент в переменной canvas. Далее мы создаём переменную ctx для хранения 2D визуализации контекста — метод, который используется для отрисовки в Canvas.

Давайте рассмотрим пример отрисовки красного квадрата на canvas. Добавьте этот код ниже предыдущего кода на JavaScript и загрузите index.html в браузере, чтобы посмотреть результат.

ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = '#FF0000';
ctx.fill();
ctx.closePath();

Все инструкции располагаются между методами beginPath() и closePath(). Мы определяем прямоугольник, используя rect(): первые два параметра определяют координаты верхнего левого угла прямоугольника на canvas, в то время, как два других параметра определяют ширину и высоту прямоугольника. В нашем случае прямоугольник нарисован на расстоянии 20 пикселей слева и 40 пикселей сверху, 50 пикселей в ширину и 50 пикселей в высоту, что делает его квадратом. Свойство fillStyle хранит цвет, который будет использован методом fill() для отрисовки нашего квадрата.

Мы не ограничены только прямоугольниками - ниже часть кода для отрисовки зелёного круга. Попробуйте добавить этот код вконец Вашего кода JavaScript, сохраните и обновите страницу в браузере:

ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI * 2, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.closePath();

Как видите, мы снова используем методы beginPath() и closePath(). Между ними наиболее важная часть кода - метод arc(). Он принимает шесть параметров:

  • x и y координаты центра круга
  • радиус
  • начальный и конечный угол отрисовки круга (в радианах) направление отрисовки: (false - по часовой стрелке, по умолчанию, или true - против часовой стрелки). Последний не обязательный параметр.

Свойство fillStyle выглядит не так, как прежде. Это потому что, как и в CSS, цвет может быть задан в шестнадцатеричном формате, названием цвета, функцией rgba(), или же любым другим методом для цвета.

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

ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
ctx.stroke();
ctx.closePath();

Код выше отрисовывает пустой прямоугольник с синей обводкой. Благодаря функции альфа-канала rgba(), голубой цвет полупрозрачный.

Ожидаемый результат

Ожидаемый результат — Создание Canvas и рисование на нём — шаг 1

🏆 Упражнение

⭐ Добавьте еще фигуры, измените существующие фигуры, используйте разные формы и цвета.

Делаем решение в replit.com/game-1#index.html и отправляем решение @ilyarsoftware, получаем следующий шаг.

@sashahecer
Copy link

Спасибо Илья

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment