Peli-komponentit

Lisää punainen laatikko pelialueelle:

Lisää komponentti

Luo komponentticonstructor, joka mahdollistaa komponentin lisäämisen pelialueelle.

Tämä objekticonstructor kutsutaankomponentti（component），me loimme ensimmäisen komponentin, nimeltään myGamePiece:

esimerkki

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);
}

Kokeile itse

Näillä komponenteilla on ominaisuuksia ja menetelmiä, joilla ne voivat hallita ulkoasuaan ja liikettään.

Kuvake

Jotta peli olisi valmis toimintaan, päivitämme näytön näyttö 50 kertaa sekunnissa, mikä on aivan kuin elokuvan kuvakelkassa.

首先，创建一个名为 updateGameArea() Ensiksi, luodaan nimi

toiminnolle uuden toiminnon. myGameArea updateGameArea() objektiin, joka lisää tauon, joka suorittaa clear() puhdistamaan koko kuvakkeen alue (50 kertaa sekunnissa). Lisäksi lisättiin nimiä

toiminnolle component Rakentajafunktiosta, lisättiin nimiä update() funktiota, joka käsittelee komponentin piirtämistä.

updateGameArea() funktiokutsu clear() ja update() Metodi.

Tuloksena on, että komponentti piirretään ja poistetaan 50 kertaa sekunnissa:

esimerkki

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();
}

Kokeile itse

Anna liikkeen

Osoittaaksemme, että punainen laatikko piirretään 50 kertaa sekunnissa, muutetaan x-sijaintia (horisontaalisesti) yksi pikseli kerrallaan jokaisen pelialueen päivityksen yhteydessä:

esimerkki

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

Kokeile itse

Miksi puhdistaa pelialue?

Ei näytä tarpeelliselta puhdistaa pelialuetta joka kerta päivityksen yhteydessä. Kuitenkin, jos laiminlyömme clear() Metodi, komponentin kaikki liikkeet jättävät jäljen viimeisellä kuvakkeella olevasta sijainnista:

esimerkki

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

Kokeile itse

muuta mittoja

voit hallita komponentin leveyttä ja korkeutta:

esimerkki

luo 10x140 pikselin nelikulmio:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

Kokeile itse

muuta väriä

voit hallita komponentin väriä:

esimerkki

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}

Kokeile itse

voit käyttää myös muita väriarvoja, kuten heksadesimaaleja, rgb tai rgba:

esimerkki

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

Kokeile itse

muuta sijaintia

käytämme x ja y -koordinaatteja sijoittaaksemme komponentit pelialueelle.

piirustusalueen vasen yläkulma on (0,0).

pysäytä hiiren osoitin alla olevaan pelialueeseen nähdäksesi sen x ja y -koordinaatit:

voit sijoittaa komponentit pelialueen mihin tahansa sijaintiin:

esimerkki

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

Kokeile itse

useita komponentteja

voit sijoittaa minkä määrän komponentteja tahansa pelialueelle:

esimerkki

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();
}

Kokeile itse

liikkuva komponentti

liikuta kolmea komponenttia eri suuntiin samanaikaisesti:

esimerkki

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();
}

Kokeile itse