Composants du jeu
Ajoutez un carré rouge sur la zone de jeu :
Ajouter un composant
Créez un constructeur de composants, qui vous permet d'ajouter des composants dans la zone de jeu.
Le constructeur d'objet s'appelle
component, et nous créons notre premier composant, appelé myGamePiece:
Exemple
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
Les composants ont des propriétés et des méthodes pour contrôler leurs apparences et leurs mouvements.
Cadres
Pour rendre le jeu prêt à l'action, nous mettrons à jour l'affichage 50 fois par seconde, ce qui ressemble beaucoup aux images d'un film.
Tout d'abord, créez une nouvelle fonction appelée updateGameArea().
Dans l' myGameAreaobjet, ajoutez un intervalle qui exécutera la updateGameArea()fonction toutes les 20 millisecondes (50 fois par seconde). Ajoutez également une fonction appelée clear(), qui efface tout le canevas.
Dans le componentconstructeur, ajoutez une fonction appelée
update(), pour gérer le dessin du composant.
La updateGameArea()fonction appelle la clear()et la update()méthode.
Le résultat est que le composant est dessiné et effacé 50 fois par seconde :
Exemple
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]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
}
Faites-le bouger
Pour prouver que le carré rouge est dessiné 50 fois par seconde, nous changerons la position x (horizontale) d'un pixel à chaque fois que nous mettrons à jour la zone de jeu :
Exemple
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Pourquoi effacer la zone de jeu ?
Il peut sembler inutile de vider la zone de jeu à chaque mise à jour. Cependant, si nous laissons de côté la
clear()méthode, tous les mouvements du composant laisseront une trace de l'endroit où il était positionné dans la dernière image :
Exemple
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Modifier la taille
Vous pouvez contrôler la largeur et la hauteur du composant :
Exemple
Créez un rectangle de 10 x 140 pixels :
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
Changer la couleur
Vous pouvez contrôler la couleur du composant :
Exemple
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
Vous pouvez également utiliser d'autres valeurs de couleur comme hex, rgb ou rgba :
Exemple
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Changer de position
Nous utilisons les coordonnées x et y pour positionner les composants sur la zone de jeu.
Le coin supérieur gauche de la toile a les coordonnées (0,0)
Passez la souris sur la zone de jeu ci-dessous pour voir ses coordonnées x et y :
Vous pouvez positionner les composants où bon vous semble sur l'aire de jeu :
Exemple
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
De nombreux composants
Vous pouvez mettre autant de composants que vous le souhaitez sur la zone de jeu :
Exemple
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new component(75, 75, "red", 10, 10);
yellowGamePiece = new component(75, 75, "yellow", 50, 60);
blueGamePiece = new component(75, 75, "blue", 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
Composants mobiles
Faire bouger les trois composants dans des directions différentes :
Exemple
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}