Компоненты игры

Добавить красный прямоугольник в игровую область:

Добавление компонента

Создайте конструктор компонента, который позволяет вам добавлять компоненты в игровую область.

Этот объект конструктора называетсяКомпонент (component)，мы создали первый компонент, названный myGamePiece:

экземпляр

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

Попробуйте сами

Эти компоненты имеют свойства и методы для управления их внешним видом и движением.

Кадр

Чтобы готовить игру к действию, мы будем обновлять изображение 50 раз в секунду, что очень похоже на кадры в фильме.

首先，创建一个名为 updateGameArea() 首先，创建一个名为

的函数，用于清除整个画布。 的新函数。 myGameArea updateGameArea() 对象中，添加一个间隔，该间隔将每 20 毫秒运行一次 clear(); 函数（每秒 50 次）。再添加一个名为

的函数，用于清除整个画布。 component 构造函数中，添加了一个名为 update() 的函数，用于处理组件的绘制。

updateGameArea() 函数调用 clear(); 和 update() 方法。

结果是组件每秒会被绘制和清除 50 次：

экземпляр

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

Попробуйте сами

让它动起来

为了证明红色方块每秒被绘制 50 次，每次更新游戏区域时，我们都会将 x 位置（水平）更改一个像素：

экземпляр

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

Попробуйте сами

为什么要清理游戏区？

似乎没有必要在每次更新时清理游戏区域。然而，如果我们省略 clear(); Метод, все перемещения компонента оставляют след его позиции на последнем кадре:

экземпляр

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

Попробуйте сами

изменение размеров

Вы можете контролировать ширину и высоту компонента:

экземпляр

Создайте прямоугольник 10x140 пикселей:

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

Попробуйте сами

изменение цвета

Вы можете контролировать цвет компонента:

экземпляр

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

Попробуйте сами

Вы можете использовать другие значения цвета, такие как шестнадцатеричный, rgb или rgba:

экземпляр

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

Попробуйте сами

изменение позиции

Мы используем координаты x и y для позиционирования компонентов в игровой области.

Координаты верхнего левого угла канвы (0,0).

Наведите мышь на нижнюю игровую область, чтобы увидеть координаты x и y:

Вы можете поместить компоненты в любое место в игровой области:

экземпляр

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

Попробуйте сами

несколько компонентов

Вы можете поместить любое количество компонентов в игровую область:

экземпляр

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

Попробуйте сами

движение компонента

сделайте так, чтобы три компонента двигались в различных направлениях одновременно:

экземпляр

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

Попробуйте сами