CC BY
10
УДК 004.6
Поварницын Е.Н.
студент
3 курс, факультет «Информационные системы
и технологии»
Северный Арктический Федеральный Университет
Россия, г. Архангельск
СОЗДАНИЕ БРАУЗЕРНОЙ ИГРЫ «ТЕТРИС»
Аннотация: Статья посвящается созданию игры «Тетрис». В данной статье рассматриваются такие языки как JavaScript, HTML и таблица стилей CSS.
Ключевые слова: JavaScript, HTML, CSS, Тетрис, язык программирования, браузер.
Povarnitsyn E. N.
student
3rd year, faculty of Information systems and technologies»
Northern Arctic Federal University Russia, Arkhangelsk
CREATING A BROWSER-BASED GAME «TETRIS»
Annotation: The article is devoted to the creation of the game "Tetris". This article covers languages such as JavaScript, HTML, and the CSS stylesheet.
Key words: JavaScript, HTML, CSS, Tetris, programming language, browser.
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._
Подтвердите действие на странице local host 63 J42
Ваш счёг 10 , Начать заново?
OK Отмена
Рисунок 1 - Выбор действия
Сперва в .html файле создали canvas(rpy6o говоря холст, где будет расположена сама игра). Далее создали .js файл и подключили его к .html. В нём же сделали размер холста, в соответствии с рисунком 2.
Рисунок 2 - Пустой холст
Код будет в JS будет выглядеть в соответствии с рисунком 3.
context.scale(20j 20);
Рисунок 3 - Холст в JavaScript
Далее нужно создать сами блоки. Для создания блоков используем матрицу, которая будет заполняться нужными блоками и далее располагаем ее на холсте и закрашиваем любым цветом. Выглядеть это будет, в соответствии с рисунком 4.
Рисунок 4 - Блок
Функция будет выглядеть в соответствии с рисунком 5.
function createPiec^(type) {
Рисунок 5 - Создание блока
Далее прописываем функции с помощью, которых блок может падать вниз. То есть прописываем в .js, чтобы блок перемещался по оси y с определённым интервалом. Далее используем клавиши клавиатуры. Прописываем функцию с помощью которых при нажатии на стрелочку влево и стрелочку вправо блок перемещался по оси y. После этого появилось возможность перемещать блок, в соответствии с рисунком 6.
Рисунок 6 - Перемещение блока
Код перемещения по оси x будет выглядеть в соответствии с рисунком
7.
document. addEventList^ event =>{
Рисунок 7 - Перемещение по оси х
Далее добавим ещё фигуры с помощью матрицы. В стандартном тетрисе их 7. Так же добавим ограничение снизу, чтобы блоки не проваливались дальше ранее созданного холста. Должно будет выглядеть в соответствии с рисунком 8.
Рисунок 8 - Добавление разных блоков
Далее добавим окончание игры, чтобы, когда самый высокий блок заходил за холст игра заканчивается, в соответствии с рисунком 9.
Рисунок 9 - Окончание игры
Код будет выглядеть в соответствии с рисунком 10.
function playerReset() {
const pieces = "ILHOTSZ";
player.matrix = createPiece(pieces[pieces.length 8 Math.random() | 0]); player.pos.у = 0;
player.pos.x = (arena[0].length /2 | 0) -
(player.matrix[0].length/2 |0); if (collide(arena,р1ауег)){
if(document.getElementById(1 background1).style.display !== 1 none1) if(confirm("Ваш счёт " +player.score* " . Начать заново?")){ arena.forEach(row => row.fill(0)); player.score =0; updateScore();
} else document.getElementById("background").style.display = "none"
}
Рисунок 10 - Код игры и её окончания
Игра почти готова, осталось пару декоративных штрихов, изменим цвет каждого блока на приятный глазу, в соответствии с рисунком 11.
Рисунок 11 - Изменение цвета
Код в JavaScript будет выглядеть в соответствии с рисунком 12.
Рисунок 12 - Цвета блоков
Ну и последнее что стоит сделать это саму страницу, где будет расположена созданная игра. Для этого стоит создать . css файл и написать нужный стиль для данной игры. В итоге получилось полноценная красивая игра, которую не стыдно показать. Выглядеть она будет, в соответствии с рисунком 13.
Рисунок 13- Тетрис
ЗАКЛЮЧЕНИЕ
В итоге была написана полноценная игра Тетрис, в которую можно играть. Использовались такие языки как HTML, JavaScript, CSS. И такая игра весит всего лишь 528 КБ, что очень мало для такой интересной и легендарной игры. В данной игре было осуществлено создание блоков с помощью матрицы, их вращение. Подсчитывание очков при заполнении линии по оси y. А также окончание и начало новой игры.
Использованные источники:
1. Беляев, С.А. Разработка игр на языке JavaScript: учебное пособие / С.А. Беляев. — 2-е изд., стер. — Санкт-Петербург: Лань, 2018 г.
2. Государев, И.Б. Введение в веб-разработку на языке JavaScript: учебное пособие / И.Б. Государев. — Санкт-Петербург: Лань, 2019 г.
3. Юл, Й. Рассказывают ли игры истории? Краткая заметка об играх и нарративах / Й. Юл // Логос. — 2015 г.
