Canvas Гра
HTML елемент <canvas> відображається як прямокутний об’єкт на вебсторінці:
HTML Canvas
Елемент <canvas> ідеально підходить для створення ігор на HTML.
Елемент <canvas> пропонує всі функції, необхідні для створення ігор.
Використовуйте JavaScript, щоб малювати, писати, вставляти зображення тощо на <canvas>.
.getContext("2d")
Елемент <canvas> має вбудований об’єкт, який називається об’єктом getContext("2d"), із методами та властивостями для малювання.
Ви можете дізнатися більше про елемент <canvas> і об’єкт getContext("2d") в Canvas Підручнику на нашому сайті W3Schools українською.
Початок
Щоб створити гру, почніть зі створення ігрової зони та підготуйте її до малювання:
Приклад
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>.
