Как сделать игру в блокноте html

Своя игра: создаём собственную «Змейку»

Не так давно мы разбирали, как искусственный интеллект учится играть в змейку. А теперь мы сами сделаем такую игру, чтобы ей могли насладиться обычные люди. Что нам понадобится:

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

Логика игры

У классической змейки правила простые:

• есть поле из клеточек, где случайным образом появляется еда;
• есть змейка, которая всё время двигается и которой мы можем управлять;
• если змейка на своём пути встречает еду — еда исчезает, появляется в новом месте, а сама змейка удлиняется на одну клеточку;
• если змейка врежется в стену или в саму себя, игра заканчивается.

Чтобы играть было проще, мы сделаем так, чтобы змейка не врезалась в стенки, а проходила сквозь них. Если что — сможете это сами потом настроить в коде, когда захотите посложнее.

Последовательность наших действий будет такой:

1. Делаем пустую HTML-страницу.
2. Настраиваем внешний вид с помощью CSS.
3. Рисуем игровое поле.
4. Пишем скрипт, который и будет отвечать за всю игру.

Делаем HTML-страницу

С этим всё просто: берём стандартный код и сохраняем его как файл snake.html .

Это даст нам пустую страницу, которую мы сейчас немного настроим стилями.

Настраиваем внешний вид

За внешний вид на странице у нас отвечает раздел , поэтому мы просто добавим в него CSS-код:

html, body < height: 100%; margin: 0; >/*Задаём глобальные параметры*/ body < background: black; display: flex; align-items: center; justify-content: center; >/*Делаем границу вокруг игрового поля*/ canvas

Теперь у нас на странице нет лишних отступов, зато всё по центру, есть чёрный фон и граница вокруг игрового поля. Самое время создать само игровое поле.

Рисуем игровое поле

Поле делается очень просто:

400 пикселей в ширину, столько же в высоту, название поля — game. Этого достаточно, чтобы браузер отобразил холст с такими размерами и позволил нам на нём рисовать.

Пишем скрипт

1. Зададим все переменные, которые нам понадобятся.

// Поле, на котором всё будет происходить, — тоже как бы переменная var canvas = document.getElementById('game'); // Классическая змейка — двухмерная, сделаем такую же var context = canvas.getContext('2d'); // Размер одной клеточки на поле — 16 пикселей var grid = 16; // Служебная переменная, которая отвечает за скорость змейки var count = 0; // А вот и сама змейка var snake = < // Начальные координаты x: 160, y: 160, // Скорость змейки — в каждом новом кадре змейка смещается по оси Х или У. На старте будет двигаться горизонтально, поэтому скорость по игреку равна нулю. dx: grid, dy: 0, // Тащим за собой хвост, который пока пустой cells: [], // Стартовая длина змейки — 4 клеточки maxCells: 4 >; // А это — еда. Представим, что это красные яблоки. var apple = < // Начальные координаты яблока x: 320, y: 320 >;

2. Сделаем генератор случайных чисел. Он нам понадобится, чтобы размещать еду на поле случайным образом.

// Делаем генератор случайных чисел в заданном диапазоне

function getRandomInt(min, max) < return Math.floor(Math.random() * (max - min)) + min;

3. Напишем основной игровой цикл, который будет работать бесконечно.

