Canvas de jeu

L'élément HTML <canvas> s'affiche sous forme d'objet rectangulaire sur une page web :

Canvas HTML

méthode create d'un élément est très approprié pour développer des jeux dans HTML.

méthode create d'un élément fournit toutes les fonctionnalités nécessaires pour créer un jeu.

Utilisez JavaScript sur méthode create d'un dessiner, écrire du texte, insérer des images, etc.

.getContext("2d")

méthode create d'un élément possède un objet intégré appelé getContext("2d") l'objet, qui fournit des méthodes et des attributs pour le dessin.

Vous pouvez trouver sur notre Tutoriel Canvas apprendre sur méthode create d'un éléments et getContext("2d") savoir plus sur l'objet.

Alors, commençons

Pour créer un jeu, créez d'abord une zone de jeu et préparez-vous à dessiner :

instance

function startGame() {
  monJeuArea.start();
}
var monJeuArea = {
  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]);
  }
}

essayez-le vous-même

Dans une partie plus avancée de ce tutoriel, l'objet monJeuArea obtiendra plus d'attributs et de méthodes.

fonction startGame() appeler monJeuArea 对象的 méthode. objet.

méthode. méthode start() méthode create d'un élément <canvas>, et est inséré en tant que premier noeud enfant élément <body> dans l'élément.