Создайте увлекательную веб-игру: 'Не наступайте на белую плитку'

Введение

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

👀 Превью

🎯 Задачи

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

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

🏆 Достижения

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

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

Настройка структуры HTML

Начните с создания базовой структуры HTML для игры в index.html. Это включает в себя заголовок игры, отображение счета, основную игровую область (#main) и кнопку начала игры. В основной игровой области будут располагаться движущиеся ряды плиток.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Don't Step on the White Tile</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h2>Score</h2>
    <h2 id="score">0</h2>
    <div id="main">
      <div id="con"></div>
    </div>
    <div class="btn">
      <button class="start" onclick="start()">Start Game</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

В этом шаге вы создали основную структуру HTML для игры. Структура включает в себя заголовок игры, отображение счета, основную игровую область, идентифицированную как #main, для движущихся плиток, и кнопку начала игры. В области #main позже будут располагаться ряды плиток, с которыми игроки будут взаимодействовать во время игры. Эта настройка至关重要，так как она создает основу для игры, на которую CSS и JavaScript добавят стиль и функциональность.

Создание стилей CSS

Определите стили CSS для визуального структурирования игры в index.css. На этом этапе необходимо стилизовать главный контейнер игры, отдельные плитки (ячейки) и кнопку начала игры, чтобы сделать игру визуально привлекательной.

#main {
  width: 408px;
  height: 408px;
  background: white;
  border: 2px solid gray;
  margin: 0 auto;
  overflow: hidden;
}

h2 {
  text-align: center;
}

#con {
  width: 100%;
  height: 400px;
  position: relative;
  top: -408px;
  border-collapse: collapse;
}

.row {
  height: 100px;
  width: 100%;
}

.cell {
  height: 100px;
  width: 100px;
  float: left;
  border: rgb(54, 74, 129) 1px solid;
}

.black {
  background: black;
}

.btn {
  width: 100%;
  text-align: center;
}

.start {
  margin: 20px auto;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background: yellowgreen;
  line-height: 50px;
  color: #fff;
}

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

Инициализация игры

На этом этапе вы начнете писать JavaScript, необходимый для запуска вашей игры в index.js. Начните с создания функций start и init для инициализации игры и динамического создания начального набора рядов для игровой области.

// Helper function to get element by ID
function $(id) {
  return document.getElementById(id);
}

// Function to create a div with a given class name
function createDiv(className) {
  var div = document.createElement("div");
  div.className = className;
  return div;
}

var gameStarted = false;

// Function to start the game
function start() {
  if (!gameStarted) {
    init();
  } else {
    alert("The game has already started, no need to click again!");
  }
}

// Initialize the game
function init() {
  gameStarted = true;
  for (var i = 0; i < 4; i++) {
    createRow();
  }
}

На этом этапе вы начали придавать жизнь игре с помощью JavaScript. Код, который вы написали, инициализирует игру и настраивает механизм для создания начальных рядов плиток. Это включает в себя определение вспомогательных функций для манипуляции с DOM, установку флага для предотвращения множественного запуска игры и создание основы для динамического добавления рядов в игровую область. Этот шаг至关重要，так как он настраивает динамические элементы игры, подготовляя ее к интерактивной части, где плитки движутся и игроки могут начать взаимодействовать с игрой.

Обработка движения строки и проверка окончания игры

Расширьте функциональность JavaScript, чтобы включить в себя движение рядов вниз и проверку, закончена ли игра. Для этого нужно создать игровой цикл, который обновляет позицию рядов и проверяет, не прошла ли какой-либо ряд допустимую границу без того, чтобы быть «ступленным на».

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

var speed = 6; // Начальная скорость движения рядов
var clock = null;

// Перемещайте ряды вниз
function move() {
  var con = $("con");
  var top = parseInt(window.getComputedStyle(con, null)["top"]);
  if (speed + top > 0) {
    top = 0;
  } else {
    top += speed;
  }
  con.style.top = top + "px";
  checkGameOver();
  if (top == 0) {
    createRow();
    con.style.top = "-102px";
    deleteRow();
  }
}

// Проверьте, закончена ли игра
function checkGameOver() {
  var con = $("con");
  var rows = con.childNodes;
  var conTop = parseInt(window.getComputedStyle(con, null)["top"]);
  var conHeight = con.offsetHeight;
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    var rowTop = conTop + i * row.offsetHeight;
    if (rowTop >= conHeight && row.passed !== 1) {
      fail();
      break;
    }
  }
}