// Игровой цикл — основной процесс, внутри которого будет всё происходить function loop() < // Дальше будет хитрая функция, которая замедляет скорость игры с 60 кадров в секунду до 15. Для этого она пропускает три кадра из четырёх, то есть срабатывает каждый четвёртый кадр игры. Было 60 кадров в секунду, станет 15. requestAnimationFrame(loop); // Игровой код выполнится только один раз из четырёх, в этом и суть замедления кадров, а пока переменная count меньше четырёх, код выполняться не будет. if (++count < 4) < return; >// Обнуляем переменную скорости count = 0; // Очищаем игровое поле context.clearRect(0, 0, canvas.width, canvas.height); // Двигаем змейку с нужной скоростью snake.x += snake.dx; snake.y += snake.dy; // Если змейка достигла края поля по горизонтали — продолжаем её движение с противоположной стороны if (snake.x < 0) < snake.x = canvas.width - grid; >else if (snake.x >= canvas.width) < snake.x = 0; >// Делаем то же самое для движения по вертикали if (snake.y < 0) < snake.y = canvas.height - grid; >else if (snake.y >= canvas.height) < snake.y = 0; >// Продолжаем двигаться в выбранном направлении. Голова всегда впереди, поэтому добавляем её координаты в начало массива, который отвечает за всю змейку. snake.cells.unshift(< x: snake.x, y: snake.y >); // Сразу после этого удаляем последний элемент из массива змейки, потому что она движется и постоянно особождает клетки после себя if (snake.cells.length > snake.maxCells) < snake.cells.pop(); >// Рисуем еду — красное яблоко context.fillStyle = 'red'; context.fillRect(apple.x, apple.y, grid - 1, grid - 1); // Одно движение змейки — один новый нарисованный квадратик context.fillStyle = 'green'; // Обрабатываем каждый элемент змейки snake.cells.forEach(function (cell, index) < // Чтобы создать эффект клеточек, делаем зелёные квадратики меньше на один пиксель, чтобы вокруг них образовалась чёрная граница context.fillRect(cell.x, cell.y, grid - 1, grid - 1); // Если змейка добралась до яблока. if (cell.x === apple.x && cell.y === apple.y) < // увеличиваем длину змейки snake.maxCells++; // Рисуем новое яблочко // Помним, что размер холста у нас 400x400, при этом он разбит на ячейки — 25 в каждую сторону apple.x = getRandomInt(0, 25) * grid; apple.y = getRandomInt(0, 25) * grid; >// Проверяем, не столкнулась ли змея сама с собой // Для этого перебираем весь массив и смотрим, есть ли у нас в массиве змейки две клетки с одинаковыми координатами for (var i = index + 1; i < snake.cells.length; i++) < // Если такие клетки есть — начинаем игру заново if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) < // Задаём стартовые параметры основным переменным snake.x = 160; snake.y = 160; snake.cells = []; snake.maxCells = 4; snake.dx = grid; snake.dy = 0; // Ставим яблочко в случайное место apple.x = getRandomInt(0, 25) * grid; apple.y = getRandomInt(0, 25) * grid; >> >); >

4. Сделаем управление стрелочками на клавиатуре.

// Смотрим, какие нажимаются клавиши, и реагируем на них нужным образом document.addEventListener('keydown', function (e) < // Дополнительно проверяем такой момент: если змейка движется, например, влево, то ещё одно нажатие влево или вправо ничего не поменяет — змейка продолжит двигаться в ту же сторону, что и раньше. Это сделано для того, чтобы не разворачивать весь массив со змейкой на лету и не усложнять код игры. // Стрелка влево // Если нажата стрелка влево, и при этом змейка никуда не движется по горизонтали… if (e.which === 37 && snake.dx === 0) < // то даём ей движение по горизонтали, влево, а вертикальное — останавливаем // Та же самая логика будет и в остальных кнопках snake.dx = -grid; snake.dy = 0; >// Стрелка вверх else if (e.which === 38 && snake.dy === 0) < snake.dy = -grid; snake.dx = 0; >// Стрелка вправо else if (e.which === 39 && snake.dx === 0) < snake.dx = grid; snake.dy = 0; >// Стрелка вниз else if (e.which === 40 && snake.dy === 0) < snake.dy = grid; snake.dx = 0; >>);

5. Запускаем игру. Для этого достаточно запустить предыдущий бесконечный цикл, поэтому пишем:

6. Наслаждаемся результатом:

Чтобы у вас тоже получилось такое, просто скопируйте готовый код, сохраните его как HTML-файл и откройте в браузере.

Готовый код

    html, body < height: 100%; margin: 0; >/*Задаём глобальные параметры*/ body < background: black; display: flex; align-items: center; justify-content: center; >/*Делаем границу вокруг игрового поля*/ canvas      

Как улучшить

Этот код — самая простая реализация змейки, и игру можно сделать ещё лучше:

• выводить количество набранных очков;
• сделать так, чтобы нельзя было проходить сквозь стены;
• добавить препятствия;
• поставить таймер — кто больше соберёт еды за 5 минут;
• добавить вторую змейку и играть вдвоём.

Проголосуйте за тот вариант, который вам больше всего нравится, в комментариях, или сделайте свою змейку, где всё это будет одновременно.

Апскиллинг, как говорится

