Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
1.2 Методические рекомендации к самостоятельной работе студентов
HTML 5 – язык для структурирования и представления информации. Основная цель HTML 5 – улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется легкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т.д.).
HTML 5 – попытка определить единый язык разметки, который мог бы быть написан как и в HTML, так и в XHTML и был бы синтаксически корректен. Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.
На данный момент для встраивания интерактивного контента, наиболее популярной технологией является Adobe Flash. Однако большинство разработчиков отказываются от неё. Так, Apple отказался от поддержки соответствующего плагина в своём браузере Safari и операционной системе iOS, Microsoft отказывается от поддержки Flash плагина в своём браузере Internet Explorer 10, в Android Market Flash плагин имеет наименьшие оценки. Большинство разработчиков заявляют, что наибольшее число feedback о ненормальном прекращении работы их продуктов связано именно с плагином Adobe Flash.
HTML5 имеет следующие преимущества по сравнению с Adobe Flash:
Під час підготовки до лабораторної роботи необхідно ознайомитися з конспектом лекцій та матеріалами, які наведено у літературних джерелах [1–5].
При выполнении лабораторной работы необходимо реализовать игровое приложение, тематику которого задает преподаватель. Примеры заданий для лабораторной работы приведены в разделе 1.4. Ниже рассмотрен порядок выполнения лабораторной работы на тему «Игра змейка».
При работе с медиаконтентом следует помнить, что браузер может воспроизводить только медиа, закодированное строго ограниченным набором кодеков, среди которых:
Аудиокодеки:
Видеокодеки:
Так же, не следует забывать, что определённые браузеры могут воспроизводить контент, закодированный строго определёнными кодеками.
Для работы с медиаконтентом в HTML5 используются теги: <audio>… </audio> для работы с аудио контентом и <video>…</video> для работы с видео контентом. Данный тег указывает браузеру необходимость создания контрола для работы с соответствующим контентом. Пример контролов, генерируемых браузером Google Chrome, представлены на рисунках 1.1 – 1.2.
Рисунок 1.1 – Контрол для работы с аудио контентом
Рисунок 1.2 – Контрол для работы с видео материалом (отображается клип на композицию БИ-2 – «Оптимист»)
Данные теги принимают ряд необязательных параметров:
Как уже было замечено ранее, разные браузеры поддерживают разные наборы кодеков. Для создания контента, который будет воспроизводиться одинаково во всех браузерах, используется тег <source>…</source>, который вкладывается внутрь основного тега. Теги <source> рассматриваются браузером последовательно сверху-вниз до момента, пока не встретится первый источник, который может быть воспроизведён. Если не встретится контент, который закодирован кодеком, который понимается браузером, – воспроизведение начато не будет.
Тег <source> получает следующие параметры:
Образец использования тега <source>:
<source src='video.ogv' type='video/ogg;
codecs="theora, vorbis"'>
Для работы с контентом используются следующие js – функции:
Для анализа текущего состояния воспроизводимого контента используются следующие readonly-параметры:
Для управления состоянием воспроизведения контента, используются следующие параметры:
Рассмотрим отображение 2D элементов на странице. Для работы с графикой используется элемент canvas. Элемент canvas впервые предложен корпорацией Apple в 2004 году, и использовался для создания дополнений к браузеру. На сегодняшний день canvas поддерживается во всех основных браузерах.
Для встраивания элемента используется тег <canvas>…</canvas>, он рассматривается браузером, и имеет такие же параметры, как и любой другой блочный элемент. Для работы с данным элементом используется язык JavaScript. Для проверки поддержки используется следующий код:
canvas = document.getElementById('canvas');
if (canvas.getContext) {//Canvas поддерживается }
else {//Canvas не поддерживается }
Все объекты, рисуемые на canvas, отрисовываются на объекте RenderingContext. Для получения доступа к нему вызывается функция getContext('2D'), у элемента. Никакие другие параметры, кроме 2D пока не предусмотрены, однако в будущем это должно измениться. Далее все рассматриваемые методы и параметры вызываются у объекта context, если не указано другое.
Создание примитивов на элементе требует выполнения ряда операций:
Таким образом, для отображения линии, необходимо указать следующй код:
canvas = document.getElementById('canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(10, 20);
context.lineTo(150, 100);
context.stroke();
}
else{alert('Canvas is not supported');}
Результат работы данного кода изображён на рисунке 1.3.
Также, canvas поддерживает работу с кривыми линиями. Поддерживаются следующие кривые:
Рисунок 1.3 – Результат отображения кода
Рисунок 1.4 – Построение
кривой Безье
Рисунок 1.5 – Построение
квадратической кривой
context.moveTo(75,25);
context.quadraticCurveTo(25,25,25,62.5);
context.quadraticCurveTo(25,100,50,100);
context.quadraticCurveTo(50,120,30,125);
context.quadraticCurveTo(60,120,65,100);
context.quadraticCurveTo(125,100,125,62.5);
context.quadraticCurveTo(125,25,75,25);
context.stroke();
Результат приведенного фрагмента рисования приведено на рисунке 1.6.
Рисунок 1.6 – Отображение результата приведенного фрагмента рисования
Рисунок 1.7 – Построение дуги
Все фигуры, которые Были построены до текущего момента, имели один стиль отображения. Для изменения стиля нарисованных элементов объект context элемента canvas имеет следующие параметры:
Рисунок 1.8 – Типы соединения линий
Помимо работы с каркасными фигурами, можно заливать заданным цветом необходимые области экрана. Для этого используются функции:
Для определения цвета заливки используется параметр fillStyle.
Помимо работы с фигурами заданного цвета, элемент canvas позволяет работать с уже готовыми изображениями. Для отображения изображения используется функция drawImage(image, x, y, width, height), которая отображает изображение image, в прямоугольнике с шириной width и высотой height, в точке (x, y). До вызова этой функции изображение уже должно быть полностью загружено. Однако загрузка изображения выполняется асинхронно, поэтому перед вызовом данной функции делают следующую проверку:
var image = new Image();
image.src = 'image.jpg';
image.onload = function(){drawImage(image,5,10, 100, 100);}
Изображения могут быть использованы в качестве шаблонов, для отрисовки фигур. Для этого загруженное изображение надо преобразовать с помощью функции createPattern(image, repeat), где image –рисунок, repeat – тип повторения. Доступны следующие типы повторения изображения:
Далее полученный шаблон необходимо передать в параметр strokeStyle или fillStyle, в зависимости от целей применения.
Также canvas предоставляет методы, для работы с градиентом. Поддерживаются 2 типа градиентов:
Рисунок 1.9 – Линейный градиент
Рисунок 1.10 – Радиальный градиент
Для указания цветов градиента, у этого объекта существует метод addColorStop(gradientPart, color), где gradientPart – часть градиента, которая представляется, как число с плавающей точкой от 0 (начало градиента), до 1 (конец градиента), color – цвет в указанной точке. Далее объект градиент передаётся параметру strokeStyle или fillStyle, в зависимости от целей.
var canvas = document.getElementById('picture');
var context = canvas.getContext('2d');
var grad = context.createLinearGradient(150,0,150,150);
grad.addColorStop(0,'rgb(255, 0, 0)');
grad.addColorStop(0.5,'rgb(0, 255, 0)');
grad.addColorStop(1,'yellow');
context.fillStyle = grad;
context.fillRect(0,0,150,150);
Элемент canvas предоставляет готовые решения для работы с тенью элементов, для этого у элемента context, предусмотрены параметры:
Работа с созданием примитивов, в неявном виде представляет собой работу с геометрическими преобразованиями изображений, однако, можно и явно преобразовывать объекты. Данные функции, напоминают преобразование объектов в OpenGL. Рассмотрим их:
Помимо, работы с элементами с помощью заданных функций, можно работать напрямую с пикселями изображений. Для получения информации о них, вызывается функция getImageData(x, y, width, height). Данная функция возвращает объект типа ImageData, который имеет следующие параметры:
R = ((width * y) + x) * 4
G = (((width * y) + x) * 4) + 1
B = (((width * y) + x) * 4) + 2
Alpha = (((width * y) + x) * 4) + 3
Обработав пиксели изображения, необходимо вставить его в элемент canvas. Для этого используем функцию putImageData(imageData, dx, dy), где imageData – информация о пикселях изображения; dx, dy – координаты точки, куда встраиваем выбранную часть изображения.
Помимо работы с изображением canvas предоставляет функционал для работы с текстом. Для встраивания текста, используются функции:
где text – отображаемый текст; x, y – координаты точки, куда встраиваем текст; maxWidth – максимальная ширина объекта текста.
Для управления текстом у элемента context предусмотрены следующие параметры:
Рисунок 1.11 – Выравнивание относительно точки встраивания
Рисунок 1.12 – Варианты базовой линии текста
В качестве задания создадим простейшую игру змейка, для этого необходимо сделать следующие шаги:
– создать форму, для отображения игры;
– создать переменные для определения состояния змейки и основных констант;
– создать функции для отображения змейки;
– создать функции для основной логики игры;
– создать основной игровой цикл;
– обеспечить взаимодействие с пользователем;
– добавить медиа-контент;
– проинициализировать игру.
Для начала создадим форму, на которой будет отображаться игра:
<!doctype html>
<head>
<title>Snake</title>
</head>
<body onload="init()">
<input type="button" value="Play/Pause"
onclick="play()"><br />
<canvas id="canvas" style="border: solid 1px red;"
width="600" height="600">
</canvas>
</body>
Создадим основные внешние переменные, используемые для написания скрипта (создаются в теге <script>…</script>):
var bckColor = "rgb(0, 255, 255)";
var snakeColor = "rgb(0, 0, 0)"; //Цвет змейки
var foodColor = "rgb(0, 255, 0)"; //Цвет еды змейки
var ctx; //Объект context
var gridSize = 20; //Размер клетки
var snake; //Очередь элементов змейки
var food = []; //Координаты еды змейки
var direction; //Направление змейки
var changex = [-1, 0, 1, 0]; //Изменение координаты x в
//зависимости от направления
var changey = [0, -1, 0, 1]; //Изменение координаты y в
//зависимости от направления
var paused; //Состояние игры
var speed = 100; //Скорость перемещения змейки
var clock; //Объект таймера
Создадим функции отрисовки элементов:
function drawSnake(){
ctx.fillStyle = snakeColor;
ctx.fillRect(snake[snake.length - 1][0] * gridSize, snake[snake.length - 1][1] * gridSize, gridSize, gridSize);
}
function drawFood(){
ctx.fillStyle = foodColor;
ctx.fillRect(food[0] * gridSize, food[1] * gridSize, gridSize, gridSize);
}
function delPart(x, y){
ctx.fillStyle = bckColor;
ctx.clearRect(x * gridSize, y * gridSize, gridSize,
gridSize);
}
Создадим функцию принадлежности точки телу змейки.
function dotBelongSnake(x, y){
res = false;
for(i = 0; i < snake.length && !res; ++i)
res = x == snake[i][0] && y == snake[i][1];
return res;
}
Создадим функции добавления элементов, на поле.
function setX(x)
{
return x >= 0 ? x % (ctx.canvas.width / gridSize) : x +
(ctx.canvas.width / gridSize);
}
function setY(y)
{
return y >= 0 ? y % (ctx.canvas.height / gridSize) : y + (ctx.canvas.height / gridSize);
}
function addFood(){
do
{
food[0] = Math.floor(Math.random() *
(ctx.canvas.height / gridSize));
food[1] = Math.floor(Math.random() *
(ctx.canvas.height / gridSize));
}while(dotBelongSnake(food[0], food[1]));
drawFood();
}
Создадим функцию проверки змейки на столкновение.
function crash(){
res = false;
for(i = 0; i < snake.length - 1 && !res; ++i)
{
res = snake[i][0] == snake[snake.length - 1][0] &&
snake[i][1] == snake[snake.length - 1][1];
}
return res;
}
Создадим функцию управления состоянием игры.
function play(){
if(paused) clock = setInterval(movement, speed);
else clearInterval(clock);
paused = !paused;
}
Создадим основной игровой цикл.
function movement(){
snake.push([setX(snake[snake.length - 1][0] + changex[direction]), setY(snake[snake.length - 1][1] + changey[direction])])
if(!dotBelongSnake(food[0], food[1]))
{
delPart(snake[0][0], snake[0][1]);
snake.shift();
}
else
addFood();
if(crash())
{
play();
alert("Game Over;");
clear();
init();
}
drawSnake();
}
Создадим функцию управления игрой.
function changeDirection(event)
{
if(!paused)
{
code = 0
if(event == null) code = window.event.keyCode;
else code = event.keyCode;
switch(code)
{
case 37: if(direction != 2) direction = 0;
break;
case 38: if(direction != 3) direction = 1;
break;
case 39: if(direction != 0) direction = 2;
break;
case 40: if(direction != 1) direction = 3;
break;
}
}
}
Создадим функцию инициализации игры.
function init()
{
canvas = document.getElementById('canvas');
if (canvas.getContext)
{
snake = [[0, 0]];
direction = 2;
paused = true;
ctx = canvas.getContext('2d');
document.onkeydown =
function (event){changeDirection(event);};
addFood();
return true;
}
else
{
alert("Canvas isn’t supported!");
return false;
}
}
1.5 Выводы
В ходе выполнения лабораторной работы студенты ознакомились с особенностями разработки игровых приложений с помощью HTML 5, освоили основные составные части и функции, принципы разработки приложений с помощью технологии HTML 5, используемой в Интернет.