Điểm trận đấu
Nhấn các nút để di chuyển hình vuông màu đỏ:
Đếm điểm
Có nhiều cách để giữ điểm trong trò chơi, chúng tôi sẽ hướng dẫn bạn cách viết điểm lên canvas.
Đầu tiên hãy tạo thành phần điểm số:
Ví dụ
var myGamePiece;
var myObstacles = [];
var myScore;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 160);
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
myGameArea.start();
}
Cú pháp viết văn bản trên phần tử canvas khác với cú pháp vẽ hình chữ nhật. Do đó, chúng ta phải gọi hàm tạo thành phần bằng cách sử dụng một đối số bổ sung, cho hàm tạo biết rằng thành phần này thuộc loại "văn bản".
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 "văn bản" hay không và sử dụng phương thức fillText
thay vì phương thức fillRect
:
Ví dụ
function component(width, height, color, x, y , type ) {
this.type = type;
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 (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
...
}
Cuối cùng, chúng tôi thêm một số mã vào hàm updateGameArea để ghi điểm lên khung vẽ. Chúng ta sử dụng thuộc tính frameNo
để đếm điểm:
Ví dụ
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].speedX = -1;
myObstacles[i].newPos();
myObstacles[i].update();
}
myScore.text = "SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}
Hãy tự mình thử »