Оглавление:

JeuTropFacile - WayTooEasyGame: 3 шага
JeuTropFacile - WayTooEasyGame: 3 шага

Видео: JeuTropFacile - WayTooEasyGame: 3 шага

Видео: JeuTropFacile - WayTooEasyGame: 3 шага
Видео: СРЕДИ Советов и подсказок для начинающих в США. ЧАСТЬ 2 🌟 Как использовать камеры видеонаблюдения, карту администратора, панель задач и многое другое! 🌟 2024, Ноябрь
Anonim
JeuTropFacile - WayTooEasyGame
JeuTropFacile - WayTooEasyGame

Это игра, полностью сделанная на HTML и JavaScript с библиотекой P5js. Есть 2 файла с именами index.html и sketch.js. Я очень новичок в коде, поэтому извиняюсь, если что-то непонятно.

Вы можете играть в игру по этой ссылке

Вы управляете белым шаром с помощью клавиш со стрелками, и вам нужно избегать красного шара (в настоящее время он только один).

Я создал 2 переменные: posX = 200 и posY = 200

В sketch.js я создал канву в настройке функции с разрешением 640x на 480y с серым фоном в функции draw, затем я создал белый круг с положением на posX, posY, 75, 75.

Шаг 1: перемещение круга

Двигаясь по кругу
Двигаясь по кругу

Как я сказал ранее, вы можете использовать клавиши со стрелками для перемещения круга.

Для этого я создал функцию updatePositionEllipse ().

Я использовал это условие, чтобы заставить его работать: if (keyIsDown (DOWN_ARROW)) {

posY + = 5;

}

При нажатии клавиши «вниз» круг перемещается вниз.

Я использовал его на всех остальных клавишах, чтобы вы могли перемещаться влево, вправо, вверх и вниз.

Шаг 2: Создание предельных границ

Создание предельных границ
Создание предельных границ

Чтобы белый шар остановился в конце канвы, я использовал функцию testOutOfScreen.

Внутри я использовал условие if (posX> 600) {

posX = 600; strokeWeight (6); инсульт ('синий'); линия (637, 0, 637, 480); }

если позиция x больше 600: он блокирует мяч и рисует синюю линию с границей 6, размещенную с правой стороны канвы.

Я делаю это для каждой границы.

Рекомендуемые: