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 giao tử 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 nói với phương thức khởi tạo rằng thành phần này thuộc loại "hình ảnh":
Thí dụ
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
Trong phương thức khởi tạo thành phần, chúng tôi kiểm tra xem thành phần có thuộc kiểu "image" hay không và tạo một đối tượng hình ảnh bằng cách sử dụng phương thức khởi tạo đối tượng "new Image ()" được 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:
Thí 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);
}
}
}
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 srctính của imageđối tượng 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:
Thí 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;
}
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 nó làm thành phần và cũng cập nhật hình nền trong mọi khung hình:
Thí 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();
}
Nền chuyển động
Thay đổi thuộc tính của thành phần nền speedXđể làm cho nền di chuyển:
Thí dụ
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Vòng lặp nền
Để thực hiện cùng một vòng lặp nền 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 nói với phương thức khởi 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 newPos()phương thức này, hãy kiểm tra xem xvị trí của thành phần đã đến cuối hình ảnh chưa, nếu có, hãy đặt xvị trí của thành phần thành 0:
Thí 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;
}
}
}
}