Toile de jeu
L'élément HTML <canvas>s'affiche sous la forme d'un objet rectangulaire sur une page Web :
Canevas HTML
L' <canvas>élément est parfait pour créer des jeux en HTML.
L' <canvas>élément offre toutes les fonctionnalités dont vous avez besoin pour créer des jeux.
Utilisez JavaScript pour dessiner, écrire, insérer des images, et plus encore, sur le
<canvas>.
.getContext("2d")
L' <canvas>élément a un objet intégré, appelé l' getContext("2d")objet, avec des méthodes et des propriétés pour le dessin.
Vous pouvez en savoir plus sur l' <canvas>élément et l'
getContext("2d")objet dans notre didacticiel Canvas .
Commencer
Pour créer un jeu, commencez par créer une zone de jeu et préparez-la pour le dessin :
Exemple
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]);
}
}
L'objet myGameAreaaura plus de propriétés et de méthodes plus tard dans ce didacticiel.
La fonction startGame()appelle la méthode
start()de l'
myGameAreaobjet.
La
start()méthode crée un <canvas>élément et l'insère en tant que premier nœud enfant de l' <body>élément.