Игра на HTML5 — Заготовка для любой игры

Автор Nadezhda Belousova
Игра на HTML5 — Заготовка для любой игры

Всем привет в этом уроке вы допишем заготовку для создания любой игры на html5 с использованием двумерного контекста этот ролик.

Я записываю целиком на импровизации писать код через программу Visual Studio Code создание новый файл — это будет яндекс.. И, что теперь нужно сделать каркас. Сделай вывод по шаблону добавим элемент canvas ему вот — это сообщение вылезет если браузер использовать не поддерживает элемент canvas создадим ещё один файл в нём будет скрипт игры для проверки.

Выведи на экран сообщение теперь этот скрипт нужно подключить к нашему html-файла для этого блоки Head напишем вот эту строчку.

Всё теперь если мы перейдём в папку с проектом и открою вот этот файл то у нас появится сообщение. Приветствую вас наш скрипты убираем в — это сообщение теперь нам нужно найти элемент canvas и что-нибудь на нём нарисовать объявляем переменную для хранения объекта canvas просим документ свернуть нам этот элемент вы знаем его айтишник Game поэтому аргумента функция принимает такое значение теперь объявить переменную для хранения контекста. Обращаемся К объекту canvas или просим вернуть контекста у k2so есть два разных контекста грубо говоря один называется 2D, а другой век был в более информацию вы можете найти в интернете мы будем использовать 2D. Давайте посмотрим какие значения будут принимать эти переменные скажу сразу, что перемен всё-таки будет пустые если ваш браузер Firefox нажимаем F12 появляется инструменты разработчика переходим во вкладку консоль. И теперь я обновляю страницу. У нас в ошибка, что canvas пустой, но как же так. Ведь объекта нас есть, а он говорит, что он пустой, а потому, что скрипт выполняется, тогда когда ещё страница не загрузилась нам нужно. Добавить обработчик события которое вызывается. После загрузки страницы пишем Window onload теперь в этот блок кода вставляем то, что мы писали ранее только нам нужно объявить все эти перемены в начале года всё. Теперь попробуем обновить страницу всё ошибок нет и она в конце ли выводятся нужные элементы с отладкой. Мы закончили. А теперь давайте. Нарисуем прямоугольник для этого мы. Обращаемся к тексту и вызываем Method react. Ну и напишем координаты от балды 1 указывает на позицию по X и Y у. Ну допустим с тобой 505. А дальше у нас идёт ширина и высота. Я обычно делаю. Вот так за цвет заливки отвечает. Вот — это свойство допустим прямоугольник у нас будет красный теперь чтобы прямоугольник отобразилось на экране нужно вызвать метод Fill. Посмотрим, что получилось на экране у нас от обратился квадрат красного цвета. Теперь давайте сделаем так чтобы прямоугольник. Ладно двигался. В какую сторону для этого объявив новую функцию назовём её render перенесём код прорисовки в эту функцию теперь попросят браузер запланировать прорисовку нового кадра объявить переменную для хранения координат прямоугольника по сути — это будет в двумерный массив после создания контекста мы присвоим ему нулевые значения X и Y теперь там где мы рисуем прямоугольник. Теперь будем рисовать прямоугольник по вот этим координатам координате X мы будем прибавлять какое-то значение допустим — это будет единичка в теории вот этот прямоугольник должен двигаться если мы обновим страницу то ничего не произойдет, а всё потому, что вот этот метод спрашивает браузер когда его можно будет нарисовать кадр для того чтобы браузер рисовал кадр за кадром нужно после этого метода ещё раз вызвать этот же метод. Почему когда 100 квадратов появился прямоугольника. А всё потому, что — это не прямоугольник, а куча квадратов наложенных друг на друга перед прорисовкой новая кадра нужно убрать то, что мы нарисовали до этого для этого служит такой метод как леорик вот он принимает 4 параметра также как и methotrexate задаем координаты и ширину и высоту объекта. Котлас Кстати надо ещё вызвать который сбрасывает текущий контур и начинает рисовать новый без него очистка. Не сработает обновляем страницу почему кубики сейчас спросила, а всё потому, что элемент canvas имеет по умолчанию небольшой размер растением этот элемент на всё окно буду очень рад новым подписчикам. Спасибо за внимание.

0 комментариев
0

Читайте также