Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Пиривет сайт с работой закладчиком Работа курьером Значение финансов в повседневной жизни известно каждому, но что делать, если зарплата на постоянной работе невелика или ее вообще нет? Если у Вас нет профессии или возникли иные сложности, то...
Модные тренды медицинской одежды - новая эра стиля и комфорта в 2024 году https://fkmed.r... C нами Вы убедитесь: качественная, комфортная и модная медицинская одежда существует! В каталоге на сайте представлена медицинская одежда для врачей и...
14 070 руб https://www.eco... 38 900 руб https://www.eco... и выберите из списка ниже: Купить в 1 клик https://www.eco... По типу двигателя снегоотбрасыватель может быть: Купить в 1 клик https://www.eco...
Все изделия хорошо сидят на фигуре и отличаются высокой степенью комфортности https://fkmed.r... Комбинированные ткани с применением хлопка и синтетики - это оптимальный вариант для пошива формы https://fkmed.r... Специальная пропитка...
53 990 руб https://www.eco... Экономия 4 160 руб https://www.eco... Купить в 1 клик https://www.eco... Главными элементами устройства являются двигатель, металлический или пластиковый корпус и лопасти для уборки снега https://www.eco... Тип...

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

скриншот игры

Для создания игры использовалась IDE Visual Studio Code.
1 шаг:
Создание папок и помещение в папку img всех картинок, которые будут использованы для игры:

папки

*(картинки можно взять из интернета. В моём случае, они нарисованы в графической программе).

2 шаг:
В файле index.html прописывается структура страницы и создаётся canvas размером 280:500 :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BEE</title>
    <script src="./js/game.js" defer></script>
  </head>
  <body>
    <canvas id="canvas" width="280" height="500"></canvas>
    <div class="text">
      <p> Любая кнопка - <strong>движение пчелки</strong></p>
      <p> Кнопка enter - <strong>перезагрузка</strong></p>
    </div>
  </body>
  <style>
    body{
      display: flex;
      justify-content: center;
    }
    .text {
      margin-left: 50px;
    }
  </style>
</html>

В блоке с классом "text" даётся подсказка, какие клавиши использовать. Далее идёт небольшой элемент стилизации страницы (тег "style"): выравнивание по центру, выравнивание текста и самого canvas.

3 шаг:
Далее переход в файл game.js. Первые строчки - получение элементов со страницы, определение canvas. Затем, введение констант - картинок, используемых в игре и ниже, их загрузка из файлов с помощью обращения к константе и метода ".src" :

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const text = document.querySelector(".text");
 
// Объявление констант - картинок
const bee = new Image();
const bg = new Image();
const fg = new Image();
const blocksUp = new Image();
const blocksBottom = new Image();
const gameOver = new Image();
 
// Загрузка кртинок
bee.src = "./img/bee.png";
bg.src = "./img/bg.png";
fg.src = "./img/fg.png";
blocksUp.src = "./img/blockU.png";
blocksBottom.src = "./img/blockB.png";
gameOver.src = "./img/over.jpg";

4 шаг:
Главный движущийся объект игры - пчёлка. В следующих строчках идёт определение её позиции и скорости падения. Далее идёт объявление ещё нескольких вспомогательных переменных, массива блоков и определение нулевого блока.

// Позиция пчелки
let xPos = 0;
let yPos = 100;
 
// Скорость падения
let grav = 1.2;
 
// Расстояние между препятствиями
let len = 100;
 
// Счётчик
let score = 0;
 
//Массив блоков
let blocks = [];
 
//Нулевой блок
blocks[0] = {
  x: canvas.width,
  y: 0,
};

5 шаг:
Создание стрелочной функции draw. Именно в ней происходит вся логика игры. Сначала - отрисовка заднего фона, затем, отрисовка блоков препятствий, проверка пройден ли блок, и создание новых блоков, когда пройденные уже выходят за край экрана.

let draw = () => {
  ctx.drawImage(bg, 0, 0);
 
  for (let i = 0; i < blocks.length; i++) {
    ctx.drawImage(blocksUp, blocks[i].x, blocks[i].y);
    ctx.drawImage(
      blocksBottom,
      blocks[i].x,
      blocks[i].y + blocksUp.height + len
    );
 
    blocks[i].x--;
 
    // Проверка того, что блок пройден
    if (blocks[i].x == 3) {
      score++;
    }
 
    if (blocks[i].x == 105) {
      blocks.push({
        x: canvas.width,
        y: Math.floor(Math.random() * blocksUp.height) - blocksUp.height,
      });
    }

6 шаг:
Далее идёт проверка момента столкновения пчёлки с препятствием. Если столкновение произошло, то выводится экран "Game over", очищается canvas, а также под текстом вставляется ещё один блок текста с количеством заработанных баллов.

    if (
      xPos + bee.width >= blocks[i].x &&
      xPos <= blocks[i].x + blocksUp.width &&
      (yPos <= blocks[i].y + blocksUp.height ||
        yPos + bee.height >= blocks[i].y + blocksUp.height + len)
    ) {
      ctx.clearRect(0, 0, 280, 500);
      text.innerHTML += "<h1> Score: " + score + "</h1>";
      ctx.drawImage(gameOver, 0, 0);
      return;
    }
  }
 
  ctx.drawImage(fg, 0, canvas.height - fg.height);
 
  ctx.drawImage(bee, xPos, yPos);
 
  yPos += grav;
 
  // подсчёт баллов на каждом шаге анимации
  ctx.fillStyle = "#000";
  ctx.font = "14px Vernada";
  ctx.fillText("Score: " + score, 10, canvas.height - 10);
 
  requestAnimationFrame(draw);
};

Так же внизу экрана игры всегда идёт подсчёт баллов, это реализовано в самом конце функции draw.

7 шаг:
Создание событий нажатий на кнопки и определение нажатия enter - клавиши с кодом 13.
Запрашивание вывода анимации и запуск функции draw происходит только после загрузки последней картинки, необходимой для начала игры. Это происходит для того, чтобы избежать ошибок из-за слабой скорости сети.

//При нажатии на любую кнопку
document.addEventListener(
  "keydown",
  (moveUp = (e) => {
    if (e.keyCode != 13) {
      yPos -= 30;
    }
  })
);
 
//При нажатии на enter
document.addEventListener(
  "keydown",
  (resert = (e) => {
    if (e.keyCode == 13) {
      location.reload();
    }
  })
);
 
blocksBottom.onload = draw;

В результате правильной сборки, происходит запуск игры "Fly bee".

Прикрепленный файлРазмер
game_fly_bee.zip63.92 кб