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

Введение

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

👀 Превью

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/arith_ops -.-> lab-445719{{"Не наступайте на белую плитку"}} javascript/cond_stmts -.-> lab-445719{{"Не наступайте на белую плитку"}} javascript/loops -.-> lab-445719{{"Не наступайте на белую плитку"}} javascript/functions -.-> lab-445719{{"Не наступайте на белую плитку"}} javascript/dom_select -.-> lab-445719{{"Не наступайте на белую плитку"}} javascript/dom_manip -.-> lab-445719{{"Не наступайте на белую плитку"}} javascript/event_handle -.-> lab-445719{{"Не наступайте на белую плитку"}} javascript/dom_traverse -.-> lab-445719{{"Не наступайте на белую плитку"}} end

Настройка структуры 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 работают вместе для создания интерактивного веб-контента, но и奠定ит основу для создания более сложных веб-игр в будущем. Пробуйте разные стили, функции и функциональности, чтобы сделать игру уникальной для вас. Удачной разработки!