Добавить красный квадрат на игровом поле:
Добавление компонента
Сделать компонент конструктор, который позволяет добавлять компоненты на gamearea.
Конструктор объект называется 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 times per second) . Кроме того, добавить функцию , называемую 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 раз в секунду, мы изменим положение х (horizontal) по (horizontal) на один пиксель каждый раз , когда мы обновляем область игры:
пример
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Попробуй сам " Почему Clear The Game Area?
Это может показаться излишним, чтобы очистить область игры на каждом обновлении. Однако, если оставить в clear() метод, все движения компонента оставит след , где она была расположена в последнем кадре:
пример
function updateGameArea() {
//myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Попробуй сам " Изменение размера
Вы можете контролировать ширину и высоту компонента:
пример
Создание 10x140 пикселей прямоугольник:
function startGame() {
myGameArea.start();
myGamePiece = new
component( 10 , 140 , "red" , 10, 120);
} Попробуй сам " Изменение цвета
Вы можете контролировать цвет компонента:
пример
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue" , 10, 120);
} Попробуй сам " Вы также можете использовать другие colorvalues как HEX, RGB или RGBA:
пример
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
} Попробуй сам " Изменение позиции
Мы используем х и у координаты для размещения компонентов на игровом поле.
В верхнем левом углу холста имеет координаты (0,0)
Наведите курсор мыши на области игры ниже, чтобы увидеть ее координаты х и у:
Вы можете расположить компоненты где угодно на игровом поле:
пример
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();
}
Попробуй сам "