Your SlideShare is downloading. ×
0
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание HTML игр на элементе canvas
создание 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,699

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,699
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
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

×