Изображения игр
Нажимайте на кнопки, чтобы перемещать смайлик:
Как использовать изображения?
Чтобы добавить изображения на холст, объект getContext("2d") имеет встроенные свойства и методы изображения.
В нашей игре, чтобы создать игровой элемент в виде изображения, используйте конструктор компонента, но вместо ссылки на цвет вы должны ссылаться на URL-адрес изображения. И вы должны сообщить конструктору, что этот компонент имеет тип «изображение»:
Пример
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
В конструкторе компонента мы проверяем, относится ли компонент к типу «изображение», и создаем объект изображения с помощью встроенного конструктора объекта «новое изображение()». Когда мы готовы нарисовать изображение, мы используем метод 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;
}
}
}
}