Создать игру "Слайд Puzzle" | Проект на JavaScript

Введение

Добро пожаловать в этот проект по созданию простой игры "Слайд Puzzle" с использованием JavaScript. В конце этого руководства у вас будет работающая игра "Слайд Puzzle" 3x3, которую вы сможете играть в своем браузере. В игре будут использоваться нумерованные плитки, таймер и кнопки для запуска, паузы и сброса игры.

Нет необходимости иметь предварительный опыт, но базовое понимание JavaScript и HTML будет полезно. Давайте погрузимся!

👀 Предпросмотр

Предпросмотр игры "Слайд Puzzle"

🎯 Задачи

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

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

🏆 Достижения

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

Проектировать макет игры с использованием HTML
Стилизовать элементы с использованием CSS
Реализовать игровую логику с использованием JavaScript
Обрабатывать ввод пользователя и выполнять действия на основе него
Управлять DOM для обновления состояния игры и отображения информации

Проектировать макет игры в HTML

Проектируйте макет игры в index.html, как описано в предыдущем разделе.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Puzzle</title>
    <link rel="stylesheet" type="text/css" href="puzzle.css" />
    <script type="text/javascript" src="puzzle.js"></script>
  </head>
  <body>
    <div id="container">
      <!-- Наиболее внешний DIV, используется для содержания внутренней структуры -->
      <div id="game">
        <!-- Игровая область, это большой DIV-блок -->
        <div id="d1" onclick="move(1)">1</div>
        <!-- Маленькие DIVы, это 8 маленьких блоков. При нажатии на них выполняется функция move(). Параметр - это отображаемое число, поэтому мы знаем, какой блок был нажат -->
        <div id="d2" onclick="move(2)">2</div>
        <div id="d3" onclick="move(3)">3</div>
        <div id="d4" onclick="move(4)">4</div>
        <div id="d5" onclick="move(5)">5</div>
        <div id="d6" onclick="move(6)">6</div>
        <div id="d7" onclick="move(7)">7</div>
        <div id="d8" onclick="move(8)">8</div>
      </div>
      <div id="control">
        <!-- Игровая область управления -->
        <p>
          <rowspan id="timeText">Total Time</rowspan>
          <!--  "Total Time" -->
          <rowspan id="timer"></rowspan>
        </p>
        <!-- Область отображения игрового времени -->
        <p>
          <rowspan id="start" onclick="start()">Start</rowspan>
          <!--  "Start" -->
          <rowspan id="reset" onclick="reset()">Retry</rowspan>
          <!--  "Retry" -->
        </p>
        <!-- Область отображения кнопок управления -->
      </div>
    </div>
  </body>
</html>

Написание стилей CSS

После завершения структуры макета время придать нашей игре привлекательный вид с помощью стилей CSS. На этом этапе вы можете свободно настраивать и проектировать игру по своему вкусу, добавляя уникальные штрихи и детали. Также можно ввести больше декоративных элементов, чтобы улучшить эстетику игры. Однако, важный момент: если вы измените размер основного DIV игры, убедитесь, что также скорректируете соответствующий JavaScript-код. Мы поговорим об этом более подробно чуть позже.

В puzzle.css добавьте:

* {
  padding: 0;
  margin: 0;
  border: 0;
}
/* Символ '*' - это万用符，который удаляет стандартные стили для всех элементов, так как некоторые браузеры могут добавить стандартные стили, что может привести к проблемам с макетом. */

body {
  width: 100%;
  height: 100%;
}
/* Устанавливаем высоту и ширину body равными 100%, чтобы она автоматически подстраивалась под размер экрана браузера. */

#container {
  position: relative;
  width: 620px;
  height: 450px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 1px;
}
/* Это DIV, который оборачивает все элементы. Установлен размер 620px по ширине и 450px по высоте. Этот размер можно увеличить, но не уменьшать. Он должен быть достаточно большим, чтобы вместить все внутренние элементы. */

#game {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 5px;
  display: inline-block;
  background-color: #ffe171;
  box-shadow: 0 0 10px #ffe171;
}
/* Это DIV игровой области. Размер рассчитывается на основе размера меньших блоков. Здесь блоки установлены в 150px на 150px, поэтому игровая область равна 150px * 3, то есть 450px. */

