2. ПРИЕМУЩЕСТВА HTML5 ПЕРЕД FLASH
• Открытость платформы
• Чистая веб-технология
• Более высокие надѐжность, производительность и безопасность
• Более низкое энергопотребление
• Поддержка управления, с помощью сенсорных экранов
2
5. ОБЪЯВЛЕНИЕ ЭЛЕМЕНТА <CANVAS>
• Для объявления используется тег <canvas></canas>
<canvas>
Your browser doesn’t support canvas element
</canvas>
canvas = document.getElementById('canvas');
if (canvas.getContext)
{ //Canvas поддерживается
}
else
{ //Canvas не поддерживается
}
5
6. СОЗДАНИЕ ПРИМИТИВОВ
• beginPath()
• moveTo(x, y)
• lineTo(x, y)
• stroke()
var canvas = document.getElementById(canvas);
var context = canvas.getContext(‘2d’);
context.beginPath();
context.moveTo(10, 20);
context.lineTo(20, 30);
context.stroke();
6
9. РАБОТА С ЦВЕТОМ
• fillStyle
• fillRect(x, y, width, height)
• clearRect(x, y, width, height)
9
10. РАБОТА С ГОТОВЫМ ИЗОБРАЖЕНИЕМ
• drawImage(image, x, y, width, height)
var image = new Image();
image.src = ‘image.jpg’;
image.onload = function()
{
drawImage(image, 5, 10, 100, 100);
}
10
14. РАБОТА С ТЕКСТОМ
• textAlign
• font
• textBaseLine
• strokeText(text, x, y, maxWidth)
• fillText(text, x, y, maxWidth)
context.textAlign = ‘center’;
context.font = ‘Arial’;
context.strokeText(‚Hello world!‛, 0, 0, 300);
14
15. РАБОТА С ТЕНЬЮ
• shadowColor
• shadowOffsetX
• shadowOffsetY
• shadowBlur
15
16. РАБОТА С ПИКСЕЛЯМИ ИЗОБРАЖЕНИЯ
• getImageData(x, y, width, height)
• width
• height
• data
R = ((width * y) + x) * 4
G = (((width * y) + x) * 4) + 1
B = (((width * y) + x) * 4) + 2
Alpha = (((width * y) + x) * 4) + 3
• putImageData(imageData, dx, dy)
16
17. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
СОЗДАНИЕ ФОРМЫ
<!doctype html>
<head>
<title>Snake</title>
<script type="text/javascript" src="snake.js"></script>
</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>
17
18. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
ОБЪЯВЛЕНИЕ ПЕРЕМЕННЫХ
var snakeColor = "rgb(0, 0, 0)";
var bckColor = "rgb(255, 255, 255)";
var foodColor = "rgb(0, 255, 0)";
var ctx;
var gridSize = 20;
var snake;
var food = [];
var direction;
var changex = [-1, 0, 1, 0];
var changey = [0, -1, 0, 1];
var paused;
var speed = 100;
var clock;
18
19. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
ОТРИСОВКА ЭЛЕМЕНТОВ
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);
}
19
20. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
ПРОВЕРКА НА ПРИНАДЛЕЖНОСТЬ
ТОЧКИ ТЕЛУ ЗМЕЙКИ
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;
}
20
21. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
ДОБАВЛЕНИЕ ЭЛЕМЕНТОВ
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();
} 21
22. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
ПРОВЕРКА НА СТОЛКНОВЕНИЕ
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;
}
22
23. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
УПРАВЛЕНИЕ СОСТОЯНИЕМ ИГРЫ
function play()
{
if(paused)
{
clock = setInterval(movement, speed);
}
else
{
clearInterval(clock);
}
paused = !paused;
}
23
24. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
ОСНОВНОЙ ИГРОВОЙ ЦИКЛ
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();
} 24
25. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
УПРАВЛЕНИЕ
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; 25
case 39:
26. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».
ИНИЦИАЛИЗАЦИЯ
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;
}
}
26
28. СПИСОК ИСТОЧНИКОВ
• http://evolutionofweb.appspot.com
• http://caniuse.com
• http://www.apple.com/hotnews/thoughts-on-flash/
• Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов
28