'

Создание html игр на элементе canvas

Понравилась презентация – покажи это...





Слайд 0

Создание html игр на элементе canvas


Слайд 1

Приемущества html5 перед flash 2 Открытость платформы Чистая веб-технология Более высокие надёжность, производительность и безопасность Более низкое энергопотребление Поддержка управления, с помощью сенсорных экранов


Слайд 2

История HTML5 3


Слайд 3

Поддержка браузерами 4


Слайд 4

Объявление элемента <canvas> 5 Для объявления используется тег <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

Работа с кривыми 7 quadricCurveTo(cpx, cpy, x, y) bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) arcTo(x1, y1, x2, y2, radius)


Слайд 7

Стилизация линий 8 lineWidth lineJoin strokeStyle


Слайд 8

Работа с цветом 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

Градиент 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);


Слайд 11

Изображения - шаблоны 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’);


Слайд 12

Основные графические преобразования 13 translate(x, y) scale(x, y) rotate(cornerRadian) save() restore()


Слайд 13

Работа с текстом 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; case 39: if(direction != 0) { direction = 2; } break; case 40: if(direction != 1) { direction = 3; } break; } } }


Слайд 25

Создание игры «змейка». инициализация 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

Создание игры «змейка». Готовая игра 27


Слайд 27

Список источников 28 http://evolutionofweb.appspot.com http://caniuse.com http://www.apple.com/hotnews/thoughts-on-flash/ Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов


×

HTML:





Ссылка: