Javascript пинг понг создаём игру с использованием canvas

Javascript пинг понг создаём игру с использованием canvas
Метки: / /

В этой статье будет рассказываться как сделать Пинг понг на JavaScript с использованием технологии canvas, если вы хотите начать разрабатывать игры на JS, то обязательно прочитайте.

Также если вы не работали в canvas, то посмотрите эти статьи:

HTML:

Про HTML нечего говорить, просто там подключаешь JS файл и пишем canvas тег.

JavaScript:

Вот c javaScript всё по интереснее, с начала подключаем canvas элемент и назначаем ему работу с 2D.

Базовый код:

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

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

Первые параметры, это «pos_x» и «pos_y», они назначают позицию по X и Y соответственно.

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

Как будет работать игры:

Логика работы очень проста, у нас две переменные, которые будут отвечать за направление шарика, к примеру, если переменная которая отвечает за направление верх вниз, будет равна «true», то переменная которая отвечает за позицию по Y, будет уменьшатся на один, тем самым шарик двигаться верх, соответственно, если значение будет «false», то позиция по Y будет увеличиваться, и двигается он вниз, точно также и с направление влево, вправо.

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

В принципе, больше особо нечего говорить, поэтому держите код.

Ну тут всё понятно, единственное, зачем же нужна переменная которая задаёт высоту блоку?

Она нужна, во первых, для проверки, чтобы блок не ушёл за пределы поля, во вторых, для проверки, того, что шарик ударился об  блок.

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

Также проверяется, что бы блок не выходил ха приделы игрового поля.

Дальше уже идет «setInterval», айдишник интервала присваиваем переменной «playGame», это нужно для того, что бы когда не успеем поймать шарик, интервал сразу выключался.

Теперь самое интересное, это что у нас внутри интервала.

Как вы можете видеть, с начала мы стираем абсолютно всё, что есть на игровом поле, после этого идёт проверка сталкивания шарика с блоком, для этого используем позицию блока и его высоту и смотрим, если Y шарика больше или равен Y блока и в тоже время Y шарика меньше или равен Y блока плюс его высота, ну и конечно, идёт проверка того, что позиция шарика по X равна позиции блока, если всё верно, то шарик меняет направление и увеличивается счёт на один.

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

Теперь идёт код, который отвечает за направление шарика, рассмотрим первое условие, если переменная «move_right» равна true, то позиция будет увеличиваться на, соответственно, шарик двигается на право, иначе, позиция будет уменьшатся, то есть шарик будет двигаться влево, примерно также и с направлением в верх и в вниз.

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

на этом программа заканчивается.

Вывод:

В этой статье мы делали пинг понг на JavaScript, как видите программа очень простая, но и рассчитана она для новичков, также эту игру можно ещё много улучать, то что тут показывается ещё очень не совершенно, но это вы сам уже сделаете.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Количество оценивших: 5
Средняя оценка: 4,20
Загрузка...

Поделится:

Также рекомендую: