Создание браузерной игры «Тетрис»

• 1.1    Описание предметной областиипостановка задачи

  Тетрис – культовая компьютерная игра, изобретённая в СССР Алексеем Пажитновым и представленная общественности 6 июня 1984года. Идею «Тетриса» ему подсказала купленная им игра в пентамино, а само название сформировалось сложением двух слов – «тетрамино» и «теннис». Интерес к фигурам домино, тримино, тетрамино и пентамино в СССР возник благодаря книге С. В. Голомба «Полимино» (издательство «Мир», 1975 год). В частности, пентамино было настолько популярно, что в «Науке и жизни», начиная с 1970 – х годов, появился постоянный раздел, посвящённый составлению фигурок из набора пентамино, а пластмассовые наборы пентамино иногда продавались в магазинах. «Тетрис» был впервые написан Алексеем Пажитновым в июне 1984 года на компьютере Электроника-60. Работая в ВЦ Академии наук СССР, он занимался проблемами искусственного интеллекта и распознавания речи, а для тестирования идей применял головоломки, в том числе и классическое пентамино. Пажитнов пытался автоматизировать укладку пентамино в заданные фигурки. Однако вычислительных мощностей оборудования того времени для вращения

пентамино не хватало, приходилось отлаживать на тетрамино, что и определило название игры. Эти опыты и привели к зарождению основной идеи «Тетриса»: фигурки должны падать, а заполненные ряды – исчезать [3] .

В самом начале игры появляется случайный блок. Его нужно расположить внизу поля. В тот момент, когда блок ещё не упал окончательно его можно переворачивать по часовой стрелке сколько угодно раз. Цель игры заполнить одну ость yблоками, когда линия полная, она исчезает, прибавляя +10 очков. Если одновременно ушли более одной строки, то каждая строка даёт в два раза больше очков предыдущей, то есть если две подряд, то 30 очков, если три, то 70 и так далее. В конце игры игроку предложат начать сначала или не начинать сначала. Если игрок нажмёт кнопку “ОК”, то игра начнётся заново, если отмена, то игра исчезнет.

• 1.2    Выбор инструментов и методов реализации

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

HTML — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML) . Язык HTML интерпретируется браузерами, полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

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

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

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

• 2 ОПИСАНИЕ РАБОТЫ ПРИЛОЖЕНИЯ

Меню выбора выглядит, в соответствии с рисунком 1.

Подтвердите действие на странице localhost:63342

Ваш счёт 10 . Начать заново?

ОК Отмена

Рисунок 1 – Выбор действия

Сперва в . html файле создали canvas(грубо говоря холст, где будет расположена сама игра). Далее создали .js файл и подключили его к . html. В нём же сделали размер холста, в соответствии с рисунком 2.

Рисунок 2 – Пустой холст

Код будет в JS будет выглядеть в соответствии с рисунком 3.

Рисунок 3 – Холст в JavaScript

Далее нужно создать сами блоки. Для создания блоков используем матрицу, которая будет заполняться нужными блоками и далее располагаем ее на холсте и закрашиваем любым цветом. Выглядеть это будет, в соответствии с рисунком 4.

Рисунок 4 – Блок

Функция будет вы глядеть в соответствии с рису нком 5.

function createPiece(type) {

I if (type === T'H return [ [0,0,0], [1,1,1], [0,1,0]

L

Рисунок 5 – Создание блока

Далее прописываем функции с помощью, которых блок может падать вниз. То есть прописываем в .js, чтобы блок перемещался по оси y с определённым интервалом. Далее используем клавиши клавиатуры. Прописываем функцию с помощью которых при нажатии на стрелочку влево и стрелочку вправо блок перемещался по оси y. После этого появилось возможность перемещать блок, в соответствии с рисунком 6.

Рисунок 6 – Перемещение блока

Код перемещения по оси x будет выглядеть в соответствии с рисунком 7.

document.addEventListener('keydown1, event =>{ if (event.keyCode === 37){ playerMove(-1);

} else if (event.keyCode === 39){s playerMove(l);

} '

else if (event.keyCode === 40){ playerDropO

} else if (event.keyCode ===38){ playerRotate(-1);

}); _________________________________________________

Рисунок 7 – Перемещение по оси х

Далее добавим ещё фигуры с помощью матрицы. В стандартном тетрисе их 7. Так же добавим ограничение снизу, чтобы блоки не проваливались дальше ранее созданного холста. Должно будет выглядеть в соответствии с рисунком 8.

Рисунок 8 – Добавление разных блоков

Далее добавим окончание игры, чтобы, когда самый высокий блок заходил за холст игра заканчивается, в соответствии с рисунком 9.

Рисунок 9 – Окончание игры

Код будет выглядеть в соответствии с рисунком 10.

function playerReset() { const pieces = 'ILJOTSZ';

updateScore();

} else document.getElementBy!d('background').style.display = 'none';

Рисунок 10 – Код игры и её окончания

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

Рисунок 11 – Изменение цвета

Код в JavaScript будет выглядеть в соответствии с рисунком 12.

const color = [ null, ■ purple1, "yellow1, "orange", "blue", "aqua', "green", " red"

Ji

Рисунок 12 – Цвета блоков

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

Рисунок 13– Тетрис

ЗАКЛЮЧЕНИЕ

В итоге была написана полноценная игра Тетрис, в которую можно играть. Использовались такие языки как HTML, JavaScript, CSS. И такая игра весит всего лишь 528 КБ, что очень мало для такой интересной и легендарной игры. В данной игре было осуществлено создание блоков с помощью матрицы, их вращение. Подсчитывание очков при заполнении линии по оси y. А также окончание и начало новой игры.