#game div {
  position: absolute;
  width: 149px;
  height: 149px;
  box-shadow: 1px 1px 2px #777;
  background-color: #20a6fa;
  color: white;
  text-align: center;
  font-size: 150px;
  line-height: 150px;
  cursor: pointer;
  -webkit-transition: 0.3s; /* Префикс для Chrome */
  -moz-transition: 0.3s; /* Для Firefox */
  -ms-transition: 0.3s; /* Для IE */
  -o-transition: 0.3s; /* Для Opera */
  transition: 0.3s;
}
/* Это устанавливает размер маленьких блоков. Расположены абсолютно, поэтому изменения в позиции не влияют на позиции других элементов. Ширина и высота равны 149px. Обратите внимание, что есть box-shadow, что увеличивает общий размер. Свойство 'transition:0.3s' делает изменения анимационными, поэтому когда позиция блока меняется, автоматически запускается анимация. */

#game div:hover {
  color: #ffe171;
}
/* Устанавливаем анимацию при наведении курсора на блоки. Когда курсор наведен на элемент, эти свойства заменяют вышеперечисленные, и при отводе курсора элемент возвращается к исходному состоянию. Здесь мы меняем цвет шрифта. */

#control {
  width: 150px;
  height: 450px;
  display: inline-block;
  float: right;
}
/* Секция управления. 'display:inline-block' позволяет элементу сохранять свойства блока, не занимая при этом всю строку, а 'float:right' располагает его по правой стороне. */

#control rowspan {
  height: 25px;
  font-size: 20px;
  color: #222;
  margin-top: 10px;
}
/* Общие стили для кнопок в области управления. */

#start {
  display: inline-block;
  font-size: 28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #4c98f5;
  text-align: center;
  cursor: pointer;
}
/* Стили для кнопки 'Start'. 'cursor:pointer' делает курсор рукоподобным при наведении. */

#reset {
  display: inline-block;
  font-size: 28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171; /* Тень текста */
  border-radius: 5px; /* Скругленные углы */
  box-shadow: 2px 2px 5px #4c98f5; /* Тень рамки */
  text-align: center; /* Центрирование текста */
  cursor: pointer;
}
/* Стили для кнопки 'Reset'. */

#d1 {
  left: 0px;
}
#d2 {
  left: 150px;
}
#d3 {
  left: 300px;
}
#d4 {
  top: 150px;
}
#d5 {
  top: 150px;
  left: 150px;
}
#d6 {
  top: 150px;
  left: 300px;
}
#d7 {
  top: 300px;
}
#d8 {
  left: 150px;
  top: 300px;
}
/* Предопределенные позиции для каждого из блоков в порядке. */

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

Инициализировать переменные игры в JavaScript

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

В puzzle.js добавьте:

// puzzle.js

var time = 0;
// Сохраняет прошедшее время
var pause = true;
// Флаг, указывающий, приостановлена ли игра. true означает, что игра приостановлена
var set_timer;
// Функция таймера
var d = new Array(10);
// Сохраняет номер маленького DIV, который находится в большом DIV в данный момент
var d_direct = new Array(
  [0],
  [2, 4], // Большой DIV с числом 1 может переместиться в позиции 2 и 4
  [1, 3, 5],
  [2, 6],
  [1, 5, 7],
  [2, 4, 6, 8],
  [3, 5, 9],
  [4, 8],
  [5, 7, 9],
  [6, 8]
);
// Сохраняет возможные позиции для перемещения больших DIV
var d_posXY = new Array(
  [0],
  [0, 0], // Первое число - это left, второе - top. Например, позиция первого блока - left:0px, top:0px
  [150, 0],
  [300, 0],
  [0, 150],
  [150, 150],
  [300, 150],
  [0, 300],
  [150, 300],
  [300, 300]
);
// Позиция больших DIV
d[1] = 1;
d[2] = 2;
d[3] = 3;
d[4] = 4;
d[5] = 5;
d[6] = 6;
d[7] = 7;
d[8] = 8;
d[9] = 0;
// Стандартная расстановка. Девятый большой DIV пуст, поэтому он равен 0. Мы используем 0 для представления пустой плитки.

Реализовать функцию перемещения

Создайте функцию, которая позволяет плиткам перемещаться в зависимости от взаимодействия пользователя.

Добавьте в puzzle.js:

// puzzle.js