Апскиллинг — это, например, переход с уровня junior на уровень middle, а потом — senior. У «Яндекс Практикума» есть курсы ровно для этого: от алгоритмов и типов данных до модных фреймворков.

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

Как я сделал игру для Блокнота

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

Я создал игру And yet it hurt (возможно, автор хотел сказать it hurts, но мог использовать такой вариант намеренно, — прим.).

Все началось в 2017 году с вопроса: «Реально ли сделать игру в Блокноте?» Тогда я только усмехнулся. Прошло три года. Обдумав, как все будет работать, и убедившись, что это реально, я решил сделать эту игру.

Обычно вы жмете на кнопку, и в игре что-то происходит. Жмете А, и Марио прыгает. Все завязано на получении информации и отклике. Игра получает входные данные и выводит свои.

В игре для Блокнота на входе будут изменения, которые вносит пользователь в файл, а на выходе изменения, которые вносит в файл сама игра. Для этого приложение отслеживает время последнего сохранения файла. Если оно изменилось, игра считывает содержимое файла и вносит в него новые данные.

Возникает проблема: Блокнот от Microsoft не проверяет, был ли файл изменен. Пришлось бы сохранять файл, закрывать и открывать его заново. Создать такую игру возможно, но звучит не очень весело. Пришлось искать альтернативу.

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

Альтернатива

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

Сначала на ум пришли Notepad++ и Sublime Text. Но они совсем не похожи на Блокнот внешне, очарование проекта развеялось бы окончательно. Плюс, они спрашивают игрока, хотел бы он обновить файл. Это куда лучше, чем закрывать и открывать файл, но все равно отвлекает от геймплея. Я хотел, чтобы файл обновлялся автоматически. Тогда мне на глаза попался Notepad2. Он был почти идеален.

Редактор можно настроить, чтобы он был похож на MS Блокнот, а главное — он проверяет изменения, внесенные в файл. Но также как Notepad++ и Sublime Text, Notepad2 спрашивает игрока, нужно ли изменить файл. К счастью, у редактора открытый код, и я мог отполировать его до совершенства.

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

Для начала я решил поискать текст из диалогового окна: «Файл был изменен внешней программой. Перезагрузить файл?». Это значение переменной, которая используется в качестве аргумента в функции диалогового окна. И я ее нашел.

if ((iFileWatchingMode == 2 && !bModified && iEncoding == iOriginalEncoding) || MsgBox(MBYESNO,IDS_FILECHANGENOTIFY) == IDYES) 

MsgBox(MBYESNO,IDS_FILECHANGENOTIFY) == IDYES

house = love.filesystem.read("art_house.txt") bird = love.filesystem.read("art_bird.txt")

love.filesystem.write("home.txt", house)

local x, y = 20, 40 drawArt(bird, x, y)

-- Get the current canvas screen = love.filesystem.read("home.txt") -- Create a table. A table is like an array. screen_lines = <> -- The lua pattern (.-)\n says capture everything until the \n (newline). -- We add an \n to the end of the file so that it captures the last line as well. for line in (screen .. "\n"):gmatch("(.-)\n") do table.insert(screen_lines, line) end

function drawArt(art, x, y) art_lines = getLines(art) -- In Lua, you can get the length of a table and string with # for i=1, #screen_lines do if i == y then for j=1 ,#art_lines do -- With string:sub(start, end) we can get part of a string local first_part = screen_lines[i]:sub(1, x - 1) local second_part = screen_lines[i] :sub(x + #art_lines[j], #screen_lines[i]) screen_lines[i] = first_part .. art_lines[i] .. second_part end end end end

-- (%s) gets all the whitespace characters. local spaces = art_lines[j]:match("(%s*)") -- Remove the spaces from the line. art_lines[i] = art_lines[i]:sub(#spaces + 1, #art_lines[i]) local first_part = screen_lines[i]:sub(1, x + #spaces - 1) local second_part = screen_lines[i]:sub(x + #spaces + #art_lines[j], #screen_lines[i]) screen_lines[i] = first_part .. art_lines[i] .. second_part

> _ _ 'v' > --v-- > _/v\_

// At the end of the FileLoad function. // If the file is not new, and the file has not been reloaded, save it. if (!bNew && !bReload)

assoc .tXt=tXt ftype tXt=[directory]/.notepad/Notepad2.exe "%1"

     
  
 
 
Взгляд упал на кота.