Вклад, растущий на глазах
Вклады
Накопительные счета
Калькулятор вкладов
Брокерское обслуживание
Курсы валют
Расчетный счет от Т-Бизнеса
Регистрация бизнеса
Расчетно-кассовое обслуживаниеКредиты для бизнеса
Банковские гарантии
Лизинг
Эквайринг
ВЭД
Пишем свою игру на JavaScript
JavaScript – очень гибкий язык, поскольку начиная с JavaScript ES5 каждый новый стандарт добавляет в язык все больше функциональности. За это приходится платить некоторыми старыми костылями, вокруг которых нужно «плясать», но преимущества все равно перевешивают – на чистом JavaScript можно написать практически что угодно, и гайд ниже вам это продемонстрирует, поскольку мы будем писать 2d игру «Змейку». Заметим, что выучить JavaScript с нуля на этом гайде не получится – все же нужны некоторые предварительные знания. Кроме того, предупредим, что нам понадобится чистый HTML (включая HTML5 canvas) и CSS, хотя 95% времени все же будет посвящено языку JavaScript.
Подготовка: HTML и CSS
Перед тем, как размещать код, нам нужно создать стандартный HTML-файл index.html. Выглядеть он должен следующим образом:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport", content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="snake.css"> <script src="snake.js"></script> </head> <body> <canvas id="board"></canvas> </body> </html>Здесь нет никакой магии: в head мы указываем всю мета-информацию, выставляем правильную ширину и подключаем CSS и скрипт, в котором будет расположена игра. В теле создаем канву, которая и будет основой нашей игры.
CSS выглядит вот так:
body { text-align: center; }Это позволяет разместить нашу канву по центру экрана.
Шаг предварительный: дизайн
Перед тем, как создать браузерную игру, нам нужно продумать ее механику, чтобы понимать, что нам писать. Концепция классической змейки выглядит так:
У нас есть некоторое поле с клетками, представляющее собой двухмерный массив. Изначально в случайных ячейках появляется еда, игрок появляется в фиксированной ячейке. Для простоты примера не будем делать отдельную кнопку «Старт», игра начнется при первом нажатии на любую стрелочку. Змейка управляется через стрелочки, она двигается в направлении, соответствующем стрелочке, нажатой последней. Змейка двигается с определенной скоростью и не может остановиться. Если змейка сталкивается с едой – она «съедает» ее: еда удаляется с экрана, змейка «прирастает» на 1 сегмент, на экране в незанятой клетке появляется новая еда. Если голова змейки сталкивается с другим сегментом змейки, игра заканчивается. Если голова змейки сталкивается с краем экрана, игра заканчивается.
Окончание игры сопровождается надписью «Вы проиграли!».Шаг 1: создаем глобальные переменные и функцию main
Учитывая, что у нас – небольшой проект, будет очень удобно создать все необходимые переменные в глобальной области видимости, после чего обращаться к ним напрямую (в больших проектах так делать не стоит, потому что может случиться так, что вы случайно перекроете область видимости). Что нам нужно? Нам нужны переменные для: размера блока в пикселях, количества рядов и строк, служебные переменные для доступа к канве и ее содержимому, размеры и скорость змейки, массив для частей змейки, координаты еды, флаг окончания игры.
var blockSize = 25; var rows = 20; var cols = 20; var board; var context; var snakeX = blockSize * 5; var snakeY = blockSize * 5; var velocityX = 0; var velocityY = 0; var snakeBody = []; var foodX; var foodY; var gameOver = false;Опять же, с учетом того, что наш проект – маленький, будет неплохой идеей начать разработку с самой главной функции, в ней написать всю последовательность действий, после чего уже реализовывать функции более низкого уровня (вызываемые этой главной функцией). Начинать функцию будем по триггеру window.onload, в самой функции будем: 1) захватывать канву; 2) задавать размеры игрового поля в пикселях; 3) размещать еду; 4) подключать listener для нажатия кнопки; 5) реализовывать игровую механику с обработкой по фреймам. Код:
window.onload = function() { board = document.getElementById("board"); board.height = rows * blockSize; board.width = cols * blockSize; context = board.getContext("2d"); placeFood(); document.addEventListener("keyup", changeDirection); // update(); setInterval(update, 1000/10); //100 milliseconds }1000/10 означает, что игра будет обновляться 10 раз в секунду, если хотите уменьшить/увеличить скорость – поиграйте с этим параметром.Шаг 2: размещаем еду, перехватываем нажатия клавиш
У нас есть 2 небольшие функции, которые можно реализовать прямо сейчас – размещение еды и нажатие клавиши. С размещением еды все очень просто:
function placeFood() { //(0-1) * cols -> (0-19.9999) -> (0-19) * 25 foodX = Math.floor(Math.random() * cols) * blockSize; foodY = Math.floor(Math.random() * rows) * blockSize; }Вызываем функцию генерации случайных чисел, через нее получаем номер блока, умножаем на ширину блока – получаем x и y новой еды.
С направлением все чуть сложнее:
function changeDirection(e) { if (e.code == "ArrowUp" && velocityY != 1) { velocityX = 0; velocityY = -1; } else if (e.code == "ArrowDown" && velocityY != -1) { velocityX = 0; velocityY = 1; } else if (e.code == "ArrowLeft" && velocityX != 1) { velocityX = -1; velocityY = 0; } else if (e.code == "ArrowRight" && velocityX != -1) { velocityX = 1; velocityY = 0; } }Мы считаем ускорение как смещение относительно текущей точки на координатной оси на 1 или -1 (1 – это вправо или вниз, -1 – влево или вверх). Мы анализируем ввод и для каждой стрелочки меняем ускорение тем или иным образом. Проверка после && в условии нужна для того, чтобы исключить случаи, когда, например, змейка движется вправо, а мы нажали стрелочку влево – если позволить змейке поменять направление движения таким образом, то она тут же наткнется сама на себя.
Поэтому мы проверяем, что нажата стрелочка влево и при этом змейка не движется вправо.Шаг 3: пишем основную функцию
В серьезных игровых движках, типа Unity и UE, функция update доступна для каждого элемента, и update исполняется каждый фрейм. Мы же хотим создать браузерную игру своими силами, поэтому используем
setInterval(update, 1000/10);context.fillStyle="black"; context.fillRect(0, 0, board.width, board.height); context.fillStyle="red"; context.fillRect(foodX, foodY, blockSize, blockSize); Теперь проверяем, находится ли голова змейки и еда на одной точке, если находится – еду нужно «съесть» и сгенерировать новую: if (snakeX == foodX && snakeY == foodY) { snakeBody.push([foodX, foodY]); placeFood(); }Теперь нам нужно решить проблему перемещения: каждый раз, когда змейка перемещается на блок куда-либо, ее тело должно перемещаться вместе с ней. Решается это просто – поскольку у нас все тело задано в массиве координатами каждого сегмента, нам нужно пройтись по всему массиву и сместить все элементы на 1, а нулевому элементу присвоить координаты головы в текущий момент:
for (let i = snakeBody.length-1; i > 0; i--) { snakeBody[i] = snakeBody[i-1]; } if (snakeBody.length) { snakeBody[0] = [snakeX, snakeY]; }Теперь реализовываем саму змейку:
context.fillStyle="lime"; snakeX += velocityX * blockSize; snakeY += velocityY * blockSize; context.fillRect(snakeX, snakeY, blockSize, blockSize); for (let i = 0; i < snakeBody.length; i++) { context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize); }Наконец, нужно задать условия окончания игры – если змейка столкнулась с концом экрана или если она укусила себя. Первое проверяется через сравнение координат головы с краями канвы, второе проверяется через сравнение координат головы с координатами каждого сегмента тела:
if (snakeX < 0 || snakeX > cols*blockSize -1 || snakeY < 0 || snakeY > rows*blockSize - 1) { gameOver = true; alert("Game Over"); } for (let i = 0; i < snakeBody.length; i++) { if (snakeX == snakeBody[i][0] && snakeY == snakeBody[i][1]) { gameOver = true; alert("Game Over"); } }Наконец, в самое начало функции нужно добавить проверку геймовера – если значение равно true, то нужно закончить игру и ничего больше не делать.
if (gameOver) { return; }Все, имеем полностью работоспособную игру.Шаг 4: тестируем
Все файлы нужно собрать в одной папке, после чего – открыть html-файл. Нажмите любую стрелочку – и увидите следующее:
Где взять гайды по разработке игр?
Какого-то универсального гайда по разработке игр нет – это все же творческий процесс, поэтому для разработки серьезных игр вам нужны сильные знания JavaScript и фантазия. Проще искать гайды по созданию конкретных игр и брать из этих гайдов идеи, после чего «пилить» свою собственную игру на основе этих идей. Вот вам парочка видеогайдов:
- Канал ChrisCourses – огромное количество длинных и детальных гайдов по разработке самых сложных игр (вплоть до RPG про Покемонов)
- Мультиплеерная игра на JavaScript с дополнительной библиотекой
- Простой гайд по созданию игры на русском языке
- Аналог Flappy Bird на JS
- Игра, код которой умещается в 100 символов
Вывод
- JS хорошо подходит для создания простых браузерных игр.
- Вы можете самостоятельно по гайдам создавать такие простые игры, как змейку, гонки, Aliens Invaders, PacMan и другие.
- Более сложные игры могут потребовать от вас пользоваться сторонними библиотеками.
- В любом случае вам нужно хорошо знать JS, без этих знаний вы не сможете разрабатывать игры самостоятельно.