Adăugați un pătrat roșu pe suprafața de joc:
Adăugați o componentă
Asigurați-vă un constructor componentă, care vă permite să adăugați componente pe gamearea.
Constructorul obiect este numit component , si vom face mai întâi componenta noastră, numită myGamePiece :
Exemplu
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);
} Componentele au proprietăți și metode pentru a controla aparițiile și mișcările lor.
Cadre
Pentru a face jocul gata de acțiune, vom actualiza ecranul de 50 de ori pe secundă, ceea ce este mai mult ca de cadre dintr-un film.
În primul rând, să creați o funcție nouă numită updateGameArea() .
În myGameArea obiect, adăugați un interval care va rula updateGameArea() Funcția fiecare milisecunda 20 (50 times per second) de (50 times per second) de (50 times per second) . De asemenea , adăugați o funcție numită clear() , care șterge întreaga pânză.
In component constructorului, adăugați o funcție numită de update() , să se ocupe de desenul componentei.
updateGameArea() funcția de apeluri clear() și de update() metoda.
Rezultatul este că componenta este desenată și compensate de 50 de ori pe secundă:
Exemplu
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();
} Încearcă - l singur » Fă-l Mutați
Pentru a dovedi că pătrat de culoare roșie este tras de 50 de ori pe secundă, vom schimba poziția x (horizontal) de un pixel de fiecare dată când actualizăm zona de joc:
Exemplu
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Încearcă - l singur » De ce Clear joc Zona?
S-ar putea părea inutil să îndepărteze zona de joc la fiecare actualizare. Cu toate acestea, dacă vom lăsa afară clear() metoda, toate mișcările componentei va lăsa o urmă de unde a fost poziționat în ultimul cadru:
Exemplu
function updateGameArea() {
//myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Încearcă - l singur » Modificarea dimensiunii
Puteți controla lățimea și înălțimea componentei:
Exemplu
Creați un dreptunghi 10x140 pixeli:
function startGame() {
myGameArea.start();
myGamePiece = new
component( 10 , 140 , "red" , 10, 120);
} Încearcă - l singur » Schimbați culoarea
Puteți controla culoarea componentei:
Exemplu
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue" , 10, 120);
} Încearcă - l singur » Puteți folosi, de asemenea, alte colorvalues cum ar fi hex, rgb, sau RGBA:
Exemplu
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
} Încearcă - l singur » Schimbați poziția
Noi folosim-coordonatele x și y pentru a poziționa componentele pe zona de joc.
Colțul din stânga sus al pânzei are coordonatele (0,0)
Mouse-ul peste zona de joc de mai jos pentru a vedea x și y coordonatele:
Puteți poziționa componentele oriunde doriți pe zona de joc:
Exemplu
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red" , 2 , 2 );
} Încearcă - l singur » multe componente
Puteți pune cât mai multe componente doriți pe zona de joc:
Exemplu
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();
}
Încearcă - l singur » Mutarea Componente
Asigurați-vă toate cele trei componente se mișcă în direcții diferite:
Exemplu
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();
}
Încearcă - l singur »