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

2,985
-1

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,985
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

×