Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Топ:
Оценка эффективности инструментов коммуникационной политики: Внешние коммуникации - обмен информацией между организацией и её внешней средой...
Отражение на счетах бухгалтерского учета процесса приобретения: Процесс заготовления представляет систему экономических событий, включающих приобретение организацией у поставщиков сырья...
Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...
Интересное:
Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...
Дисциплины:
 2020-04-03 |
 89 |
из
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-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!