Здесь вы расширили функциональность игры, добавив логику для движения рядов вниз и проверки условий окончания игры. Функция move обновляет позицию рядов, имитируя движение плиток, на которые игроки должны избегать наступать. Функция checkGameOver контролирует, не прошла ли какой-либо ряд нижнюю границу игровой области без того, чтобы быть «ступленным на», что означало бы окончание игры. Этот шаг представляет основную механику и вызов игры, делая ее интерактивной и интересной.

Реализация подсчета очков и увеличения скорости

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

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

// Обновите счет
function score() {
  var newScore = parseInt($("score").innerHTML) + 1;
  $("score").innerHTML = newScore;
  if (newScore % 10 == 0) {
    speedUp();
  }
}

// Увеличьте скорость движения рядов
function speedUp() {
  speed += 2;
  if (speed == 20) {
    alert("Incredible speed!");
  }
}

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

Обработка взаимодействий пользователя

Реализуйте логику для обработки нажатий пользователя на плитки. Игроки должны начислять очки при нажатии на черные плитки и терять при нажатии на белые плитки.

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

// Определите действие игрока
function judge(ev) {
  ev = ev || event;
  if (ev.target.className.indexOf("black") !== -1) {
    ev.target.className = "cell";
    ev.target.parentNode.passed = 1;
    score();
  } else if (ev.target.className.indexOf("cell") !== -1) {
    fail();
  }
}

На этом этапе вы реализовали функцию judge для обработки нажатий пользователя в игре. Когда игрок нажимает на плитку, функция определяет, является ли плитка черной или нет. Если плитка черная (правильный ход), она превращается в обычную ячейку, и счет обновляется. Если плитка не черная (неправильный ход), то запускается последовательность окончания игры. Эта функция至关重要 для интерактивности игры, позволяя игрокам взаимодействовать с игрой, нажимая на плитки и получать мгновенную обратную связь о своих действиях.

Создание и удаление строк

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

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

// Случайным образом назначьте черную ячейку в ряду
function createCell() {
  var temp = ["cell", "cell", "cell", "cell"];
  var i = Math.floor(Math.random() * 4);
  temp[i] = "cell black";
  return temp;
}

// Создайте новый ряд плиток
function createRow() {
  var con = $("con");
  var row = createDiv("row");
  var arr = createCell();
  for (var i = 0; i < 4; i++) {
    row.appendChild(createDiv(arr[i]));
  }
  if (con.firstChild == null) {
    con.appendChild(row);
  } else {
    con.insertBefore(row, con.firstChild);
  }
}

// Удалите последний ряд, если их более 5
function deleteRow() {
  var con = $("con");
  if (con.childNodes.length == 6) {
    con.removeChild(con.lastChild);
  }
}

Вы добавили функцию createRow для динамического генерации рядов плиток с одной черной плиткой в случайном положении, повысив неожиданность и сложность игры. Функция deleteRow удаляет самый старый ряд, который уже невидим, оптимизируя производительность игры и обеспечивая, чтобы игровая область не переполнялась ненужными элементами. Эти функции работают вместе, чтобы поддерживать непрерывный поток плиток для взаимодействия игрока.

Реализация логики окончания игры

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

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

// Завершите игру
function fail() {
  clearInterval(clock);
  gameStarted = false;
  confirm("Your final score is " + parseInt($("score").innerHTML));
  window.location.reload();
}

Определив функцию fail, вы установили условия, при которых игра заканчивается. Эта функция вызывается, когда игрок делает неправильный ход или пропускает черную плитку. Она останавливает игровой цикл, отображает конечный счет игрока и перезагружает страницу для нового начала. Этот шаг важен для обеспечения полного игрового опыта, включая вызов избегать ошибок и окончательность окончания игры.

Запуск игрового цикла

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

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

// Запустите игровой цикл
function start() {
  if (!gameStarted) {
    init();
    clock = setInterval("move()", 30);
  }
}

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

Добавление слушателя событий

Прикрепите слушатель событий к игровой области, чтобы обнаруживать и реагировать на действия игрока, такие как нажатие на плитки.

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

// Добавьте слушатель событий для основного игрового контейнера
$("main").onclick = function (ev) {
  judge(ev);
};

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

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

Резюме

Завершив этот проект, вы создали функциональную веб-игру под названием "Не наступайте на белую плитку". Этот проект не только углубляет ваше понимание того, как HTML, CSS и JavaScript работают вместе для создания интерактивного веб-контента, но и奠定ит основу для создания более сложных веб-игр в будущем. Пробуйте разные стили, функции и функциональности, чтобы сделать игру уникальной для вас. Удачной разработки!