Hình ảnh trò chơi
Nhấn các nút để di chuyển mặt cười:
Làm thế nào để sử dụng hình ảnh?
Để thêm hình ảnh trên canvas, đối tượng getContext("2d") có các thuộc tính và phương thức hình ảnh tích hợp sẵn.
Trong trò chơi của chúng tôi, để tạo trò chơi dưới dạng hình ảnh, hãy sử dụng hàm tạo thành phần, nhưng thay vì tham chiếu đến màu sắc, bạn phải tham chiếu đến url của hình ảnh. Và bạn phải cho hàm tạo biết rằng thành phần này thuộc loại "hình ảnh":
Ví dụ
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" , 10, 120, "image" );
myGameArea.start();
}Trong hàm tạo thành phần, chúng tôi kiểm tra xem thành phần đó có thuộc loại "hình ảnh" hay không và tạo đối tượng hình ảnh bằng cách sử dụng hàm tạo đối tượng "hình ảnh mới()" tích hợp sẵn. Khi chúng ta đã sẵn sàng vẽ hình ảnh, chúng ta sử dụng phương thức drawImage thay vì phương thức fillRect:
Ví dụ
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);
}
}
}
Hãy tự mình thử » Thay đổi hình ảnh
Bạn có thể thay đổi hình ảnh bất cứ khi nào bạn muốn bằng cách thay đổi thuộc tính src của đối tượng image trong thành phần của bạn.
Nếu bạn muốn thay đổi mặt cười mỗi khi nó di chuyển, hãy thay đổi nguồn hình ảnh khi người dùng nhấp vào nút và trở lại bình thường khi không nhấp vào nút:
Ví dụ
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;
}
Hãy tự mình thử »Hinh nên
Thêm hình nền vào khu vực trò chơi của bạn bằng cách thêm hình nền đó làm thành phần, đồng thời cập nhật hình nền trong mọi khung hình:
Ví dụ
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();
}
Hãy tự mình thử »Nền chuyển động
Thay đổi thuộc tính speedX của thành phần nền để làm cho nền di chuyển:
Ví dụ
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Hãy tự mình thử »Vòng lặp nền
Để tạo vòng lặp nền giống nhau mãi mãi, chúng ta phải sử dụng một kỹ thuật cụ thể.
Bắt đầu bằng cách thông báo cho hàm tạo thành phần rằng đây là nền . Sau đó, hàm tạo thành phần sẽ thêm hình ảnh hai lần, đặt hình ảnh thứ hai ngay sau hình ảnh đầu tiên.
Trong phương thức newPos() kiểm tra xem vị trí x của thành phần đã đến cuối ảnh chưa, nếu có thì đặt vị trí x của thành phần về 0:
Ví dụ
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;
}
}
}
}
Hãy tự mình thử »