Компоненты игры
Добавьте красный квадрат на игровую область:
Добавить компонент
Создайте конструктор компонентов, который позволит вам добавлять компоненты в игровую зону.
Конструктор объекта называется
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 миллисекунд (50 раз в секунду). Также добавьте функцию с именем clear(), которая очищает весь холст.
В 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);
}
Вы также можете использовать другие значения цвета, такие как hex, 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();
}