function move(id) {
  // Функция перемещения
  var i = 1;
  for (i = 1; i < 10; ++i) {
    if (d[i] == id) break;
  }
  // Этот цикл находит позицию маленького DIV внутри большого DIV
  var target_d = 0;
  // Сохраняет возможные позиции для маленького DIV, 0 означает, что он не может двигаться
  target_d = whereCanTo(i);
  // Узнать, куда может переместиться маленький DIV. Если возвращается 0, значит, он не может двигаться, иначе возвращается номер целевой позиции
  if (target_d != 0) {
    d[i] = 0;
    // Установить номер текущего большого DIV равным 0, так как маленький DIV переместился, и текущий большой DIV теперь пуст
    d[target_d] = id;
    // Установить целевой большой DIV равным номеру нажатого маленького DIV
    document.getElementById("d" + id).style.left = d_posXY[target_d][0] + "px";
    document.getElementById("d" + id).style.top = d_posXY[target_d][1] + "px";
    // Наконец, установить позицию нажатого маленького DIV равной позиции целевого большого DIV
  }

  var finish_flag = true;
  // Флаг, указывающий, завершена ли игра. true означает, что игра завершена
  for (var k = 1; k < 9; ++k) {
    if (d[k] != k) {
      finish_flag = false;
      break;
    }
  }
  // Перебираем от 1, проверяем каждый номер большого DIV. Если они не в порядке, игра не завершена.
  if (finish_flag == true) {
    if (!pause) start();
    alert("Поздравляем!");
  }
  // Если true, игра завершена. Если игра не приостановлена, вызываем функцию паузы и выводим сообщение об успехе.
}

Определить возможные перемещения плиток

Создайте функцию для определения, куда может переместиться плитка в зависимости от ее текущей позиции.

Добавьте в puzzle.js:

// puzzle.js

function whereCanTo(cur_div) {
  // Функция для определения, может ли данный DIV двигаться и в какую позицию
  var j = 0;
  var move_flag = false;
  for (j = 0; j < d_direct[cur_div].length; ++j) {
    if (d[d_direct[cur_div][j]] == 0) {
      move_flag = true;
      break;
    }
  }
  if (move_flag == true) {
    return d_direct[cur_div][j];
  } else {
    return 0;
  }
  // Если может двигаться, возвращает номер целевой позиции, иначе возвращает 0
}

Реализовать игровой таймер

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

Добавьте в puzzle.js:

// puzzle.js

function timer() {
  // Функция таймера, выполняется каждую секунду
  time += 1;
  var min = parseInt(time / 60); // Преобразуем секунды в минуты
  var sec = time % 60; // Получаем оставшиеся секунды
  document.getElementById("timer").innerHTML =
    min + " минут " + sec + " секунд";
}

Управлять игровым процессом

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

Добавьте в puzzle.js:

// puzzle.js

function start() {
  // Запустить или приостановить игру
  if (pause) {
    document.getElementById("start").innerHTML = "Пауза";
    pause = false;
    set_timer = setInterval(timer, 1000);
  } else {
    document.getElementById("start").innerHTML = "Старт";
    pause = true;
    clearInterval(set_timer);
  }
}
function reset() {
  // Сбросить игру
  time = 0;
  random_d();
  if (pause) start();
}

Перемешать плитки случайным образом

Создайте функцию для случайного перемешивания плиток в начале или при сбросе.

Добавьте в puzzle.js:

// puzzle.js

function random_d() {
  // Случайным образом перемешивать плитки
  for (var i = 9; i > 1; --i) {
    var to = parseInt(Math.random() * (i - 1) + 1);
    if (d[i] != 0) {
      document.getElementById("d" + d[i]).style.left = d_posXY[to][0] + "px";
      document.getElementById("d" + d[i]).style.top = d_posXY[to][1] + "px";
    }
    if (d[to] != 0) {
      document.getElementById("d" + d[to]).style.left = d_posXY[i][0] + "px";
      document.getElementById("d" + d[to]).style.top = d_posXY[i][1] + "px";
    }
    var tem = d[to];
    d[to] = d[i];
    d[i] = tem;
  }
}

Инициализировать игру при загрузке страницы

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

Добавьте в puzzle.js:

// puzzle.js

// Инициализировать игру при загрузке страницы
window.onload = function () {
  reset();
};

Запуск проекта

Откройте index.html в веб-браузере.
Эффект страницы выглядит так:

Резюме

Теперь вы успешно построили игру "Слайд Puzzle" с использованием JavaScript в структурированном и организованном стиле! Пошаговое разбиение должно помочь ученикам легче понять каждый компонент игровой логики. Помните, это только базовая версия, и есть много возможностей для улучшений и добавления функций. Вдохновляйтесь и сделайте ее своей. Удачного программирования!

Создать игру "Слайд Puzzle" с использованием JavaScript

Введение

👀 Предпросмотр

🎯 Задачи

🏆 Достижения

Проектировать макет игры в HTML

Написание стилей CSS

Инициализировать переменные игры в JavaScript

Реализовать функцию перемещения

Определить возможные перемещения плиток

Реализовать игровой таймер

Управлять игровым процессом

Перемешать плитки случайным образом

Инициализировать игру при загрузке страницы

Запуск проекта

Резюме