СОЗДАНИЕ HTML ИГР НА ЭЛЕМЕНТЕ           CANVAS
ПРИЕМУЩЕСТВА HTML5 ПЕРЕД FLASH•   Открытость платформы•   Чистая веб-технология•   Более высокие надѐжность, производитель...
ИСТОРИЯ HTML5                3
ПОДДЕРЖКА БРАУЗЕРАМИ                       4
ОБЪЯВЛЕНИЕ ЭЛЕМЕНТА <CANVAS>•   Для объявления используется тег <canvas></canas><canvas>           Your browser doesn’t su...
СОЗДАНИЕ ПРИМИТИВОВ•   beginPath()•   moveTo(x, y)•   lineTo(x, y)•   stroke()var canvas = document.getElementById(canvas)...
РАБОТА С КРИВЫМИ•   quadricCurveTo(cpx, cpy, x, y)•   bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)•   arcTo(x1, y1, x2, y2,...
СТИЛИЗАЦИЯ ЛИНИЙ•   lineWidth•   lineJoin•   strokeStyle                   8
РАБОТА С ЦВЕТОМ•   fillStyle•   fillRect(x, y, width, height)•   clearRect(x, y, width, height)                           ...
РАБОТА С ГОТОВЫМ ИЗОБРАЖЕНИЕМ•   drawImage(image, x, y, width, height)var image = new Image();image.src = ‘image.jpg’;imag...
ГРАДИЕНТ•   createLinearGradient(x0, x1, y0, y1)•   addColorStop(gradientPart, color)•   createRadialGradient(x0, y0, r0, ...
ИЗОБРАЖЕНИЯ - ШАБЛОНЫ•   createPattern(Image, repeat)repeatrepeat-xrepeat-ynorepeatvar image = new Image();image.src = ‘im...
ОСНОВНЫЕ ГРАФИЧЕСКИЕПРЕОБРАЗОВАНИЯ•   translate(x, y)•   scale(x, y)•   rotate(cornerRadian)•   save()•   restore()       ...
РАБОТА С ТЕКСТОМ•   textAlign•   font•   textBaseLine•   strokeText(text, x, y, maxWidth)•   fillText(text, x, y, maxWidth...
РАБОТА С ТЕНЬЮ•   shadowColor•   shadowOffsetX•   shadowOffsetY•   shadowBlur                    15
РАБОТА С ПИКСЕЛЯМИ ИЗОБРАЖЕНИЯ•   getImageData(x, y, width, height)•   width•   height•   dataR = ((width * y) + x) * 4G =...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».СОЗДАНИЕ ФОРМЫ<!doctype html><head>    <title>Snake</title>    <script type="text/javascript" src="...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ОБЪЯВЛЕНИЕ ПЕРЕМЕННЫХvar   snakeColor = "rgb(0, 0, 0)";var   bckColor = "rgb(255, 255, 255)";var   ...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ОТРИСОВКА ЭЛЕМЕНТОВfunction drawSnake(){    ctx.fillStyle = snakeColor;    ctx.fillRect(snake[snake...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ПРОВЕРКА НА ПРИНАДЛЕЖНОСТЬТОЧКИ ТЕЛУ ЗМЕЙКИfunction dotBelongSnake(x, y){    res = false;    for(i ...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ДОБАВЛЕНИЕ ЭЛЕМЕНТОВfunction setX(x){    return x >= 0 ? x % (ctx.canvas.width / gridSize) : x +(ct...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ПРОВЕРКА НА СТОЛКНОВЕНИЕfunction crash(){    res = false;    for(i = 0; i < snake.length - 1 && !re...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».УПРАВЛЕНИЕ СОСТОЯНИЕМ ИГРЫfunction play(){    if(paused)    {         clock = setInterval(movement,...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ОСНОВНОЙ ИГРОВОЙ ЦИКЛfunction movement(){    snake.push([setX(snake[snake.length - 1][0] + changex[...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».УПРАВЛЕНИЕfunction changeDirection(event){    if(!paused)    {        code = 0        if(event == n...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ИНИЦИАЛИЗАЦИЯfunction init(){    canvas = document.getElementById(canvas);    if (canvas.getContext...
СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ГОТОВАЯ ИГРА                          27
СПИСОК ИСТОЧНИКОВ•   http://evolutionofweb.appspot.com•   http://caniuse.com•   http://www.apple.com/hotnews/thoughts-on-f...
Upcoming SlideShare
Loading in...5
×

создание HTML игр на элементе canvas

2,760

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,760
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

создание HTML игр на элементе canvas

  1. 1. СОЗДАНИЕ HTML ИГР НА ЭЛЕМЕНТЕ CANVAS
  2. 2. ПРИЕМУЩЕСТВА HTML5 ПЕРЕД FLASH• Открытость платформы• Чистая веб-технология• Более высокие надѐжность, производительность и безопасность• Более низкое энергопотребление• Поддержка управления, с помощью сенсорных экранов 2
  3. 3. ИСТОРИЯ HTML5 3
  4. 4. ПОДДЕРЖКА БРАУЗЕРАМИ 4
  5. 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. 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. 7. РАБОТА С КРИВЫМИ• quadricCurveTo(cpx, cpy, x, y)• bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)• arcTo(x1, y1, x2, y2, radius) 7
  8. 8. СТИЛИЗАЦИЯ ЛИНИЙ• lineWidth• lineJoin• strokeStyle 8
  9. 9. РАБОТА С ЦВЕТОМ• fillStyle• fillRect(x, y, width, height)• clearRect(x, y, width, height) 9
  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);} 10
  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); 11
  12. 12. ИЗОБРАЖЕНИЯ - ШАБЛОНЫ• createPattern(Image, repeat)repeatrepeat-xrepeat-ynorepeatvar image = new Image();image.src = ‘image.jpg’;Image.onload = new function(){ context.strokeStyle = context.createPattern(image, ‘repeat’); 12
  13. 13. ОСНОВНЫЕ ГРАФИЧЕСКИЕПРЕОБРАЗОВАНИЯ• translate(x, y)• scale(x, y)• rotate(cornerRadian)• save()• restore() 13
  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); 14
  15. 15. РАБОТА С ТЕНЬЮ• shadowColor• shadowOffsetX• shadowOffsetY• shadowBlur 15
  16. 16. РАБОТА С ПИКСЕЛЯМИ ИЗОБРАЖЕНИЯ• getImageData(x, y, width, height)• width• height• dataR = ((width * y) + x) * 4G = (((width * y) + x) * 4) + 1B = (((width * y) + x) * 4) + 2Alpha = (((width * y) + x) * 4) + 3• putImageData(imageData, dx, dy) 16
  17. 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. 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. 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. 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. 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. 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. 23. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».УПРАВЛЕНИЕ СОСТОЯНИЕМ ИГРЫfunction play(){ if(paused) { clock = setInterval(movement, speed); } else { clearInterval(clock); } paused = !paused;} 23
  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();} 24
  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; 25 case 39:
  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 isn’t supported!"); return false; }} 26
  27. 27. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ГОТОВАЯ ИГРА 27
  28. 28. СПИСОК ИСТОЧНИКОВ• http://evolutionofweb.appspot.com• http://caniuse.com• http://www.apple.com/hotnews/thoughts-on-flash/• Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов 28
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×