Ajouter un carré rouge sur la zone de jeu:
Ajout d'un composant
Faire un constructeur du composant, ce qui vous permet d'ajouter des composants sur le gamearea.
Le constructeur de l' objet est appelé component , et nous faisons 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 apparitions et les mouvements.
Cadres
Pour rendre le jeu prêt pour l'action, nous mettrons à jour l'affichage 50 fois par seconde, ce qui est un peu comme cadres dans un film.
Tout d' abord, créer une nouvelle fonction appelée updateGameArea() .
Dans le myGameArea objet, ajoutez un intervalle qui va exécuter le updateGameArea() fonction tous les 20 millisecondes (50 times per second) . Ajoutez également une fonction appelée clear() , qui efface toute la toile.
Dans le component constructeur, ajouter une fonction appelée update() à update() , pour manipuler le dessin du composant.
Le updateGameArea() fonction appelle la clear() et de la update() à update() méthode.
Le résultat est que le composant est prélevé et dégagé 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();
} Essayez - le vous - même » Faire bouger
Pour prouver que le carré rouge est dessiné 50 fois par seconde, nous allons changer la position x (horizontal) d'un pixel à chaque fois que nous mettons à jour la zone de jeu:
Exemple
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Essayez - le vous - même » Pourquoi Clear The Area Game?
Il peut sembler inutile de dégager la zone de jeu à chaque mise à jour. Cependant, si nous laissons le clear() méthode, tous les mouvements de la composante laissera une trace de l' endroit où il a été placé dans la dernière image:
Exemple
function updateGameArea() {
//myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Essayez - le vous - même » Modifier la taille
Vous pouvez contrôler la largeur et la hauteur de la pièce:
Exemple
Créer un rectangle 10x140 pixels:
function startGame() {
myGameArea.start();
myGamePiece = new
component( 10 , 140 , "red" , 10, 120);
} Essayez - le vous - même » Changer la couleur
Vous pouvez contrôler la couleur du composant:
Exemple
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue" , 10, 120);
} Essayez - le vous - même » Vous pouvez également utiliser d'autres colorvalues comme hex, rgb, ou rgba:
Exemple
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
} Essayez - le vous - même » Changer la 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 partout où vous voulez sur l'aire de jeu:
Exemple
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red" , 2 , 2 );
} Essayez - le vous - même » 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();
}
Essayez - le vous - même » Composants Déplacement
Faire les trois composants se déplacent 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();
}
Essayez - le vous - même »