Komponenty gry

Dodaj czerwony kwadrat do obszaru gry:

Dodaj komponent

Stwórz konstruktor komponentu, który pozwala na dodanie komponentu do obszaru gry.

Konstruktor tego obiektu nazywa siękomponent (component), stworzyliśmy pierwszy komponent o nazwie myGamePiece:

przykład

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

Spróbuj sam

Te komponenty mają atrybuty i metody do kontrolowania ich wyglądu i ruchu.

Klatka

Aby przygotować grę do ruchu, aktualizujemy wyświetlanie 50 razy na sekundę, co jest podobne do klatek w filmie.

Po pierwsze, utwórz obiekt updateGameArea() nowej funkcji.

w myGameArea obiektu, dodaj间隔, który będzie uruchamiał się co 20 milisekund updateGameArea() funkcji (50 razy na sekundę). Dodaj również funkcję clear() funkcji, która czyszczy całą klatkę.

w component w konstruktorze, dodano funkcję update() funkcji, która obsługuje rysowanie komponentu.

updateGameArea() wywołania funkcji clear() i update() metoda.

Wynik to komponent rysowany i czyszczony 50 razy na sekundę:

przykład

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

Spróbuj sam

Rusz go

Aby udowodnić, że czerwony kwadrat jest rysowany 50 razy na sekundę, przy każdym aktualizowaniu obszaru gry zmieniamy pozycję x (poziomo) o jeden piksel:

przykład

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

Spróbuj sam

Dlaczego czyszczyć obszar gry?

Wydaje się, że nie ma potrzeby czyszczenia obszaru gry przy każdym aktualizowaniu. Jednak, jeśli pominiemy clear() Metoda, wszystkie ruchy komponentu zostawiają ślad po swojej pozycji na ostatnim klatce:

przykład

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

Spróbuj sam

zmiana rozmiaru

możesz kontrolować szerokość i wysokość komponentów:

przykład

utwórz prostokąt 10x140 pikseli:

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

Spróbuj sam

zmiana koloru

możesz kontrolować kolor komponentów:

przykład

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

Spróbuj sam

możesz użyć innych wartości kolorów, takich jak szesnastkowe, rgb lub rgba:

przykład

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

Spróbuj sam

zmiana pozycji

Używamy współrzędnych x i y do umieszczenia komponentów w obszarze gry.

Współrzędne lewego górnego rogu rysunku to (0,0).

Umieść wskaźnik myszy nad poniższym obszarem gry, aby zobaczyć jego współrzędne x i y:

możesz umieścić komponenty w dowolnym miejscu w obszarze gry:

przykład

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

Spróbuj sam

wiele komponentów

możesz umieścić dowolną liczbę komponentów w obszarze gry:

przykład

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

Spróbuj sam

ruch komponentów

ruch trzech komponentów w różnych kierunkach:

przykład

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

Spróbuj sam