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

Вход на сайт

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

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

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

Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(
У Вас число превысит максимальное число int. Можно использовать в Вашем случае uint, но лучше все переписать на double.

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

Рейтинг@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 кб