Создаем персонажа в игре на HTML 5. Создаем игру. Часть 1

Сегодня я рассмотрю создание персонажа для игры на HTML 5. Сегодня рассмотрим просто вывод персонажа в окно браузера. Сначала создадим файлы и структуры папок для дальнейшего развития игры. Создаем папки и файлы: img, js, index.html:

img
js
- game.js
- jquery-1.4.2.min.js
index.html
Файл index.html с Canvas, на котором мы будем рисовать и делать игру
<html>
    <head>
        <title>canvasExample</title>
        <meta charset='utf-8' />
<script src="js/jquery-1.4.2.min.js"></script>
<style>
canvas{
border: 1px solid black;
}
</style>
    </head>
    <body>
        <canvas width='640' height='480' id='example'>Обновите браузер</canvas>
<script src="js/game.js"></script>
    </body>
</html>
Затем заполняем файл game.js с функциями на языке JavaScript
var WIDTH = 640; // Ширина Canvas
var HEIGHT = 480; // Высота Canvas

var textX = 50; // Начальная позиция персонажа
var textY = 50;

var FPS = 30; // Число FPS - кадры в секунду


var example = document.getElementById("example");
ctx     = example.getContext('2d');

setInterval(function() {
update();
draw();
}, 1000/FPS); // Обновление 1/FPS (число кадров в секунду/милисекунды)

// Создаем персонажа
var player = {
color: "#00A", // Цвет синий
x: textX, // Координата X
y: textY, // Координата Y
width: 64, // Ширина объекта
height: 64, // Высота объекта
draw: function(){
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height); // Создаем прямоугольник с помощью метода fillRect(x, y, width, height)
}
}

function update(){

}
// Метод рисования на Canvas объектов
function draw(){
ctx.clearRect(0, 0, WIDTH, HEIGHT); // Очищение Canvas

player.draw(); // Размещаем персонажа на Canvas
}

А если Вы хотите подтянуть и узнать больше о Canvas в HTML 5, то Вам полезные ссылки: http://www.html5canvastutorials.com/ - Сайт полностью посвящен HTML 5 Canvas http://www.w3schools.com/TAGS/ref_canvas.asp - уроки по Canvas