Создание html игр на элементе canvas презентация

низкое энергопотребление
Поддержка управления, с помощью сенсорных экранов

element


canvas = document.getElementById('canvas');
if (canvas.getContext)
{ //Canvas поддерживается
}
else
{ //Canvas не поддерживается
}

30);
context.stroke();

y1, x2, y2, radius)

Image();
image.src = ‘image.jpg’;
image.onload = function()
{
drawImage(image, 5, 10, 100, 100);
}

= 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);

new function()
{
context.strokeStyle = context.createPattern(image, ‘repeat’);

= ‘Arial’;
context.strokeText(“Hello world!”, 0, 0, 300);

+ x) * 4
G = (((width * y) + x) * 4) + 1
B = (((width * y) + x) * 4) + 2
Alpha = (((width * y) + x) * 4) + 3
putImageData(imageData, dx, dy)

onload="init()">

= "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;

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);
}

res = false;
for(i = 0; i < snake.length && !res; ++i)
{
res = x == snake[i][0] && y == snake[i][1];
}
return res;
}

? 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();
}

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;
}

clock = setInterval(movement, speed);
}
else
{
clearInterval(clock);
}
paused = !paused;
}

+ 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();
}

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;
case 39:
if(direction != 0)
{
direction = 2;
}
break;
case 40:
if(direction != 1)
{
direction = 3;
}
break;
}
}
}

(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;
}
}