СОЗДАНИЕ HTML ИГР НА ЭЛЕМЕНТЕ CANVAS. ПРИЕМУЩЕСТВА HTML5 ПЕРЕД FLASH 2 Открытость платформы Чистая веб-технология Более высокие надёжность, производительность. - презентация

1 СОЗДАНИЕ HTML ИГР НА ЭЛЕМЕНТЕ CANVAS

2 ПРИЕМУЩЕСТВА HTML5 ПЕРЕД FLASH 2 Открытость платформы Чистая веб-технология Более высокие надёжность, производительность и безопасность Более низкое энергопотребление Поддержка управления, с помощью сенсорных экранов

3 ИСТОРИЯ HTML5 3

4 ПОДДЕРЖКА БРАУЗЕРАМИ 4

5 ОБЪЯВЛЕНИЕ ЭЛЕМЕНТА 5 Для объявления используется тег Your browser doesnt support canvas element canvas = document.getElementById('canvas'); if (canvas.getContext) { //Canvas поддерживается } else { //Canvas не поддерживается }

6 СОЗДАНИЕ ПРИМИТИВОВ 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();

7 РАБОТА С КРИВЫМИ 7 quadricCurveTo(cpx, cpy, x, y) bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) arcTo(x1, y1, x2, y2, radius)

8 СТИЛИЗАЦИЯ ЛИНИЙ 8 lineWidth lineJoin strokeStyle

9 РАБОТА С ЦВЕТОМ 9 fillStyle fillRect(x, y, width, height) clearRect(x, y, width, height)

10 РАБОТА С ГОТОВЫМ ИЗОБРАЖЕНИЕМ 10 drawImage(image, x, y, width, height) var image = new Image(); image.src = image.jpg; image.onload = function() { drawImage(image, 5, 10, 100, 100); }

11 ГРАДИЕНТ 11 createLinearGradient(x0, x1, y0, y1) addColorStop(gradientPart, color) createRadialGradient(x0, y0, r0, x1, y1, r1); var gradient = createLinearGradient(0, 0, 100, 1000); gradient.addColorStop(0, rgb(255, 0, 0)); gradient.addColorStop(0.5. rgb(0, 255, 0)); gradient.addColorStop(1 rgb(0, 0, 255)); context.fillStyle = gradient; context.fillRect = (0, 0, 100, 100);

12 ИЗОБРАЖЕНИЯ - ШАБЛОНЫ 12 createPattern(Image, repeat) repeat repeat-x repeat-y norepeat var image = new Image(); image.src = image.jpg; Image.onload = new function() { context.strokeStyle = context.createPattern(image, repeat);

13 ОСНОВНЫЕ ГРАФИЧЕСКИЕ ПРЕОБРАЗОВАНИЯ 13 translate(x, y) scale(x, y) rotate(cornerRadian) save() restore()

14 РАБОТА С ТЕКСТОМ 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);

15 РАБОТА С ТЕНЬЮ 15 shadowColor shadowOffsetX shadowOffsetY shadowBlur

16 РАБОТА С ПИКСЕЛЯМИ ИЗОБРАЖЕНИЯ 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)

17 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». СОЗДАНИЕ ФОРМЫ 17 Snake

18 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». ОБЪЯВЛЕНИЕ ПЕРЕМЕННЫХ 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;

19 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». ОТРИСОВКА ЭЛЕМЕНТОВ 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); }

20 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». ПРОВЕРКА НА ПРИНАДЛЕЖНОСТЬ ТОЧКИ ТЕЛУ ЗМЕЙКИ 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; }

21 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». ДОБАВЛЕНИЕ ЭЛЕМЕНТОВ 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(); }

22 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». ПРОВЕРКА НА СТОЛКНОВЕНИЕ 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; }

23 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». УПРАВЛЕНИЕ СОСТОЯНИЕМ ИГРЫ 23 function play() { if(paused) { clock = setInterval(movement, speed); } else { clearInterval(clock); } paused = !paused; }

24 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». ОСНОВНОЙ ИГРОВОЙ ЦИКЛ 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(); }

25 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». УПРАВЛЕНИЕ 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; case 39: if(direction != 0) { direction = 2; } break; case 40: if(direction != 1) { direction = 3; } break; }

26 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». ИНИЦИАЛИЗАЦИЯ 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 isnt supported!"); return false; }

27 СОЗДАНИЕ ИГРЫ «ЗМЕЙКА». ГОТОВАЯ ИГРА 27

28 СПИСОК ИСТОЧНИКОВ Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов