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

  • 2,458 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,458
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
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