Гра. Зображення
Натискайте кнопки, щоб перемістити смайлик:
Як використовувати зображення?
Для додавання зображень на полотно об’єкт getContext("2d") має вбудовані властивості та методи зображення.
У нашій грі, щоб створити ігровий елемент як зображення, використовуйте конструктор компонентів, але замість посилання на колір ви повинні посилатися на URL-адресу зображення. І ви повинні повідомити конструктору, що цей компонент має тип "image":
Приклад
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
У конструкторі компонентів ми перевіряємо, чи має компонент тип "image", і створюємо об’єкт зображення за допомогою вбудованого конструктора об’єктів "new Image()". Коли ми готові намалювати зображення, ми використовуємо метод drawImage замість методу fillRect:
Приклад
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}
Спробуйте самі »
Змінити зображення
Ви можете будь-коли змінити зображення, змінивши властивість src об’єкта image вашого компонента.
Якщо ви хочете змінювати смайлик кожного разу, коли він рухається, змінюйте джерело зображення, коли користувач натискає кнопку, і повертайтеся до нормального, коли кнопку не натискає:
Приклад
function move(dir) {
myGamePiece.image.src = "angry.gif";
if (dir == "up") {myGamePiece.speedY = -1; }
if (dir == "down") {myGamePiece.speedY = 1; }
if (dir == "left") {myGamePiece.speedX = -1; }
if (dir == "right") {myGamePiece.speedX = 1; }
}
function clearmove() {
myGamePiece.image.src = "smiley.gif";
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
Спробуйте самі »
Фонові зображення
Додайте фонове зображення до вашої ігрової області, додавши його як компонент, а також оновіть фон у кожному кадрі:
Приклад
var myGamePiece;
var myBackground;
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image");
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Спробуйте самі »
Переміщення фону
Змініть властивість speedX фонового компонента, щоб фон рухався:
Приклад
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Спробуйте самі »
Фоновий цикл
Щоб вічно зациклюватися на тому самому фоні, ми повинні використовувати певну техніку.
Почніть із того, що повідомте конструктору компонента, що це фон. Потім конструктор компонента двічі додасть зображення, розмістивши друге зображення відразу після першого.
У методі newPos() перевірте, чи положення x компонента досягає кінця зображення, якщо так, установіть позицію x компонента на 0:
Приклад
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image" || type == "background") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image" || type == "background") {
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
if (type == "background") {
ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
if (this.type == "background") {
if (this.x == -(this.width)) {
this.x = 0;
}
}
}
}
Спробуйте самі »
