Ігрові компоненти
Додайте червоний квадрат на ігрову зону:
Додати компонент
Створіть конструктор компонентів, який дозволить додавати компоненти в ігрову область.
Конструктор об’єкта називається 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();
}
Спробуйте самі »
