Холст игры
HTML- <canvas>элемент отображается как прямоугольный объект на веб-странице:
HTML-холст
Элемент <canvas>идеально подходит для создания игр в HTML.
Элемент <canvas>предлагает все функции, необходимые для создания игр.
Используйте JavaScript, чтобы рисовать, писать, вставлять изображения и многое другое в файлы
<canvas>.
.getContext("2d")
Элемент <canvas>имеет встроенный объект, называемый getContext("2d")объектом, с методами и свойствами для рисования.
Вы можете узнать больше об <canvas>элементе и
getContext("2d")объекте в нашем учебном пособии по Canvas .
Начать
Чтобы сделать игру, начните с создания игровой зоны и подготовьте ее к рисованию:
Пример
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
myGameAreaПозже в этом руководстве объект будет иметь больше свойств и методов.
Функция startGame()вызывает метод
start()объекта
myGameArea.
Метод
start()создает <canvas>элемент и вставляет его в качестве первого дочернего узла <body>элемента.