Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...
Топ:
Определение места расположения распределительного центра: Фирма реализует продукцию на рынках сбыта и имеет постоянных поставщиков в разных регионах. Увеличение объема продаж...
Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...
Выпускная квалификационная работа: Основная часть ВКР, как правило, состоит из двух-трех глав, каждая из которых, в свою очередь...
Интересное:
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...
Принципы управления денежными потоками: одним из методов контроля за состоянием денежной наличности является...
Дисциплины:
 2020-04-03 |
 116 |
из
5.00
|
Заказать работу |
Содержание книги
Поиск на нашем сайте
|
|
|
|
На рисунке 9 показана отправная точка игры, где просто вырисовывается фон, платформы и бегун. Сначала платформы и бегун не являются спрайтами; игра вырисовывает их непосредственно. См. раздел Загрузка с кодом, который создает фон и бегуна.
Рисунок 9. Изображение фона и бегуна
В листинге 3 приведена отправная точка HTML-кода игры, который представляет собой просто усеченную версию HTML-кода из листинга 2.
Листинг 3. game.html (начальная версия)
| <!DOCTYPE html><html> <!-- Head.........................................................--> <head> <title>Snail Bait</title> <link rel='stylesheet' href='game.css'/> </head> <!-- Body.........................................................--> <body> <!-- Wrapper...................................................--> <div id='wrapper'> <!-- Header.................................................--> <div id='header'> <div id='score'>0</div> </div> <!-- Arena..................................................--> <div id='arena'> <!-- The game canvas.....................................--> <canvas id='game-canvas' height='400'> Your browser does not support HTML5 Canvas. </canvas> </div> </div> <!-- JavaScript................................................--> <script src='game.js'></script> </body></html> |
В листинге 4 показан код JavaScript.
Листинг 4. game.html (начальная версия)
| // --------------------------- ОБЪЯВЛЕНИЯ ---------------------------- var canvas = document.getElementById('game-canvas'), context = canvas.getContext('2d'), // Константы............................................................ PLATFORM_HEIGHT = 8, PLATFORM_STROKE_WIDTH = 2, PLATFORM_STROKE_STYLE = 'rgb(0,0,0)', STARTING_RUNNER_LEFT = 50, STARTING_RUNNER_TRACK = 1, // Проведение исходных линий // // Платформы двигаются вдоль дорожек. Следующие константы определяют координату // Y каждой дорожки (от верхней границы холста). TRACK_1_BASELINE = 323, TRACK_2_BASELINE = 223, TRACK_3_BASELINE = 123, // Изображения background = new Image(), runnerImage = new Image(), // Платформы // // У каждой платформы свой собственный стиль заливки, но стиль контура одинаков. platformData = [ // Экран пока один // Экран 1....................................................... { left: 10, width: 230, height: PLATFORM_HEIGHT, fillStyle: 'rgb(255,255,0)', opacity: 0.5, track: 1, pulsate: false, }, { left: 250, width: 100, height: PLATFORM_HEIGHT, fillStyle: 'rgb(150,190,255)', opacity: 1.0, track: 2, pulsate: false, }, { left: 400, width: 125, height: PLATFORM_HEIGHT, fillStyle: 'rgb(250,0,0)', opacity: 1.0, track: 3, pulsate: false }, { left: 633, width: 100, height: PLATFORM_HEIGHT, fillStyle: 'rgb(255,255,0)', opacity: 1.0, track: 1, pulsate: false, }, ]; // ------------------------- ИНИЦИАЛИЗАЦИЯ ---------------------------- function initializeImages() { background.src = 'images/background_level_one_dark_red.png'; runnerImage.src = 'images/runner.png'; background.onload = function (e) { startGame(); };} function drawBackground() { context.drawImage(background, 0, 0);} function calculatePlatformTop(track) { var top; if (track === 1) { top = TRACK_1_BASELINE; } else if (track === 2) { top = TRACK_2_BASELINE; } else if (track === 3) { top = TRACK_3_BASELINE; } return top;} function drawPlatforms() { var pd, top; context.save(); // Сохранение атрибутов контекста в стеке for (var i=0; i < platformData.length; ++i) { pd = platformData[i]; top = calculatePlatformTop(pd.track); context.lineWidth = PLATFORM_STROKE_WIDTH; context.strokeStyle = PLATFORM_STROKE_STYLE; context.fillStyle = pd.fillStyle; context.globalAlpha = pd.opacity; // Если изменить порядок следующих двух вызовов, то контур будет казаться толще. context.strokeRect(pd.left, top, pd.width, pd.height); context.fillRect (pd.left, top, pd.width, pd.height); } context.restore(); // Восстановление атрибутов контекста} function drawRunner() { context.drawImage(runnerImage, STARTING_RUNNER_LEFT, calculatePlatformTop(STARTING_RUNNER_TRACK) - runnerImage.height);} function draw(now) { drawBackground(); drawPlatforms(); drawRunner();} function startGame() { draw();} // Запуск игры initializeImages(); |
Сценарий JavaScript обращается к элементу canvas и получает ссылку на 2D-контекст холста. Затем код использует метод контекста drawImage() для рисования фона и бегуна. В данном случае я использую вариант с тремя аргументами метода drawImage(), чтобы нарисовать изображения в определенном месте холста (x, y).
Функция drawPlatforms() изображает платформы, вырисовывая и заполняя прямоугольные контуры после установки ширины линии, стиля обводки, стиля заливки и глобального альфа-атрибута контекста. Обратите внимание на вызовы методов context.save() и context.restore(): настройки атрибутов между этими вызовами ― временные. Мы поговорим об этих методах в следующей статье.
Игра начинается, когда загружается фоновое изображение. Пока запуск влечет за собой только вырисовывание фона, спрайтов и бегуна. Следующая задача ― вызвать эти статические изображения к жизни.
В начало
В следующей статье
Следующую статью этого цикла я начну с обзора 2D-API контекста холста, а затем расскажу об анимации и приведении предметов в движение при помощи прокрутки фона. Вы увидите, как реализовать параллакс, чтобы платформа казалась ближе, чем фон, и как сделать так, чтобы спрайты двигались с постоянной скоростью независимо от частоты кадров анимации. До скорой встречи.
В начало
Загрузка
| Описание | Имя | Размер | Метод загрузки |
| Код фона и персонажа Snail Bait | j-html5-game1.zip | 718 КБ | HTTP |
Информация о методах загрузки
Ресурсы
Об авторе
Дэвид Гири (David Geary), автор книги Core HTML5 Canvas, является также сооснователем группы пользователей HTML5 Денвера и автором восьми книг по Java-программированию, в том числе бестселлеров по Swing и JavaServer Faces. Дэвид часто выступает на конференциях, в том числе JavaOne, Devoxx, Strange Loop, NDC и OSCON, и трижды заслужил титул "рок-звезды JavaOne". Для developerWorks он написал циклы статей JSF 2 fu и GWT fu. За новостями Дэвида можно следить в Twitter: @davidgeary.
|
|
|
Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...
© cyberpedia.su 2017-2026 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!
