Your SlideShare is downloading. ×
создание HTML игр на элементе canvas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

2,591
views

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,591
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. СОЗДАНИЕ HTML ИГР НА ЭЛЕМЕНТЕ CANVAS
  • 2. ПРИЕМУЩЕСТВА HTML5 ПЕРЕД FLASH• Открытость платформы• Чистая веб-технология• Более высокие надѐжность, производительность и безопасность• Более низкое энергопотребление• Поддержка управления, с помощью сенсорных экранов 2
  • 3. ИСТОРИЯ HTML5 3
  • 4. ПОДДЕРЖКА БРАУЗЕРАМИ 4
  • 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
  • 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)repeatrepeat-xrepeat-ynorepeatvar 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• 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. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».СОЗДАНИЕ ФОРМЫ<!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
  • 27. СОЗДАНИЕ ИГРЫ «ЗМЕЙКА».ГОТОВАЯ ИГРА 27
  • 28. СПИСОК ИСТОЧНИКОВ• http://evolutionofweb.appspot.com• http://caniuse.com• http://www.apple.com/hotnews/thoughts-on-flash/• Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов 28