В этой статье будет рассказываться как сделать Пинг понг на JavaScript с использованием технологии canvas, если вы хотите начать разрабатывать игры на JS, то обязательно прочитайте.
Также если вы не работали в canvas, то посмотрите эти статьи:
- Canvas HTML. Основы создания фигур на javascript;
- Canvas анимация на JavaScript, простыми словами и без воды;
HTML:
Про HTML нечего говорить, просто там подключаешь JS файл и пишем canvas тег.
1 2 3 | <h1>Пейнбол на Canvas JS</h1> <canvas class="canvas" id="canvas" width="800" height="500"></canvas> <script src="script.js"></script> |
JavaScript:
Вот c javaScript всё по интереснее, с начала подключаем canvas элемент и назначаем ему работу с 2D.
1 2 3 4 | // Берём элемент canvas let canvas = document.getElementById("canvas"); // Назначаем тип рисования 2D let ctx = canvas.getContext('2d'); |
Базовый код:
После этого создаём две функции, одна будет отвечать за прорисовку шарика, вторая будет прорисовывает блок, от которого будет отскакивать шарики.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Создание функции отображения шарика function circle (pos_x, pos_y, radius, color) { // Назначение цвет круга ctx.fillStyle = color; // Начала рисования ctx.beginPath(); // Рисуем круг ctx.arc(pos_x, pos_y, radius, 0, Math.PI*2, true); // Закрашиваем круг ctx.fill(); } // Создание функции отображения блока function block (pos_x, pos_y, width, height, color) { // Назначаем цвет для блока ctx.fillStyle = color; // Рисуем блок ctx.fillRect(pos_x, pos_y, width, height); } |
Если вы читали статью про создания фигур, то вам должно быть всё понятно, единственное, что нужно сказать, это какие параметры мы передаём функциям.
Первые параметры, это «pos_x» и «pos_y», они назначают позицию по X и Y соответственно.
Дальше идут параметры которые задаёт размер фигуры, если говорим про круг, то задаётся радиус круга, если говорить про блок, то там задаются ширина и высота, а в конце у обоих задаётся цвет.
Как будет работать игры:
Логика работы очень проста, у нас две переменные, которые будут отвечать за направление шарика, к примеру, если переменная которая отвечает за направление верх вниз, будет равна «true», то переменная которая отвечает за позицию по Y, будет уменьшатся на один, тем самым шарик двигаться верх, соответственно, если значение будет «false», то позиция по Y будет увеличиваться, и двигается он вниз, точно также и с направление влево, вправо.
Переменный которые отвечают за позицию, будут использоваться при рисование объекта, это касается как и шарика, так и блока.
В принципе, больше особо нечего говорить, поэтому держите код.
1 2 3 4 5 6 7 8 9 10 | // Переменные для позиции шарика let x_circle = 30, y_circle = 250; // Переменные для направления шарика let move_right = true, move_top = true; // Переменные для размера блока let y_block = 200, height_block = 100; // счёт let score = 0; |
Ну тут всё понятно, единственное, зачем же нужна переменная которая задаёт высоту блоку?
Она нужна, во первых, для проверки, чтобы блок не ушёл за пределы поля, во вторых, для проверки, того, что шарик ударился об блок.
1 2 3 4 5 6 7 8 | // Запускаем обработчик события нажатия клавиш document.addEventListener('keydown', function(event) { if (event.code == "ArrowDown" && y_block + height_block !== 500) { y_block += 5; } else if (event.code == "ArrowUp" && y_block != 0) { y_block -= 5; } }); |
Тут мы отслеживаем событие нажатия на клавишу, в условиях проверяется какая клавиши нажата, если нажата стрелка вверх или вниз, то соответственно, блок будет двигаться вверх и вниз, за счёт уменьшение, увеличение, позиции Y.
Также проверяется, что бы блок не выходил ха приделы игрового поля.
1 2 3 | let playGame = setInterval(function () { ... }, 10) |
Дальше уже идет «setInterval», айдишник интервала присваиваем переменной «playGame», это нужно для того, что бы когда не успеем поймать шарик, интервал сразу выключался.
Теперь самое интересное, это что у нас внутри интервала.
1 2 3 4 5 6 7 8 9 10 | // Удаление всего с поля ctx.clearRect(0, 0, 800, 500); // Проверка что шарик столкнулся с блоком if (y_circle >= y_block && y_circle <= y_block + height_block && x_circle == 725) { // Меняем направление шарика move_right = false; // Увеличиваем счёт score++; } |
Как вы можете видеть, с начала мы стираем абсолютно всё, что есть на игровом поле, после этого идёт проверка сталкивания шарика с блоком, для этого используем позицию блока и его высоту и смотрим, если Y шарика больше или равен Y блока и в тоже время Y шарика меньше или равен Y блока плюс его высота, ну и конечно, идёт проверка того, что позиция шарика по X равна позиции блока, если всё верно, то шарик меняет направление и увеличивается счёт на один.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Проверка столкновения с верху if (y_circle - 25 == 0) { // Меняет направление вниз move_top = false; // Проверка столкновения с низу } else if (y_circle + 25 == 500) { // Меняем направление вверх move_top = true; } // Проверка столкновения с лева if (x_circle - 25 == 0) { Меняет направление в право move_right = true; } |
Здесь проверяется сталкивается ли шарик с границами, число 25, это радиус шарика, оно нужно, что бы шарики не выходил за пределы границ, после проверки условия меняем значение направления.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // Проверка что идёт направление шарика в право if (move_right == true) { // Увеличиваем позицию шарика по X x_circle++; } else { // Иначе // Уменьшаем позицию шарика по X x_circle--; } // Проверка что направление шарика в верх if (move_top == true) { // Уменьшаем позицию шарика по Y y_circle--; } else { // Увеличиваем позицию шарика по Y y_circle++; } |
Теперь идёт код, который отвечает за направление шарика, рассмотрим первое условие, если переменная «move_right» равна true, то позиция будет увеличиваться на, соответственно, шарик двигается на право, иначе, позиция будет уменьшатся, то есть шарик будет двигаться влево, примерно также и с направлением в верх и в вниз.
1 2 3 4 5 6 7 8 9 10 11 12 | // Рисуем шарик circle(x_circle, y_circle, 25, "red"); // Рисуем блок block(750, y_block, 25, height_block, "green"); // Условие для закачивания игры if ((y_circle <= y_block || y_circle >= y_block + height_block) && x_circle > 725) { // Остановка таймера clearInterval(playGame); // Вывод счёта alert("Ваш счёт: " + score); } |
Это последняя часть кода, в начале мы рисуем наши фигуры, потом идёт проверка того, не нет ли столкновения, если верно, то таймер выключается и выводит счёт.
на этом программа заканчивается.
Вывод:
В этой статье мы делали пинг понг на JavaScript, как видите программа очень простая, но и рассчитана она для новичков, также эту игру можно ещё много улучать, то что тут показывается ещё очень не совершенно, но это вы сам уже сделаете.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,20
Загрузка...